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>

stories/MaskText.stories.ts

@@ -2,7 +2,7 @@
  * @Author: zhaojinfeng 121016171@qq.com
  * @Date: 2023-07-23 16:27:37
  * @LastEditors: zhaojinfeng 121016171@qq.com
- * @LastEditTime: 2023-07-23 16:39:56
+ * @LastEditTime: 2023-08-14 20:41:25
  * @FilePath: \vue3\stories\MaskText.stories.ts
  * @Description:
  *
@@ -18,10 +18,24 @@ const meta = {
     text: '1234567890',
     left: 2,
     right: 2,
+    disabled: false,
   },
 } satisfies Meta<typeof ThMaskText>
+
 export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Base: Story = {}
+export const Base: Story = {
+  name: '基本使用',
+}
+
+export const Disabled: Story = {
+  name: '禁用点击事件',
+  args: {
+    text: '不可见不可见不可见不可见',
+    left: 3,
+    right: 3,
+    disabled: true,
+  },
+}