其他过滤器

字典外其他过滤器，包含数据脱敏，日期格式化

desensitization 第一个参数接收脱敏类型或者表示展示前面几项，第二个参数接收默认值，第三个参数接收展示后面几项，第四个参数用来配置中间展示几个*

dayFormat 第一个参数接收格式化类型，可选date、month、datetime、time、year，或者自定义格式，第二个参数接收默认值

<template>
  <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">{{ personUserInfo1.name | desensitization("name")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">身份证号：</div>
        <div class="value flex-grow">{{ personUserInfo1.idCard | desensitization("idCard")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">电话：</div>
        <div class="value flex-grow">{{ personUserInfo1.phone | desensitization("mobile")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">出生日期：</div>
        <div class="value flex-grow">{{ personUserInfo1.birthday | dayFormat("date")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">家庭地址：</div>
        <div class="value flex-grow">{{ personUserInfo1.address | desensitization("address")}}</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("name", "--")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">身份证号：</div>
        <div class="value flex-grow">{{ personUserInfo2.idCard | desensitization("idCard", "--")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">电话：</div>
        <div class="value flex-grow">{{ personUserInfo2.phone | desensitization("mobile", "--")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">出生日期：</div>
        <div class="value flex-grow">{{ personUserInfo2.birthday | dayFormat("date", "--")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">家庭地址：</div>
        <div class="value flex-grow">{{ personUserInfo2.address | desensitization("address", "--")}}</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 | dayFormat("date")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">month：</div>
        <div class="value flex-grow">{{ personUserInfo3.day | dayFormat("month")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">datetime：</div>
        <div class="value flex-grow">{{ personUserInfo3.day | dayFormat("datetime")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">time：</div>
        <div class="value flex-grow">{{ personUserInfo3.day | dayFormat("time")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field flex-shrink">year：</div>
        <div class="value flex-grow">{{ personUserInfo3.day | dayFormat("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 | dayFormat("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(1,"--", 1)}}</div>
        </div>
        <div class="row flex-c-s">
          <div class="field flex-shrink">前三后四：</div>
          <div class="value flex-grow">{{ personUserInfo4.phone | desensitization(3, "--", 4)}}</div>
        </div>
        <div class="row all flex-c-s">
          <div class="field flex-shrink">前三后四（中间6个*）：</div>
          <div class="value flex-grow">{{ personUserInfo4.address | desensitization(3, "--", 4, 6)}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "filters-other",
  data() {
    return {
      personUserInfo1: {
        name: "沈小布",
        phone: "123456789001",
        birthday: "19950105",
        address: "宁夏回族自治区闽宁镇金滩村涌泉社区520号",
        idCard: "350624199501051314"
      },
      personUserInfo2: {},
      personUserInfo3: {
        day: "19950105131405"
      },
      personUserInfo4: {
        name: "沈小布",
        phone: "123456789001",
        birthday: "19950105",
        address: "宁夏回族自治区闽宁镇金滩村涌泉社区520号"
      }
    }
  },
  created() {
    setTimeout(() => {
      this.personUserInfo2 = {
        name: "沈小布",
        phone: "123456789001",
        birthday: "",
        address: "宁夏回族自治区闽宁镇金滩村涌泉社区520号",
        idCard: "350624199501051314"
      }
    }, 2000)
  }
}
</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>

显示代码

Filters Other Api

 
/**
 * @description: 将数据脱敏
 * @param {*} val 脱敏数据值
 * @param {*} type 脱敏类型  可选 name, mobile, address, idCard 数字类型时表示 展示前面几位数
 * @param {*} defaultVal 默认值
 * @param {*} desensitizationEnd 展示后面几位
 * @param {*} desensitizationPlaceholder 展示中间几位
 * @return {*} 返回脱敏后的数据
 * @author: syx
 */
const desensitization = (val, type, defaultVal, desensitizationEnd, desensitizationPlaceholder)

  /**
   * @description: dayFormat 通过时间日期值展示正确想要的格式
   * @param {*} val 日期值
   * @param {*} type 格式化类型 可选date、month、datetime、time、year。或者自定义格式
   * @param {*} defaultVal 默认值  默认 ""
   * @return {*} date  返回时间格式  如果没有或者日期错误  则展示默认值
   * @author: syx
   */  
const dayFormat = (val, type, defaultVal = "")

日期格式

使用dateFormat指定日期数据返回的格式

WARNING

请注意大小写

标识	示例	描述
YY	18	年，两位数
YYYY	2018	年，四位数
M	1-12	月，从1开始
MM	01-12	月，两位数字
MMM	Jan-Dec	月，英文缩写
D	1-31	日
DD	01-31	日，两位数
H	0-23	24小时
HH	00-23	24小时，两位数
h	1-12	12小时
hh	01-12	12小时，两位数
m	0-59	分钟
mm	00-59	分钟，两位数
s	0-59	秒
ss	00-59	秒，两位数
S	0-9	毫秒（百），一位数
SS	00-99	毫秒（十），两位数
SSS	000-999	毫秒，三位数
Z	-05:00	UTC偏移
ZZ	-0500	UTC偏移，两位数
A	AM / PM	上/下午，大写
a	am / pm	上/下午，小写
Do	1st... 31st	月份的日期与序号