我們在開發(fā)過程中，經(jīng)常會用到過濾器示惊，過濾器的用法類似Linux里面的管道操作符：“|”一樣，幫助我們進行變量的轉(zhuǎn)換愉镰，類似下面：
#例如：filterImageUrl將item.indexpic圖片信息轉(zhuǎn)換為200x200大小的URL字符串
<img
:src="item.indexpic | filterImageUrl(200, 200)"
/>
這樣用雖然沒什么問題米罚，我們只要在每個頁面里面定義好過濾器就行，但是如果類似這種圖片轉(zhuǎn)換的過濾器經(jīng)常用到丈探，每一次使用都要在頁面中定義filters录择，這樣就比較麻煩了，可不可以將一些常用的過濾器定義成全局的碗降，頁面里面直接使用隘竭，不再單獨定義呢？下面就給大家簡單介紹一下如何定義全局的過濾器遗锣。我們來定義一個時間格式化的全局過濾器舉個栗子货裹。
一、在src根目錄中創(chuàng)建filters目錄精偿，并在里面創(chuàng)建index.js文件
//導入moment時間插件工具
import moment from "moment";
/**
* 時間格式化過濾器
* @param {10位時間戳} timestamp
* @param {格式} format
* @returns {格式化之后的時間字符串}
*/
const dateFormat = (timestamp, format = "YYYY-MM-DD HH:mm:ss") => {
return moment(timestamp * 1000).format(format);
};
//導出過濾器方法
export default { dateFormat };
二弧圆、在filters目錄里面創(chuàng)建filter.js文件
import Vue from "vue";
//導入需要全局暴露的過濾器
import filters from "./index";
//全局注冊過濾器
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key]);
});
三赋兵、在main.js中引入filter.js
//注冊全局的過濾器
import "./filters/filter";
四、模板中使用
#將時間戳格式化
<span>活動時間：{{item.start_time | dateFormat("YYYY-MM-DD HH:mm")}}</span>
