diff --git a/example/docs/zh-CN/components/tooltip.md b/example/docs/zh-CN/components/tooltip.md index cd7b9775..4a4870ee 100644 --- a/example/docs/zh-CN/components/tooltip.md +++ b/example/docs/zh-CN/components/tooltip.md @@ -124,7 +124,6 @@ | position | 显示位置 | `top`(默认值)、`bottom`、`left`、`right` | | isDark | 是否为黑色主题 | `true`(默认值)、`false`(浅色) | | disabled | 是否禁用 | `false`(默认值)、`true`(禁用) || -| visible | 控制是否显示 | `true`(默认值)、`false` || | isCanHide | 控制是否可以隐藏,可参考`lay-slider`组件 | `true`(默认值)、`false` || ::: diff --git a/src/component/popper/index.vue b/src/component/popper/index.vue index 298f2d43..2c826700 100644 --- a/src/component/popper/index.vue +++ b/src/component/popper/index.vue @@ -34,7 +34,6 @@ export interface LayPopperProps { enterable?: boolean; isDark?: boolean; disabled?: boolean; - visible?: boolean; isCanHide?: boolean; } @@ -44,13 +43,11 @@ const props = withDefaults(defineProps(), isDark: true, disabled: false, enterable: true, - visible: true, isCanHide: true, trigger: "hover", } ); -const emit = defineEmits(["update:visible"]); const EVENT_MAP: any = { hover: ["mouseenter", null, "mouseleave", false], @@ -66,19 +63,24 @@ const style = ref({ top: -window.innerHeight + "px", left: 0 }); const checkTarget = ref(false); const popper = ref({} as HTMLDivElement); const innnerPosition = ref(props.position); -const innerVisible = ref(props.visible ?? true); -const isExist = ref(false); +const innerVisible = ref(!props.isCanHide); +const isExist = ref(!props.isCanHide); + +watch(() => props.isCanHide, (val) => { + innerVisible.value = !val; +}); watch(innerVisible, (val) => { invokeShowPosistion(); - emit("update:visible", val); }); + watch(popper, (val) => { if (props.trigger === 'hover' && props.enterable) { on(popper.value, EVENT_MAP['hover'][0], doShow); on(popper.value, EVENT_MAP['hover'][2], doHidden); } }); + watch( () => props.content, (val) => { @@ -88,23 +90,27 @@ watch( const doShow = function () { if (!props.disabled) { - innerVisible.value = true; - isExist.value = true; + if (!isExist.value) { + isExist.value = true; + setTimeout(()=>innerVisible.value = true, 0); + } else { + innerVisible.value = true; + } } }; const doHidden = function (e: MouseEvent) { - // ||(props.enterable && popper.value.contains(e.target as Node)) - if ( - (checkTarget.value && props.el.contains(e.target)) - ) + if (checkTarget.value && props.el.contains(e.target)) { return; - // style.value = {top: (-window.innerHeight) + 'px',left:0}; - // popper.value.remove(); - if (props.isCanHide !== false) { - innerVisible.value = false; } + + // isCanHide参数由外控制 + if (props.isCanHide === false) { + return; + } + innerVisible.value = false; innnerPosition.value = props.position; + style.value = { top: -window.innerHeight + "px", left: 0 } }; // 计算位置显示 diff --git a/src/component/tooltip/index.vue b/src/component/tooltip/index.vue index aa523bce..4ed2af14 100644 --- a/src/component/tooltip/index.vue +++ b/src/component/tooltip/index.vue @@ -28,10 +28,6 @@ export default defineComponent({ type: Boolean, default: false, }, - visible: { - type: Boolean, - default: false, - }, isCanHide: { type: Boolean, default: true,