Vue 위젯의 텍스트 중심 정렬 구성 요소 예

몇 달이 지나도 계속 Vue를 배워요. 이번에는 컴포넌트 제작 과정입니다

우선 컴포넌트의 예상 효과를 살펴보겠습니다

위의 사진은 회사에서 자체적으로 운영하는 것입니다. 위챗몰의 특정 부분을 스크린샷 해보면 빨간색 박스 안의 여러 줄과 한 줄의 텍스트가 중앙에 있는 것을 볼 수 있습니다. 이제 우리가 해야 할 일은 Vue를 사용하는 것입니다. 내부의 텍스트 모듈을 재사용 가능한 구성 요소로 만듭니다.

먼저 CSS 부분을 분해합니다

css:

.word-v-middle{    
margin-bottom: 0;    
font-size: 12px;    
min-height: 31px;    
display: flex;    
align-items: center;    
justify-content: center;    
height: 31px;    
margin-top: 5px;    
color: #87878a;    
white-space: normal;}
.word-v-middle span{    
text-align: left;    
font-size: 10px;    
text-overflow: -o-ellipsis-lastline;    
overflow: hidden;    
text-overflow: ellipsis;    
display: -webkit-box;    
-webkit-line-clamp: 2;    
-webkit-box-orient: vertical;
}

위는 텍스트를 중앙에 배치하는 CSS인 컴포넌트의 핵심 CSS입니다. 다음으로 이를 Vue 컴포넌트로 캡슐화합니다.

html 파트

<p class="word-v-middle"><span>文字内容</span></p>

먼저 이 파트를 컴포넌트로 등록합니다. 여기서는 컴포넌트

var wordMiddle = {
　　template:'<p class="word-v-middle"><span>文字内容</span></p>',
};

의 부분 등록 방법을 사용한 다음 인스턴스화합니다.

html:

<p id="exp">
　　<word-v-middle></word-v-middle>
</p>

js:

new Vue({
　　el:"#exp",
　　components:{
　　　　'word-v-middle':wordMiddle
　　}
});

이런 식으로 첫 번째 단계에서 렌더링이 완료됩니다. 다음과 같이

두 번째 단계는 동적 데이터를 컴포넌트에 바인딩하는 것입니다. 먼저 컴포넌트가 데이터를 받을 수 있도록 컴포넌트 등록 시 props 메소드를 추가한 후 해당 데이터를 사용합니다. 컴포넌트에 데이터를 추가하는 방법

var wordMiddle = {
　　template:&#39;<p class="word-v-middle"><span>{{msg}}</span></p>&#39;,
　　props:[&#39;data&#39;],
　　data:function(){
　　　　return {
　　　　　　msg:this.data
　　　　};
　　}
};

이 방법으로 우리 컴포넌트는 데이터를 수신하고 데이터를 콘텐츠에 바인딩할 수 있습니다. 인스턴스화 중 코드도 이에 따라 변경되어야 합니다.

html part

<p id="exp">
　　<word-v-middle :data=&#39;aaa&#39; ></word-v-middle>
</p>

js part

new Vue({
　　el:"#exp",
　　data:{
　　　　aaa:'hello',
　　},
　　components:{
　　　　'word-v-middle':wordMiddle
　　}
})

단일 동적 데이터 그러나 이 정렬 방법은 일반적으로 다중 열 블록 구조를 사용하는 프로젝트에서 사용되므로 또 다른 다중 열 예제를 작성하고 루프를 사용하여 여러 데이터를 바인딩합니다

css part

#example2{
　　width: 100%;
　　overflow: hidden;
}
#example2 p{
　　float: left;
　　width: 25%;
}

html part

<p id="example2">
　　<p v-for=&#39;aaa in sites&#39;>
　　　　<word-v-middle :data=&#39;aaa&#39; ></word-v-middle>
　　</p>
</p>

js

new Vue({　　
el:"#example2",　　
data:{　　　　
sites:[　　　　　　　　
"洗发水洗发水洗发水",　　　　　　　　
"洗发水洗发水",　　　　　　　　
"洗发水洗发水洗发水洗发水洗发水",
　　　　　　　　"洗发水洗发水",　
　　　　　　　]
　　　　},　　components:{　　　　
　　　　'word-v-middle':wordMiddle　　
　　　　}})

부분의 효과는 위 그림과 같습니다. CSS 부분은 html에서 데이터를 반복하기 위해 4개의 열을 병렬로 만드는 것입니다. 루프 출력은 구성 요소의 data='aaa'를 통해 수신되며, 데이터 소스는 상위 요소 인스턴스화의 데이터에 있는 sites라는 배열입니다. 사이트의 데이터를 배경에 의한 배열 출력으로 대체함으로써 달성됩니다.

위 내용은 Vue 위젯의 텍스트 중심 정렬 구성 요소 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!