vue项目中优雅的导入全局过滤器

vue项目中优雅的导入全局过滤器

在项目src目录下创建一个filters目录，用来放全局的过滤器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MYjHWD9z-1639378809904)(http://ptf.chao-yu.cn/blog/2021/09/28/8f4663edbd7e10458892de709e16abb7-cc3587.png)]

在filters目录下创建index.js文件

例如，创建两个测试过滤器

/**
 * 测试filter
 * @param {*} num
 * @returns
 */
export const testFilter = (num) => {
  return `test${num}`
}

/**
 * 测试filter2
 * @param {*} num
 * @returns
 */
export const testFilter2 = (num) => {
  return `test${num}`
}

在main.js导入所有的过滤器

import * as filters from '@/filters'

Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})