feat: disabled属性，禁用点击事件

packages/mask-text/index.vue

@@ -2,13 +2,13 @@
  * @Author: zhaojinfeng 121016171@qq.com
  * @Date: 2023-07-23 16:27:37
  * @LastEditors: zhaojinfeng 121016171@qq.com
- * @LastEditTime: 2023-07-23 17:54:15
+ * @LastEditTime: 2023-08-14 20:40:41
  * @FilePath: \vue3\packages\mask-text\index.vue
  * @Description: 敏感数据隐藏组件
  *
 -->
 <template>
-  <span :class="{ 'cursor-help': value }" @click="toggle(false)">
+  <span :class="{ 'cursor-help': hideden && !disabled }" @click="click">
     {{ data }}
   </span>
 </template>
@@ -21,9 +21,11 @@ const props = withDefaults(defineProps<{
   left?: number
   /** 右侧可见的位数 */
   right?: number
-}>(), { left: 0, right: 0 })
+  /** 禁用点击事件 */
+  disabled?: boolean
+}>(), { left: 0, right: 0, disabled: false })
 
-const [value, toggle] = useToggle(true)
+const hideden = ref(true)
 
 const data = computed(() => {
   if (!props.text)
@@ -32,7 +34,7 @@ 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
+  if (!hideden.value
     || left > textLength
     || right > textLength
     || right + left > textLength
@@ -46,4 +48,9 @@ const data = computed(() => {
 
   return leftText + centerText + rightText
 })
+
+function click() {
+  if (!props.disabled)
+    hideden.value = true
+}
 </script>