其他过滤器

快速完成移动端基于vant组件的下拉选项，可从字典出获取，也可配置data属性，自定义选项。非必选时，选项会自动注入请选择选项，必选时，不会。接收van-field与van-picker的属性及方法配置，部分组件已配置好，无需重复配置。

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

日期格式化用 dayFormat

<template>
  <div class="dict-normal">
    <div class="info-box flex-c-s flex-wrap">
      <div class="row flex-c-s">
        <div class="field">姓名：</div>
        <div class="value">{{ personUserInfo.name | desensitization("name")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field">身份证号：</div>
        <div class="value">{{ personUserInfo.idCard | desensitization("idCard")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field">电话：</div>
        <div class="value">{{ personUserInfo.phone | desensitization("mobile")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field">出生日期：</div>
        <div class="value">{{ personUserInfo.birthday | dayFormat("date")}}</div>
      </div>
      <div class="row flex-c-s">
        <div class="field">家庭地址：</div>
        <div class="value">{{ personUserInfo.address | desensitization("address")}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "van-filters-other-demo",
  data() {
    return {
      personUserInfo: {
        name: "沈小布",
        phone: "123456789001",
        birthday: "19950105",
        address: "宁夏回族自治区闽宁镇金滩村涌泉社区520号",
        idCard: "350624199501051314"
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .info-box {
    padding: 0 20px;
    .row {
      width: 100%;
      margin-top: 32px;
      align-items: flex-start;
      .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	月份的日期与序号