为什么使用全局过滤器?有什么好处?什么场景下适用全局过滤器?

在项目中经常使用过滤器对数据进行格式化后显示在页面上,比如日期格式转化,数值转换成状态文字等过滤器,如果在每个.vue页面都复制同一个过滤器进行使用,虽然是没问题,但是如果过滤器方法中,需要追加新的情况判断或出现Bug时就要将每个.vue内的过滤器进行修改,既费时又费力,所以为了项目维护,可以优先考虑定义全局过滤器

方案1:

在 main.js 内直接定义过滤器

// 过滤器 1
Vue.filter("formatNumberFilter", function(value, retain) {
  if(!value){
    return null;
  }
  return value + '.' + retain;
});
// 过滤器 2
Vue.filter("aaa", function(value) {
  return '.....';
});
// 过滤器 3
Vue.filter("bbb", function(value) {
  return '.....';
});

PS:(拿过滤器1 进行举例)
formatNumberFilter:过滤器方法名
value:是准备过滤处理的数据
retain:过滤器方法括号内的第一个参数 => formatNumberFilter('00')

方案2:

新建一个用于放置过滤器方法的 js 文件

我这里是在 src 目录下,新建 filters 文件夹,文件夹内创建 index.js 文件 然后编写过滤器方法

/**
 * 注释:
 * 100 => 100.00
 * @param {string, number} value
 * @param {string} retain
 * @return {string}
 */
export function formatNumberFilter(value, retain) {
  if(!value){
    return null;
  }
  return value + '.' + retain;
}

/**
 * 注释:
 * @param {string} value
 * @return {string}
 */
export function aaa(value) {
  return '......';
}

然后再 main.js 内进行调用

import * as filters from './filters' // global filters
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key]) // 插入过滤器名和对应方法
})

PS:(通过循环,将过滤器文件内所有方法注入 main.js 内,这里循环的代码写法,像不像在 main.js 内直接定义过滤器  o_o )

使用:

方案1~2内的过滤器 都可以使用以下方式调用

// 方法1 使用双花括号调用
{{ yatinMonthly | formatNumberFilter('00') }}

// 方法2 使用v-bind调用
<div v-bind:data="yatinMonthly | formatNumberFilter('00')"></div>

PS:

上述代码中 yatinMonthly 将作为 formatNumberFilter 的第一个参数传入,'00' 是作为第二个参数传入的

Logo

前往低代码交流专区

更多推荐