49 lines
1.2 KiB
Vue
49 lines
1.2 KiB
Vue
<!--
|
|
* @Author: zhaojinfeng 121016171@qq.com
|
|
* @Date: 2023-07-23 16:27:37
|
|
* @LastEditors: zhaojinfeng 121016171@qq.com
|
|
* @LastEditTime: 2023-07-23 17:28:40
|
|
* @FilePath: \vue3\packages\mask-text\index.vue
|
|
* @Description: 敏感数据隐藏组件
|
|
*
|
|
-->
|
|
<template>
|
|
<span :class="{ 'cursor-help': value }" @click="toggle(false)">
|
|
{{ data }}
|
|
</span>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="ThMaskText">
|
|
const props = withDefaults(defineProps<{
|
|
/** 带隐藏的文字 */
|
|
text?: string
|
|
/** 左侧可见的位数 */
|
|
left?: number
|
|
/** 右侧可见的位数 */
|
|
right?: number
|
|
}>(), { left: 0, right: 0 })
|
|
|
|
const [value, toggle] = useToggle(true)
|
|
|
|
const data = computed(() => {
|
|
const left = props.left < 0 ? 0 : props.left
|
|
const right = props.right < 0 ? 0 : props.right
|
|
const textLength = props.text.length
|
|
if (
|
|
!value.value
|
|
|| !props.text
|
|
|| left > textLength
|
|
|| right > textLength
|
|
|| right + left > textLength
|
|
)
|
|
return props.text
|
|
const rightIndex = textLength - right
|
|
const centerLength = textLength - right - left
|
|
const leftText = props.text.slice(0, left)
|
|
const centerText = '*'.repeat(centerLength)
|
|
const rightText = props.text.slice(rightIndex)
|
|
|
|
return leftText + centerText + rightText
|
|
})
|
|
</script>
|