vue项目中建立全局filter过滤器

描述：在项目开发中常常会遇到页面展现的数据不是原数据，须要加工后显示的状况下。而当这种需求在项目中频繁出现的时候，全局filter就显的特别须要了。

下面给出具体操做！！！

项目需求：只显示固定几个字，多余的...

解决办法：

一、在当前页面添加一个filter

（1）建立filter

created() {},
  filters: {
    maxLength: function(text, num) {
      if (text) {
        if (text.split("").length > num) {
          return text.substr(0, num) + "...";
        } else {
          return text;
        }
      }
    }
  }

（2）使用

<span class="text" :title="data.label">{{ data.label|maxLength(5) }}</span>

注：这种方法能够解决问题，可是当多个页面都出现这种需求时，每一个页面都须要写filter，显得比较繁琐。因此最好写成全局的。

二、建立全局filter

    (1)在src目录下新建filters目录，filters目录里新建index.js文件

    (2)index.js文件内容以下：

exports.maxLength = (value, num) => {
    if (value) {
        if (value.split("").length > num) {
            return value.substr(0, num) + "...";
        } else {
            return value;
        }
    }
};

    (3)在main.js里注册filter

import filters from './filters';
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]));

（4）使用