🐛[修复bug]解决tooltip组件第一次显示时,总是从左上角闪烁到对应位置的问题,删除visible属性(对外控制tooltip显示应使用isCanHide属性)
This commit is contained in:
parent
4325ca3bff
commit
f9dcbd986f
@ -124,7 +124,6 @@
|
|||||||
| position | 显示位置 | `top`(默认值)、`bottom`、`left`、`right` |
|
| position | 显示位置 | `top`(默认值)、`bottom`、`left`、`right` |
|
||||||
| isDark | 是否为黑色主题 | `true`(默认值)、`false`(浅色) |
|
| isDark | 是否为黑色主题 | `true`(默认值)、`false`(浅色) |
|
||||||
| disabled | 是否禁用 | `false`(默认值)、`true`(禁用) ||
|
| disabled | 是否禁用 | `false`(默认值)、`true`(禁用) ||
|
||||||
| visible | 控制是否显示 | `true`(默认值)、`false` ||
|
|
||||||
| isCanHide | 控制是否可以隐藏,可参考`lay-slider`组件 | `true`(默认值)、`false` ||
|
| isCanHide | 控制是否可以隐藏,可参考`lay-slider`组件 | `true`(默认值)、`false` ||
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
@ -34,7 +34,6 @@ export interface LayPopperProps {
|
|||||||
enterable?: boolean;
|
enterable?: boolean;
|
||||||
isDark?: boolean;
|
isDark?: boolean;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
visible?: boolean;
|
|
||||||
isCanHide?: boolean;
|
isCanHide?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -44,13 +43,11 @@ const props = withDefaults(defineProps<LayPopperProps>(),
|
|||||||
isDark: true,
|
isDark: true,
|
||||||
disabled: false,
|
disabled: false,
|
||||||
enterable: true,
|
enterable: true,
|
||||||
visible: true,
|
|
||||||
isCanHide: true,
|
isCanHide: true,
|
||||||
trigger: "hover",
|
trigger: "hover",
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
const emit = defineEmits(["update:visible"]);
|
|
||||||
|
|
||||||
const EVENT_MAP: any = {
|
const EVENT_MAP: any = {
|
||||||
hover: ["mouseenter", null, "mouseleave", false],
|
hover: ["mouseenter", null, "mouseleave", false],
|
||||||
@ -66,19 +63,24 @@ const style = ref<CSSProperties>({ top: -window.innerHeight + "px", left: 0 });
|
|||||||
const checkTarget = ref(false);
|
const checkTarget = ref(false);
|
||||||
const popper = ref<HTMLDivElement>({} as HTMLDivElement);
|
const popper = ref<HTMLDivElement>({} as HTMLDivElement);
|
||||||
const innnerPosition = ref(props.position);
|
const innnerPosition = ref(props.position);
|
||||||
const innerVisible = ref(props.visible ?? true);
|
const innerVisible = ref(!props.isCanHide);
|
||||||
const isExist = ref(false);
|
const isExist = ref(!props.isCanHide);
|
||||||
|
|
||||||
|
watch(() => props.isCanHide, (val) => {
|
||||||
|
innerVisible.value = !val;
|
||||||
|
});
|
||||||
|
|
||||||
watch(innerVisible, (val) => {
|
watch(innerVisible, (val) => {
|
||||||
invokeShowPosistion();
|
invokeShowPosistion();
|
||||||
emit("update:visible", val);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(popper, (val) => {
|
watch(popper, (val) => {
|
||||||
if (props.trigger === 'hover' && props.enterable) {
|
if (props.trigger === 'hover' && props.enterable) {
|
||||||
on(popper.value, EVENT_MAP['hover'][0], doShow);
|
on(popper.value, EVENT_MAP['hover'][0], doShow);
|
||||||
on(popper.value, EVENT_MAP['hover'][2], doHidden);
|
on(popper.value, EVENT_MAP['hover'][2], doHidden);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.content,
|
() => props.content,
|
||||||
(val) => {
|
(val) => {
|
||||||
@ -88,23 +90,27 @@ watch(
|
|||||||
|
|
||||||
const doShow = function () {
|
const doShow = function () {
|
||||||
if (!props.disabled) {
|
if (!props.disabled) {
|
||||||
innerVisible.value = true;
|
if (!isExist.value) {
|
||||||
isExist.value = true;
|
isExist.value = true;
|
||||||
|
setTimeout(()=>innerVisible.value = true, 0);
|
||||||
|
} else {
|
||||||
|
innerVisible.value = true;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const doHidden = function (e: MouseEvent) {
|
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;
|
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;
|
innnerPosition.value = props.position;
|
||||||
|
style.value = { top: -window.innerHeight + "px", left: 0 }
|
||||||
};
|
};
|
||||||
|
|
||||||
// 计算位置显示
|
// 计算位置显示
|
||||||
|
@ -28,10 +28,6 @@ export default defineComponent({
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
visible: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
isCanHide: {
|
isCanHide: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true,
|
default: true,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user