feat: 敏感数据隐藏组件

packages/mask-text/index.vue

@@ -0,0 +1,47 @@
+<!--
+ * @Author: zhaojinfeng 121016171@qq.com
+ * @Date: 2023-07-23 16:27:37
+ * @LastEditors: zhaojinfeng 121016171@qq.com
+ * @LastEditTime: 2023-07-23 17:03:29
+ * @FilePath: \vue3\packages\mask-text\index.vue
+ * @Description: 敏感数据隐藏组件
+ *
+-->
+<template>
+  <span :class="{ 'cursor-help': value }" @click="toggle(true)">
+    {{ 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(false)
+
+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 (!props.text
+    || left > textLength
+    || right > textLength
+    || right + left > textLength
+    || value.value
+  )
+    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>