#時隔個多月,繼續學習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方法,讓組件可以接受數據,之後使用data方法來為組件添加數據
var wordMiddle = { template:'<p class="word-v-middle"><span>{{msg}}</span></p>', props:['data'], data:function(){ return { msg:this.data }; } };
這樣我們的元件就可以接收資料並把資料綁定到內容中,實例化時的程式碼也要對應的改變一下
html部分
<p id="exp"> <word-v-middle :data='aaa' ></word-v-middle> </p>
js部分
new Vue({ el:"#exp", data:{ aaa:'hello', }, components:{ 'word-v-middle':wordMiddle } })
到這裡單一動態資料的元件以及完成了,但專案中用到這種對齊方式的一般都是多列的區塊結構,所以我們再寫一個多列的例子,並使用循環綁定多個資料
css部分
#example2{ width: 100%; overflow: hidden; } #example2 p{ float: left; width: 25%; }
html部分
<p id="example2"> <p v-for='aaa in sites'> <word-v-middle :data='aaa' ></word-v-middle> </p> </p>
js部分
new Vue({ el:"#example2", data:{ sites:[ "洗发水洗发水洗发水", "洗发水洗发水", "洗发水洗发水洗发水洗发水洗发水", "洗发水洗发水", ] }, components:{ 'word-v-middle':wordMiddle }})##效果如上圖,在上述程式碼中,css部分是為了讓程式碼為並列的四列,html中使用v-for方法循環數據,在組成內透過:data='aaa'接收循環輸出的數據,而數據的來源是父元素實例化中的data內的名為sites的數組,在實際專案中,把sites內的資料換成後台輸出的陣列就可以實現後台資料的綁定。
以上是vue小元件中關於文字居中對齊元件的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!