From f72e02c6344416c9a45f7770d8f3675417c072b0 Mon Sep 17 00:00:00 2001
From: zhaojinfeng <121016171@qq.com>
Date: Mon, 14 Aug 2023 20:41:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20disabled=E5=B1=9E=E6=80=A7=EF=BC=8C?=
 =?UTF-8?q?=E7=A6=81=E7=94=A8=E7=82=B9=E5=87=BB=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/mask-text/index.vue | 17 ++++++++++++-----
 stories/MaskText.stories.ts  | 18 ++++++++++++++++--
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/packages/mask-text/index.vue b/packages/mask-text/index.vue
index 8807700..6335f30 100644
--- a/packages/mask-text/index.vue
+++ b/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>
diff --git a/stories/MaskText.stories.ts b/stories/MaskText.stories.ts
index 6413d3d..6a60f79 100644
--- a/stories/MaskText.stories.ts
+++ b/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,
+  },
+}