Vue中如何定义全局过滤器

我们在开发过程中，经常会用到过滤器，过滤器的用法类似Linux里面的管道操作符：“|”一样，帮助我们进行变量的转换，类似下面：

#例如：filterImageUrl将item.indexpic图片信息转换为200x200大小的URL字符串
<img
    :src="item.indexpic | filterImageUrl(200, 200)"
/>

这样用虽然没什么问题，我们只要在每个页面里面定义好过滤器就行，但是如果类似这种图片转换的过滤器经常用到，每一次使用都要在页面中定义filters，这样就比较麻烦了，可不可以将一些常用的过滤器定义成全局的，页面里面直接使用，不再单独定义呢？下面就给大家简单介绍一下如何定义全局的过滤器。我们来定义一个时间格式化的全局过滤器举个栗子。

一、在src根目录中创建filters目录，并在里面创建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目录里面创建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>