Vue自定义组件 - MoreText更多文本

本文代码在线修改与运行：
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组件