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）使用