# 其他过滤器
脱敏，日期格式化
desensitization 不脱敏可以传递 none
<template>
<div ref="container">
<div class="title" @click="isTuoMin = !isTuoMin">基础用法(点击可切换是否对姓名手机号身份证脱敏)</div>
<div class="info-box flex-c-s flex-wrap">
<div class="row flex-c-s">
<div class="field flex-shrink">姓名：</div>
<div class="value flex-grow">{{ personUserInfo1.name | desensitization(isTuoMin ? "name" : "none")}}</div>
</div>
<div class="row flex-c-s">
<div class="field flex-shrink">身份证号：</div>
<div class="value flex-grow">{{ personUserInfo1.idCard | desensitization(isTuoMin ? "idCard" : "none")}}</div>
</div>
<div class="row flex-c-s">
<div class="field flex-shrink">电话：</div>
<div class="value flex-grow">{{ personUserInfo1.phone | desensitization(isTuoMin ? "mobile" : "none")}}</div>
</div>
<div class="row flex-c-s">
<div class="field flex-shrink">出生日期：</div>
<div class="value flex-grow">{{ personUserInfo1.birthday | formatDate("date")}}</div>
</div>
<div class="row flex-c-s">
<div class="field flex-shrink">家庭地址：</div>
<div class="value flex-grow">{{ personUserInfo1.address | desensitization(isTuoMin ? "address" : "none")}}</div>
</div>
</div>
<div class="title">配置默认值</div>
<div class="info-box flex-c-s flex-wrap">
<div class="row flex-c-s">
<div class="field flex-shrink">姓名：</div>
<div class="value flex-grow">{{ personUserInfo2.name | desensitization({maskType: "name", defaultVal: "--"})}}</div>
</div>
<div class="row flex-c-s">
<div class="field flex-shrink">身份证号：</div>
<div class="value flex-grow">{{ personUserInfo2.idCard | desensitization({maskType: "idCard", defaultVal: "--"})}}</div>
</div>
<div class="row flex-c-s">
<div class="field flex-shrink">电话：</div>
<div class="value flex-grow">{{ personUserInfo2.phone | desensitization({maskType: "mobile", defaultVal: "--"})}}</div>
</div>
<div class="row flex-c-s">
<div class="field flex-shrink">出生日期：</div>
<div class="value flex-grow">{{ personUserInfo2.birthday | formatDate("date", "--")}}</div>
</div>
<div class="row flex-c-s">
<div class="field flex-shrink">家庭地址：</div>
<div class="value flex-grow">{{ personUserInfo2.address | desensitization({maskType: "address", defaultVal: "--"})}}</div>
</div>
</div>
<div class="title">日期过滤器</div>
<div class="info-box flex-c-s flex-wrap">
<div class="row flex-c-s">
<div class="field flex-shrink">date：</div>
<div class="value flex-grow">{{ personUserInfo3.day | formatDate("date")}}</div>
</div>
<div class="row flex-c-s">
<div class="field flex-shrink">month：</div>
<div class="value flex-grow">{{ personUserInfo3.day | formatDate("month")}}</div>
</div>
<div class="row flex-c-s">
<div class="field flex-shrink">datetime：</div>
<div class="value flex-grow">{{ personUserInfo3.day | formatDate("datetime")}}</div>
</div>
<div class="row flex-c-s">
<div class="field flex-shrink">time：</div>
<div class="value flex-grow">{{ personUserInfo3.day | formatDate("time")}}</div>
</div>
<div class="row flex-c-s">
<div class="field flex-shrink">year：</div>
<div class="value flex-grow">{{ personUserInfo3.day | formatDate("year")}}</div>
</div>
<div class="row flex-c-s">
<div class="field flex-shrink">year/month/day：</div>
<div class="value flex-grow">{{ personUserInfo3.day | formatDate("yyyy/MM/dd")}}</div>
</div>
</div>
<div class="title">脱敏过滤器</div>
<div class="dict-normal">
<div class="info-box flex-c-s flex-wrap">
<div class="row flex-c-s">
<div class="field flex-shrink">前一后一：</div>
<div class="value flex-grow">{{ personUserInfo4.name | desensitization({start: 1, end: 1, defaultVal: "--"})}}</div>
</div>
<div class="row flex-c-s">
<div class="field flex-shrink">前三后四：</div>
<div class="value flex-grow">{{ personUserInfo4.phone | desensitization({start: 3, end: 4, defaultVal: "--"})}}</div>
</div>
<div class="row all flex-c-s">
<div class="field flex-shrink">前三后四（中间6个*）：</div>
<div class="value flex-grow">{{ personUserInfo4.address | desensitization({start: 3, end: 4, middle: 6, symbol: "#", defaultVal: "--"})}}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "filters-other",
data() {
return {
isTuoMin: true,
personUserInfo1: {
name: "沈小布",
phone: "123456789001",
birthday: "1995-01-05",
address: "宁夏回族自治区闽宁镇金滩村涌泉社区520号",
idCard: "350624199501051314"
},
personUserInfo2: {},
personUserInfo3: {
day: "2023-01-23"
},
personUserInfo4: {
name: "沈小布",
phone: "123456789001",
birthday: "1993-03-21",
address: "宁夏回族自治区闽宁镇金滩村涌泉社区520号"
}
}
},
created() {
setTimeout(() => {
this.personUserInfo2 = {
name: "沈小布",
phone: "123456789001",
birthday: "",
address: "宁夏回族自治区闽宁镇金滩村涌泉社区520号",
idCard: "350624199501051314"
}
}, 2000)
},
mounted() {}
</script>
<style lang="less" scoped>
.flex-wrap {
flex-wrap: wrap;
}
.flex-c-s {
display: flex;
justify-content: flex-start;
align-items: center;
}
.info-box {
padding: 0 20px;
.row {
width: 50%;
margin-top: 32px;
.field {
width: 144px;
font-size: 16px;
color: #666666;
line-height: 18px;
}
.value {
font-size: 16px;
color: #333333;
line-height: 18px;
}
}
}
</style>
显示代码
# Other Filters Api
/**
* @description: 将某个日期格式化
* @param date 日期 可以是字符串 数字 date()
* @param format 默认datetime 可选 date month time year 也可自定义格式，具体配置继续阅读
* @return 根据format返回的日期格式
* @author: syx
*/
formatDate(date, format, defaultVal)
/**
* @description: 脱敏字符串
* @param str 要脱敏的数据
* @param options { 配置
* start: 1, 展示前面几位数 默认1
* end: 0, 展示后面几位数 默认0
* symbol: "*" 使用什么符号进行脱敏 默认 *
* middle 如果有配置，则表示 中间展示几个symbol
* defaultVal: "", 没值时返回的默认值
* maskType: "" 脱敏类型 mobile，name，address，idCard
* }
* @return {*}
* @author: syx
*/
desensitization(str, options)
