vue中过滤器filter的全局封装和使用

在后台项目中，有些过滤器多个地方调用，我们就可以把他封装起来，在需要的地方调用

1.在vue项目的 src/ 文件夹下新建一个文件夹为 plugins，然后在 plugins/ 下新建 filter.js 文件，写入如下代码

// 封装过滤器
 
// 根据身份证号码判断男女
let sexIdcardFilter = value => {
  if (!value) {
    return ''
  } else {
    let data = value.substr(16, 1) % 2 === 1 ? '男' : '女'
    return data
  }
}
 
// 身份证号脱敏('331082199708094687' 转换成 '33108219********87') 第8位开始替换8个
let IDcardHide = num => {
  let data = num.replace(/(\d{8})\d{8}(\d*)/, '$1********$2')
  return data
}
 
// 手机号脱敏('13912345678' 转换成 '139****5678') 第3位开始替换4个
let telHide = num => {
  let data = num.replace(/(\d{3})\d{4}(\d*)/, '$1****$2')
  return data
}
 
// 姓名脱敏(小明 转换成 *明   李小明 转换成 李*明   欧阳小明 转换成 欧**明)
let nameHide = name => {
  if (name.length === 2) {
    return new Array(name.length).join('*') + name.substr(-1)
  } else {
    return (
      name.substr(0, 1) + new Array(name.length - 1).join('*') + name.substr(-1)
    )
  }
}
 
export default {
  sexIdcardFilter,
  IDcardHide,
  telHide,
  nameHide
}

2.在vue项目的 main.js 文件，写入如下代码

import filter from './plugins/filter'
 
// 全局导入过滤器
Object.keys(filter).forEach(key => Vue.filter(key, filter[key]))

3、在组件中使用

<template>
  <div class="user">
    <h2>{{idCard}} {{ idCard | sexIdcardFilter}}</h2>
    <h2>{{name}} {{ name | nameHide}}</h2>
  </div>
</template>