vue組件實(shí)現(xiàn)文字居中對(duì)齊的方法
繼續(xù)學(xué)習(xí)Vue,這次是一個(gè)組件的制作過程
先讓我們來看一下組件的預(yù)期效果
上圖為公司自營(yíng)的一個(gè)微信商城的某一部分截圖,可以看到紅框內(nèi)部分的文字多行與單行是居中對(duì)齊的,我們現(xiàn)在要做的就是使用Vue把里邊的文字模塊制作成一個(gè)可以復(fù)用的組件。
首先我們先把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,接下來我們先把它封裝成一個(gè)Vue組件
html部分
<p class="word-v-middle"><span>文字內(nèi)容</span></p>
我們先把這部分注冊(cè)成一個(gè)組件,這里使用的是組件的局部注冊(cè)方法
var wordMiddle = { template:'<p class="word-v-middle"><span>文字內(nèi)容</span></p>', };
之后實(shí)例化
html:
<div id="exp"> <word-v-middle></word-v-middle> </div>
js:
new Vue({ el:"#exp", components:{ 'word-v-middle':wordMiddle } });
這樣第一步就算完成了效果圖如下
第二步我們來給組件綁定動(dòng)態(tài)的數(shù)據(jù),我們先在組件注冊(cè)的時(shí)候添加一個(gè)props方法,讓組件可以接受數(shù)據(jù),之后使用data方法來為組件添加數(shù)據(jù)
var wordMiddle = { template:'<p class="word-v-middle"><span>{{msg}}</span></p>', props:['data'], data:function(){ return { msg:this.data }; } };
這樣我們的組件就可以接收數(shù)據(jù)并把數(shù)據(jù)綁定到內(nèi)容中,實(shí)例化時(shí)的代碼也要對(duì)應(yīng)的改變一下
html部分
<div id="exp"> <word-v-middle :data='aaa' ></word-v-middle> </div>
js部分
new Vue({ el:"#exp", data:{ aaa:'hello', }, components:{ 'word-v-middle':wordMiddle } })
到這里單個(gè)動(dòng)態(tài)數(shù)據(jù)的組件以及完成了,但項(xiàng)目中用到這種對(duì)齊方式的一般都是多列的塊結(jié)構(gòu),所以我們?cè)賹懸粋€(gè)多列的例子,并使用循環(huán)綁定多個(gè)數(shù)據(jù)
css部分
#example2{ width: 100%; overflow: hidden; } #example2 div{ float: left; width: 25%; }
html部分
<div id="example2"> <div v-for='aaa in sites'> <word-v-middle :data='aaa' ></word-v-middle> </div> </div>
js部分
new Vue({ el:"#example2", data:{ sites:[ "洗發(fā)水洗發(fā)水洗發(fā)水", "洗發(fā)水洗發(fā)水", "洗發(fā)水洗發(fā)水洗發(fā)水洗發(fā)水洗發(fā)水", "洗發(fā)水洗發(fā)水", ] }, components:{ 'word-v-middle':wordMiddle } })
效果如上圖,上述代碼中,css部分是為了讓代碼為并列的四列,html中使用v-for方法循環(huán)數(shù)據(jù),在組建內(nèi)通過:data='aaa'接收循環(huán)輸出的數(shù)據(jù),而數(shù)據(jù)的來源是父元素實(shí)例化中的data內(nèi)的名為sites的數(shù)組,在實(shí)際項(xiàng)目中,把sites內(nèi)的數(shù)據(jù)換成后臺(tái)輸出的數(shù)組就可以實(shí)現(xiàn)后臺(tái)數(shù)據(jù)的綁定。
代碼還有很多不足的地方,比如想要更改上下對(duì)齊的行數(shù)還要通過修改css修改,這篇文章僅作為學(xué)習(xí)Vue的小結(jié),供自己以后復(fù)習(xí)學(xué)習(xí)使用,有什么問題希望大家指正。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue使用el-table篩選tree樹形結(jié)構(gòu)的數(shù)據(jù)問題
這篇文章主要介紹了vue使用el-table篩選tree樹形結(jié)構(gòu)的數(shù)據(jù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07Vue數(shù)據(jù)變了但頁面沒有變的幾種情況及解決方法
如果,你發(fā)現(xiàn)自己需要在Vue中做一次強(qiáng)制更新,99.99%的情況,是你在某個(gè)地方做錯(cuò)了事,本文給大家就介紹了Vue數(shù)據(jù)變了,但頁面沒有變的幾種情況及解決方法,并通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08vue項(xiàng)目首屏加載時(shí)間優(yōu)化實(shí)戰(zhàn)
單頁面應(yīng)用的一個(gè)問題就是首頁加載東西過多,加載時(shí)間過長(zhǎng)。特別在移動(dòng)端,單頁面應(yīng)用的首屏加載優(yōu)化更是繞不開的話題,這篇文章主要介紹了vue項(xiàng)目首屏加載時(shí)間優(yōu)化實(shí)戰(zhàn),感興趣的小伙伴們可以參考一下2019-04-04vue項(xiàng)目中vue-echarts講解及常用圖表實(shí)現(xiàn)方案(推薦)
這篇文章主要介紹了vue項(xiàng)目中vue-echarts講解及常用圖表方案實(shí)現(xiàn),主要針對(duì)代碼示例中的內(nèi)容進(jìn)行問題講解,詳細(xì)代碼在文章中給大家提到,需要的朋友可以參考下2022-09-09vue實(shí)現(xiàn)路由監(jiān)聽和參數(shù)監(jiān)聽
今天小編就為大家分享一篇vue實(shí)現(xiàn)路由監(jiān)聽和參數(shù)監(jiān)聽,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10vue+Element實(shí)現(xiàn)登錄隨機(jī)驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了vue+Element實(shí)現(xiàn)登錄隨機(jī)驗(yàn)證碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04Vue服務(wù)端渲染實(shí)踐之Web應(yīng)用首屏耗時(shí)最優(yōu)化方案
這篇文章主要介紹了Vue服務(wù)端渲染實(shí)踐之Web應(yīng)用首屏耗時(shí)最優(yōu)化方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03