몇 달이 지나도 계속 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 컴포넌트로 캡슐화합니다.
<p class="word-v-middle"><span>文字内容</span></p>
var wordMiddle = { template:'<p class="word-v-middle"><span>文字内容</span></p>', };
<p id="exp"> <word-v-middle></word-v-middle> </p>
new Vue({ el:"#exp", components:{ 'word-v-middle':wordMiddle } });
var wordMiddle = { template:'<p class="word-v-middle"><span>{{msg}}</span></p>', props:['data'], data:function(){ return { msg:this.data }; } };
<p id="exp"> <word-v-middle :data='aaa' ></word-v-middle> </p>
new Vue({ el:"#exp", data:{ aaa:'hello', }, components:{ 'word-v-middle':wordMiddle } })
#example2{ width: 100%; overflow: hidden; } #example2 p{ float: left; width: 25%; }
<p id="example2"> <p v-for='aaa in sites'> <word-v-middle :data='aaa' ></word-v-middle> </p> </p>
new Vue({ el:"#example2", data:{ sites:[ "洗发水洗发水洗发水", "洗发水洗发水", "洗发水洗发水洗发水洗发水洗发水", "洗发水洗发水", ] }, components:{ 'word-v-middle':wordMiddle }})
위 내용은 Vue 위젯의 텍스트 중심 정렬 구성 요소 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!