vue中过滤器filter的全局封装和使用
1.在vue项目的 src/ 文件夹下新建一个文件夹为 plugins,然后在 plugins/ 下新建 filter.js 文件,写入如下代码// 封装过滤器// 根据身份证号码判断男女let sexIdcardFilter = value => {if (!value) {return ''} else {let data = value.su...
·
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>
4.效果~~~~
更多推荐
已为社区贡献11条内容
所有评论(0)