thzxcx/vue3
1
0
Fork 0
Code Pull Requests Packages Releases Activity

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

Browse Source
This commit is contained in:
赵劲奉
2023-08-14 20:41:46 +08:00
parent 388ef8351d
commit f72e02c634
2 changed files with 28 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/mask-text/index.vue
View File

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

18
stories/MaskText.stories.ts
View File

@ -2,7 +2,7 @@
* @Author: zhaojinfeng 121016171@qq.com * @Author: zhaojinfeng 121016171@qq.com
* @Date: 2023-07-23 16:27:37 * @Date: 2023-07-23 16:27:37
* @LastEditors: zhaojinfeng 121016171@qq.com * @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 * @FilePath: \vue3\stories\MaskText.stories.ts
* @Description: * @Description:
* *
@ -18,10 +18,24 @@ const meta = {
text: '1234567890', text: '1234567890',
left: 2, left: 2,
right: 2, right: 2,
disabled: false,
}, },
} satisfies Meta<typeof ThMaskText> } satisfies Meta<typeof ThMaskText>
export default meta export default meta
type Story = StoryObj<typeof 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,
},
}