fix: 鼠标手势显示

This commit is contained in:
2023-07-23 17:29:40 +08:00
parent 2b73f90a7f
commit e204b1bd42

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:03:29 * @LastEditTime: 2023-07-23 17:28:40
* @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(true)"> <span :class="{ 'cursor-help': value }" @click="toggle(false)">
{{ data }} {{ data }}
</span> </span>
</template> </template>
@ -23,17 +23,18 @@ const props = withDefaults(defineProps<{
right?: number right?: number
}>(), { left: 0, right: 0 }) }>(), { left: 0, right: 0 })
const [value, toggle] = useToggle(false) const [value, toggle] = useToggle(true)
const data = computed(() => { 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 (!props.text if (
!value.value
|| !props.text
|| left > textLength || left > textLength
|| right > textLength || right > textLength
|| right + left > textLength || right + left > textLength
|| value.value
) )
return props.text return props.text
const rightIndex = textLength - right const rightIndex = textLength - right