vue2注册全局过滤器filters

全局过滤器

**在filters节点下定义的过滤器，称为私有过滤器**，因为它只能在当前vm实例所使用，**如果希望在多个vue实例之间共享过滤器**，可使用下面方法定义全局过滤器：

Vue.filter( )方法接受两个参数：

1. 第一个参数：是全局变量的名字
2. 第二个参数：是全局过滤器处理函数

 

 Vue.filter('gai',(val)=>{
        console.log(val);
        return 'abc'
    })

项目中使用

在src下新建filters.js文件写入所有的filters方法，例如：

const vfilter = {

  // 金额小数点保留
  // 小数点小于2位不处理，大于两位只保留两位
  // digit不传默认为2
  formatMoney: function (money, digit) {
    if (!money && money !== 0) return "--";
    let y = String(money).indexOf(".") + 1,//获取小数点的位置
      count = String(money).length - y;//获取小数点后的个数
    if (money) {
      if (money <= 0) {
        if (y > 0) {
          if (count > 2) {
            return digit ? Number(money).toFixed(digit) : Number(parseInt(money * 100) / 100).toFixed(2);
          } else {
            return Number(money);
          }
        } else {
          return Number(money);
        }
      } else {
        if (y > 0) {
          if (count > 2) {
            return digit ? Number(money).toFixed(digit) : Number(parseInt(money * 100) / 100).toFixed(2);
          } else {
            return Number(money);
          }
        } else {
          return Number(money);
        }
      }
    } else {
      return 0;
    }
  },

  // 时间戳转换为标准时间的过滤函数
  formatDate: function (value, r) {
    if (!value) return "--";
    let date = new Date(value);
    let y = date.getFullYear();
    let MM = date.getMonth() + 1;
    MM = MM < 10 ? ('0' + MM) : MM;
    let d = date.getDate();
    d = d < 10 ? ('0' + d) : d;
    let h = date.getHours();
    h = h < 10 ? ('0' + h) : h;
    let m = date.getMinutes();
    m = m < 10 ? ('0' + m) : m;
    let s = date.getSeconds();
    s = s < 10 ? ('0' + s) : s;
    return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
  },

  // 时间戳转换为标准时间的过滤函数
  filterDate: function (value, r) {
    if (!value) return "";
    let date = new Date(value);
    let y = date.getFullYear();
    let MM = date.getMonth() + 1;
    MM = MM < 10 ? ('0' + MM) : MM;
    let d = date.getDate();
    d = d < 10 ? ('0' + d) : d;
    let h = date.getHours();
    h = h < 10 ? ('0' + h) : h;
    let m = date.getMinutes();
    m = m < 10 ? ('0' + m) : m;
    let s = date.getSeconds();
    s = s < 10 ? ('0' + s) : s;
    return y + '-' + MM + '-' + d;
  },

  //身份证脱敏
  idCardDesen: function (card) {
    const reg = /^(.{6})(?:\d+)(.{4})$/; // 匹配身份证号前6位和后4位的正则表达式
    const maskedIdCard = card.replace(reg, '$1******$2'); //
    return maskedIdCard;
  }

}
export default vfilter;

在main.js引入全局注册

import filters from './src/filters'

//注册过滤器
for( let key in filters) {
  Vue.filter(key,filters[key])
}

在页面中即可直接使用

 <el-table-column prop="idcardnumber" align="center" label="身份证号" show-overflow-tooltip>
     <template slot-scope="scope">
        {{ scope.row.idcardnumber | idCardDesen }}
     </template>
 </el-table-column>