vue 中全局filter過濾器的配置及使用

在項目中使用到的經常用到過濾器，比如時間，數據截取等過濾器，如果在每個.vue中都可以復制同一個過濾器，這可以達到目的，但是遇到方法有bug時就需要諸葛修改進入不同的頁面修改，這樣既費時又費力，優先可以考慮注冊全局的過濾器。

 定義方法如下：

新建filters/index.js

const isNullOrEmpty = function(val) {
    if (val == null || val == "" || typeof(val) == undefined) {
        return true;
    } else {
        return false;
    }
}

const timeFormat = (value, format) => {
    let date = new Date(value);
    let y = date.getFullYear();
    let m = date.getMonth() + 1;
    let d = date.getDate();
    let h = date.getHours();
    let min = date.getMinutes();
    let s = date.getSeconds();
    let result = "";
    if (format == undefined) {
        result = `${y}-${m < 10 ? "0" + m : m}-${d < 10 ? "0" + d : d} ${
        h < 10 ? "0" + h : h
      }:${min < 10 ? "0" + min : min}:${s < 10 ? "0" + s : s}`;
    }
    if (format == "yyyy-mm-dd") {
        result = `${y}-${m < 10 ? "0" + m : m}-${d < 10 ? "0" + d : d}`;
    }
    if (format == "yyyy-mm") {
        result = `${y}-${m < 10 ? "0" + m : m}`;
    }
    if (format == "mm-dd") {
        result = ` ${mm < 10 ? "0" + mm : mm}:${ddmin < 10 ? "0" + dd : dd}`;
    }
    if (format == "hh:mm") {
        result = ` ${h < 10 ? "0" + h : h}:${min < 10 ? "0" + min : min}`;
    }
    if (format == "yyyy") {
        result = `${y}`;
    }
    return result;
};


export {
    isNullOrEmpty,
    timeFormat
}

　在main.js中引入和注冊全局過濾器

import * as filters from '../filters/index'
Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
})

此時就可以在不同的.vue中使用定義的全局過濾器了

{{date|isNullOrEmpty}}是否為空<br/>
        {{date|timeFormat('yyyy-mm-dd')}} 時間過濾器<br>
        {{date|timeFormat('yyyy-mm')}} 時間過濾器yyyy-mm<br>
        {{date|timeFormat('hh:mm')}} 時間過濾器hh:mm<br>
        {{date|timeFormat('yyyy')}} 時間過濾器yyyy<br>
     {{date|timeFormat}} 時間過濾器yyyy<br>

效果如下：