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

本文代码在线修改与运行：
vue实现简单的MoreText组件

当某一段话太长，而显示区域又比较小的时候，我们需要在页面中省略文本，同时增加一个互动的 [更多] 按钮用于展开省略的文字，再点击 [收起] 则恢复省略模式。

基于Vue.js的自定义组件，我们可以很轻松快速地制作一个MoreText组件。

1. 定义组件

上面这段代码展示了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.使用
看看如何使用：

  
  {{text}}
  

这样，一个简单粗糙的MoreText组件就完成了。
Vue让前端开发变得简单高效！！！

本文代码在线修改与运行：
vue实现简单的MoreText组件