vue3+element-plus
注：起点数要小于终点数，并且起点数的最大值等于终点数；终点数最小值是起点数。
<el-form ref="ruleForm" :model="formObj" label-width="100px">
<el-form-item label="样例数据" prop="description">
<el-input type="textarea" :row="4" @input="overView" maxlength="50" show-word-limit v-model="formObj.description" />
</el-form-item>
<el-form-item label="脱敏效果" prop="ruleType" required>
<el-radio-group v-model="formObj.ruleType" @change="onRuleTypeChange">
<el-radio :label="1">全部脱敏</el-radio>
<el-radio :label="2">部分脱敏</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="formObj.ruleType === 2">
<div class="flex">
<div style="width: 60px;">默认第</div>
<el-input-number v-model="formObj.inStart" @change="overView" class="ml-10 mr-10 width-150" :min="1" :max="formObj.inEnd" />
<div style="width: 80px;text-align:center;">位至第</div>
<el-input-number v-model="formObj.inEnd" @change="overView" class="ml-10 mr-10 width-150" :min="formObj.inStart" :max="10000" />
<div style="width: 90px;text-align:center;">位替换为</div>
<el-input class="width-50" disabled v-model="formObj.changeString" />
</div>
</el-form-item>
<el-form-item label="效果预览" prop="result">
<el-input type="textarea" disabled :row="2" v-model="formObjResult"></el-input>
</el-form-item>
</el-form>
export default defineComponent({
setup(props, { emit }) {
//初始表单数据
let formObj = reactive({
description:"",
ruleType: 1, //全部脱敏1；部分脱敏2
changeString: '*',
inEnd: 1,
inStart: 1,
})
//预览结果
const formObjResult = ref('')
//脱敏效果改变
const onRuleTypeChange=() =>{
formObj.inEnd = 1;
formObj.inStart = 1;
overView();
}
//预览
const overView = () => {
let result = '';
if (formObj.ruleType === 1) {
result = formObj.description.split('').map(() => formObj.changeString).join('')
} else {
result = formObj.description.split('').map((x, index) => {
let xTemp = ''
if (formObj.inStart <= index + 1 && index + 1 <= formObj.inEnd) {
xTemp = formObj.changeString
} else {
xTemp = x
}
return xTemp
}).join('')
}
formObjResult.value = result
}
return{
formObj,
overView,
onRuleTypeChange
}
}
})
