本文代码在线修改与运行：
vue实现简单的MoreText组件
当某一段话太长，而显示区域又比较小的时候，我们需要在页面中省略文本，同时增加一个互动的 [更多] 按钮用于展开省略的文字，再点击 [收起] 则恢复省略模式。
基于Vue.js的自定义组件，我们可以很轻松快速地制作一个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这个组件的基本html结构。我们再来看JavaScript部分怎么写
Vue.component('more-text', {
template: '#moreTextTpl', //引用上面写的模板
props: ['moreLength'], //增加一个属性，用于指定多少个字符才展示【更多】功能
mounted: function() {
this.text = this.$slots.default[0].text; //从默认插槽获取内容
},
data: function() {
return {
text: '',
toggleStatus: false
};
},
computed: {
//当内容超过指定的长度，才需要【更多】功能
needMore: function() {
return this.text.length > this.moreLength;
},
//展示的文本， 当前展开状态或者不需要【更多】功能时，展示原本内容，否则截取内容
showText: function() {
if (this.toggleStatus || !this.needMore) {
return this.text;
} else {
return this.text.substring(0, this.moreLength) + '...'
}
},
//互动按钮
toggleText: function() {
return this.toggleStatus ? '收起' : '更多';
}
},
methods: {
//切换状态
toggle: function() {
this.toggleStatus = !this.toggleStatus;
}
}
});
是不是很简单，就是简单的控制展开与收起的状态，其他属性使用computed做响应式处理。
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 的响应式系统，它始终知道何时进行更新 (如果你用对了的话)。不过还是有一些边界情况，你想要强制更新，尽管表面上看响应式的数据没有发生改变。也有一些情况是你想阻止不必要的更新。'
}
});
</script>
这样，一个简单粗糙的MoreText组件就完成了。
Vue让前端开发变得简单高效！！！
本文代码在线修改与运行：
vue实现简单的MoreText组件
