本文代碼在線修改與運(yùn)行：
vue實(shí)現(xiàn)簡單的MoreText組件
當(dāng)某一段話太長谦铃，而顯示區(qū)域又比較小的時(shí)候升酣，我們需要在頁面中省略文本，同時(shí)增加一個(gè)互動(dòng)的 [更多] 按鈕用于展開省略的文字僻孝，再點(diǎn)擊 [收起] 則恢復(fù)省略模式消略。
基于Vue.js的自定義組件，我們可以很輕松快速地制作一個(gè)MoreText組件章钾。
1. 定義組件
<!-- 組件模板 -->
<script type="text/x-teamplate" id="moreTextTpl">
<div class="moreText">
{{showText}}
<span class="moreToggle" v-if="needMore" @click="toggle">{{toggleText}}</span>
</div>
</script>
上面這段代碼展示了MoreText這個(gè)組件的基本html結(jié)構(gòu)良蒸。我們再來看JavaScript部分怎么寫
Vue.component('more-text', {
template: '#moreTextTpl', //引用上面寫的模板
props: ['moreLength'], //增加一個(gè)屬性，用于指定多少個(gè)字符才展示【更多】功能
mounted: function() {
this.text = this.$slots.default[0].text; //從默認(rèn)插槽獲取內(nèi)容
},
data: function() {
return {
text: '',
toggleStatus: false
};
},
computed: {
//當(dāng)內(nèi)容超過指定的長度伍玖，才需要【更多】功能
needMore: function() {
return this.text.length > this.moreLength;
},
//展示的文本嫩痰， 當(dāng)前展開狀態(tài)或者不需要【更多】功能時(shí)，展示原本內(nèi)容窍箍，否則截取內(nèi)容
showText: function() {
if (this.toggleStatus || !this.needMore) {
return this.text;
} else {
return this.text.substring(0, this.moreLength) + '...'
}
},
//互動(dòng)按鈕
toggleText: function() {
return this.toggleStatus ? '收起' : '更多';
}
},
methods: {
//切換狀態(tài)
toggle: function() {
this.toggleStatus = !this.toggleStatus;
}
}
});
是不是很簡單串纺，就是簡單的控制展開與收起的狀態(tài)丽旅，其他屬性使用computed做響應(yīng)式處理。
2.使用
看看如何使用：
<style>
.moreToggle{
color:green;
margin-left:10px;
cursor:pointer
}
</style>
<!-- 演示 -->
<div id="app">
<more-text more-length="40">
{{text}}
</more-text>
</div>
<script>
new Vue({
el: '#app',
data:{
text:'感謝 Vue 的響應(yīng)式系統(tǒng)纺棺，它始終知道何時(shí)進(jìn)行更新 (如果你用對(duì)了的話)榄笙。不過還是有一些邊界情況，你想要強(qiáng)制更新祷蝌，盡管表面上看響應(yīng)式的數(shù)據(jù)沒有發(fā)生改變茅撞。也有一些情況是你想阻止不必要的更新。'
}
});
</script>
這樣巨朦，一個(gè)簡單粗糙的MoreText組件就完成了米丘。
Vue讓前端開發(fā)變得簡單高效！：取拄查！
本文代碼在線修改與運(yùn)行：
vue實(shí)現(xiàn)簡單的MoreText組件
