🐛(component): [tolltip]:修复 content 自动定位
This commit is contained in:
parent
e1a41552c5
commit
5d5546d748
@ -36,8 +36,14 @@ import {
|
|||||||
computed,
|
computed,
|
||||||
toRef,
|
toRef,
|
||||||
StyleValue,
|
StyleValue,
|
||||||
|
Ref,
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import { onClickOutside, useEventListener, useThrottleFn } from "@vueuse/core";
|
import {
|
||||||
|
onClickOutside,
|
||||||
|
useEventListener,
|
||||||
|
useResizeObserver,
|
||||||
|
useThrottleFn,
|
||||||
|
} from "@vueuse/core";
|
||||||
|
|
||||||
export type PopperTrigger = "click" | "hover" | "focus" | "contextMenu";
|
export type PopperTrigger = "click" | "hover" | "focus" | "contextMenu";
|
||||||
|
|
||||||
@ -209,18 +215,35 @@ onClickOutside(
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
useResizeObserver(triggerRefEl, () => {
|
||||||
|
updatePosistion();
|
||||||
|
});
|
||||||
|
|
||||||
|
let popperObserver: { stop: any; isSupported?: Ref<boolean> } | undefined =
|
||||||
|
undefined;
|
||||||
|
|
||||||
|
watch(innerVisible, (isShow) => {
|
||||||
|
updatePosistion();
|
||||||
|
if (isShow) {
|
||||||
|
popperObserver = useResizeObserver(popperRefEl, () => {
|
||||||
|
updatePosistion();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
popperObserver && popperObserver.stop();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.visible,
|
() => props.visible,
|
||||||
(isShow) => (isShow ? doShow() : doHidden())
|
(isShow) => (isShow ? doShow() : doHidden())
|
||||||
);
|
);
|
||||||
|
|
||||||
watch(innerVisible, (val) => {
|
watch(
|
||||||
|
() => props.content,
|
||||||
|
() => {
|
||||||
updatePosistion();
|
updatePosistion();
|
||||||
});
|
}
|
||||||
|
);
|
||||||
watch([() => props.content, () => slots.content && slots?.content()], (val) => {
|
|
||||||
innerVisible.value && updatePosistion();
|
|
||||||
});
|
|
||||||
|
|
||||||
const isScrollElement = function (element: HTMLElement) {
|
const isScrollElement = function (element: HTMLElement) {
|
||||||
return (
|
return (
|
||||||
|
@ -1,64 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
export default {
|
|
||||||
name: "Tag",
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from "vue";
|
|
||||||
|
|
||||||
export interface LayTagProps {
|
|
||||||
theme?: string;
|
|
||||||
closable?: boolean;
|
|
||||||
size?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<LayTagProps>(), {
|
|
||||||
closable: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
const emit = defineEmits(["close"]);
|
|
||||||
|
|
||||||
const visible = ref(true);
|
|
||||||
|
|
||||||
const handleClose = (e: MouseEvent) => {
|
|
||||||
visible.value = false;
|
|
||||||
emit("close", e);
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<lay-badge v-if="visible" theme="green">
|
|
||||||
<template v-if="$slots.default" #default>
|
|
||||||
<slot name="default"></slot>
|
|
||||||
<lay-icon
|
|
||||||
v-if="closable"
|
|
||||||
type="layui-icon-close"
|
|
||||||
@click.stop="handleClose"
|
|
||||||
></lay-icon>
|
|
||||||
</template>
|
|
||||||
</lay-badge>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- <template v-for="(item, index) in selectItem.label" :key="index">
|
|
||||||
<lay-badge theme="green">
|
|
||||||
<span>{{ item }}</span>
|
|
||||||
<i
|
|
||||||
:class="['layui-icon', { 'layui-icon-close': true }]"
|
|
||||||
v-if="
|
|
||||||
!disabled &&
|
|
||||||
!(
|
|
||||||
Array.isArray(selectItem.value) &&
|
|
||||||
selectItem.value.length > 0 &&
|
|
||||||
disabledItemMap[selectItem.value[index]]
|
|
||||||
)
|
|
||||||
"
|
|
||||||
@click="
|
|
||||||
removeItemHandle($event, {
|
|
||||||
label: item,
|
|
||||||
value: Array.isArray(selectItem.value)
|
|
||||||
? selectItem.value[index]
|
|
||||||
: null,
|
|
||||||
})
|
|
||||||
"
|
|
||||||
></i>
|
|
||||||
</lay-badge>
|
|
||||||
</template> -->
|
|
@ -62,7 +62,7 @@ const props = defineProps({
|
|||||||
type: [String, Array, Object],
|
type: [String, Array, Object],
|
||||||
},
|
},
|
||||||
popperStyle: {
|
popperStyle: {
|
||||||
type: Object as PropType<StyleValue>,
|
type: [String, Object] as PropType<StyleValue>,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const vm = getCurrentInstance()!;
|
const vm = getCurrentInstance()!;
|
||||||
|
Loading…
Reference in New Issue
Block a user