🐛(component): [tolltip]:修复 content 自动定位
This commit is contained in:
parent
e1a41552c5
commit
5d5546d748
@ -36,8 +36,14 @@ import {
|
||||
computed,
|
||||
toRef,
|
||||
StyleValue,
|
||||
Ref,
|
||||
} from "vue";
|
||||
import { onClickOutside, useEventListener, useThrottleFn } from "@vueuse/core";
|
||||
import {
|
||||
onClickOutside,
|
||||
useEventListener,
|
||||
useResizeObserver,
|
||||
useThrottleFn,
|
||||
} from "@vueuse/core";
|
||||
|
||||
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(
|
||||
() => props.visible,
|
||||
(isShow) => (isShow ? doShow() : doHidden())
|
||||
);
|
||||
|
||||
watch(innerVisible, (val) => {
|
||||
watch(
|
||||
() => props.content,
|
||||
() => {
|
||||
updatePosistion();
|
||||
});
|
||||
|
||||
watch([() => props.content, () => slots.content && slots?.content()], (val) => {
|
||||
innerVisible.value && updatePosistion();
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
const isScrollElement = function (element: HTMLElement) {
|
||||
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],
|
||||
},
|
||||
popperStyle: {
|
||||
type: Object as PropType<StyleValue>,
|
||||
type: [String, Object] as PropType<StyleValue>,
|
||||
},
|
||||
});
|
||||
const vm = getCurrentInstance()!;
|
||||
|
Loading…
Reference in New Issue
Block a user