# 其他方法

字典之外其他相关的全局方法,使用这些方法

TIP

字典包会自动将方法挂在到Vue实例中,在页面上可以直接调用 this.$方法调用该方法

# 使用示例

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

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

<template>
  <div class="functions-dict">
    <div class="questions-box flex-c-b">
      <div class="question">沈小布脱敏下?</div>
      <div class="answer" v-if="answer1">{{answer1}}</div>
      <el-button type="primary" v-if="!answer1" @click="desensitization('沈小布', 'name', 'answer1')">点击获取结果</el-button>
    </div>
    <div class="questions-box flex-c-b">
      <div class="question">18830593872脱敏下?</div>
      <div class="answer" v-if="answer2">{{answer2}}</div>
      <el-button type="primary" v-if="!answer2" @click="desensitization('18830593872', 'mobile', 'answer2')">点击获取结果</el-button>
    </div>
    <div class="questions-box flex-c-b">
      <div class="question">350624199501051314脱敏下?</div>
      <div class="answer" v-if="answer3">{{answer3}}</div>
      <el-button type="primary" v-if="!answer3" @click="desensitization('350624199501051314', 'idCard', 'answer3')">点击获取结果</el-button>
    </div>
    <div class="questions-box flex-c-b">
      <div class="question">宁夏回族自治区金滩村涌泉街道脱敏下?</div>
      <div class="answer" v-if="answer4">{{answer4}}</div>
      <el-button type="primary" v-if="!answer4" @click="desensitization('宁夏回族自治区金滩村涌泉街道脱敏下', 'idCard', 'answer4')">点击获取结果</el-button>
    </div>
    <div class="questions-box flex-c-b">
      <div class="question">19950105日期格式化一下?</div>
      <div class="answer" v-if="answer5">{{answer5}}</div>
      <el-button type="primary" v-if="!answer5" @click="dayFormat('19950105', 'date', 'answer5')">点击获取结果</el-button>
    </div>
    <div class="questions-box flex-c-b">
      <div class="question">19950105141222日期时间格式化一下?</div>
      <div class="answer" v-if="answer6">{{answer6}}</div>
      <el-button type="primary" v-if="!answer6" @click="dayFormat('19950105141222', 'datetime', 'answer6')">点击获取结果</el-button>
    </div>
    <el-button type="primary" @click="reset">重置</el-button>

    <div class="flex-c-s flex-col">
      原生element的message消息提示如下,请连续点击按钮并查看效果
      <el-button type="primary" @click="message('Message')">原生element消息提示</el-button>
      字典包消息提示
      <el-button type="primary" @click="message('message')">字典包消息提示</el-button>
    </div>

  </div>
</template>

<script>
import {Message} from "element-ui"
import {dayFormat} from "~/index.js"
export default {
  name: "functions-other",
  data() {
    return {
      answer1: "",
      answer2: "",
      answer3: "",
      answer4: "",
      answer5: "",
      answer6: ""
    }
  },
  created() {
    this.$Message = Message
  },
  methods: {
    reset() {
      this.answer1 = this.answer2 = this.answer3 = this.answer4 = this.answer5 = this.answer6 = ""
    },
    //通过值获取中文值
    desensitization(val, type, answer) {
      this[answer] = this.$desensitization(val, type)
    },
    dayFormat(val, type, answer) {
      this[answer] = dayFormat(val, type)
    },
    message(type){
      this["$" + type].success("vue-element-dict真棒!")
    }
  }
}
</script>

<style scoped>
.questions-box{
  margin-bottom: 20px;
}
</style>
显示代码

# Functions 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 月份的日期与序号
上次更新: 6/29/2022, 3:01:11 PM