vue之全局过滤器和过滤器自动注册

[zhaobinglong]

自定义过滤器filter

在src根目录下新建filters文件夹，新建index.js编辑项目所有的过滤

import Vue from 'vue'

//格式化时间
Vue.filter('filterTime', v => {
  var time = new Date(parseInt(v) * 1000);
  var y = time.getFullYear();
  var m = time.getMonth()+1 < 10 ? '0' + (time.getMonth()+1) : time.getMonth()+1 
  var d = time.getDate() < 10 ? '0' + time.getDate() : time.getDate()
  var h = time.getHours() < 10 ? '0' + time.getHours() : time.getHours()
  var mm = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes()
  var s = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds()
  return y+'-'+m+'-'+d+' '+h+':'+mm+':'+s;
})

[zhaobinglong]

demo1

// 在src下的filter中新建index.js

const configurationFilter = function (val) {
  let json = JSON.parse(val);
  return `数值范围：${json.min}-${json.max}, 步长：${json.step}, 单位：${json.unit}`;
};

export default {
  firmwareFormatDate,
  configurationFilter
};

// 在main.js中导入和自动注册

import filters from "@/utils/index.js";

/* 循环注册过滤器 */
Object.keys(filters).forEach((key) => {
  Vue.filter(key, filters[key]);
});

[zhaobinglong]

最佳实践

// 首先在filter文件夹中定义过滤器函数
export function filterGender(gender) {
  const genderMap = ['女', '男', '', '未知']
  return genderMap[gender]
}

// 导入过滤器 register global utility filters
import * as filters from './filter'
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]));