Vue+Element 表单/列表脱敏

小编项目用的Vue+Element，项目涉及到表单填报姓名、身份证号码、证件号码、手机号、邮箱登的时候，失去焦点脱敏显示，获取焦点明文显示，列表直接脱敏显示。上自己总结干货：

1.创建js脱敏文件 （dataDesensi.js）

function tmName(val) {
    //*姓名脱敏
    val = val.replace(/^\s+|\s+$/g, "");
    if (val && val.length == 2) {
        return val.replace(/^(.{1}).*(.{1})$/, "$1*");
    } else if (val && val.length > 2) {
        return val.replace(/^(.{1}).*(.{1})$/, "$1*$2");
    } else {
        return val;
    }
}
function tmNames(val) {
    //*姓名多个脱敏
    const names = [];
    val.split(",").forEach((item) => {
        item = item.replace(/^\s+|\s+$/g, "");
        if (item && item.length == 2) {
            names.push(item.replace(/^(.{1}).*(.{1})$/, "$1*"));
        } else if (item && item.length > 2) {
            names.push(item.replace(/^(.{1}).*(.{1})$/, "$1*$2"));
        } else {
            names.push(item);
        }
    });
    return names.join("、");
}
function tmPhone(val) {
    //*电话脱敏
    return val.replace(/^(.{3}).*(.{4})$/, "$1**$2");
}
function tmIdCard(val) {
    //*身份证号脱敏
    return val.replace(/^(.{3}).*(.{4})$/, "$1****$2");
}
function tmPinyin(val) {
    //*拼音脱敏
    return val.replace(/^(.{2}).*(.{2})$/, "$1****$2");
}
function tmCard(val) {
    //*证件号脱敏
    return val.replace(/^(.{2}).*(.{2})$/, "$1****$2");
}
function tmEmail(val) {
    //*邮箱脱敏
    return val.replace(/^(.{3}).*(.{5})$/, "$1****$2");
}
function tmZipCode(val) {
    //*邮编--传真脱敏
    return val.replace(/^(.{2}).*(.{2})$/, "$1**$2");
}

export default {
    tmName,
    tmNames,
    tmIdCard,
    tmPinyin,
    tmCard,
    tmEmail,
    tmZipCode,
    tmPhone,
};

2main.js注入

import regular from "./libs/dataDesensi";
Vue.prototype.regular = regular;

3表单使用

<el-form-item label="团长姓名" prop="captain">
    <el-input
        v-if="!captainDesenShow"
        v-model="ruleForm.captain"
        placeholder="团长姓名"
        :maxlength="100"
        @focus="captainDesenShow = false"
        @blur="captainBlur(ruleForm.captain)"
    ></el-input>
    <el-input
        v-else
        v-model="captainDesen"
        placeholder="团长姓名"
        @focus="captainDesenShow = false"
        @blur="captainDesenShow = true"
    ></el-input>
</el-form-item>

export default {
  data() {
      return{
          ruleForm:{
               captain:''''
          },
          captainDesenShow: true,
          captainDesen: "",
        }
    },
    methods: {
          captainBlur(captain) {
            //*脱敏
            this.captainDesen = captain ? this.regular.tmName(captain) : "";//脱敏
            this.captainDesenShow = true;
        },
  }

4列表脱敏

    <el-table :data="tableData" >
             <el-table-column label="出访人员" align="center" prop="flowNumber">
                <template slot-scope="scope">
                    <el-tooltip
                        class="item"
                        effect="dark"
                        :content="regular.tmNames(scope.row.crewNameView)"
                        placement="top"
                        >
                        <span>{{ regular.tmName(scope.row.captain) }}</span>
                    </el-tooltip>
                </template>
            </el-table-column>
    </el-table>