🐛[修复bug]解决tooltip组件第一次显示时,总是从左上角闪烁到对应位置的问题,删除visible属性(对外控制tooltip显示应使用isCanHide属性)

This commit is contained in:
须弥 2022-02-09 16:26:43 +08:00
parent 4325ca3bff
commit f9dcbd986f
3 changed files with 22 additions and 21 deletions

View File

@ -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` ||
::: :::

View File

@ -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 }
}; };
// //

View File

@ -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,