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: 敏感数据隐藏组件 * --> @@ -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 +} 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 + export default meta type Story = StoryObj -export const Base: Story = {} +export const Base: Story = { + name: '基本使用', +} + +export const Disabled: Story = { + name: '禁用点击事件', + args: { + text: '不可见不可见不可见不可见', + left: 3, + right: 3, + disabled: true, + }, +}