mirror of
https://github.com/element-plus/element-plus.git
synced 2025-08-14 10:00:58 +08:00
d989617162
* docs: fix type error * docs: [tooltip] remove unnecessary width and height in mousemove handler * fix: update * fix: update
44 lines
856 B
Vue
44 lines
856 B
Vue
<template>
|
|
<el-tooltip
|
|
v-model:visible="visible"
|
|
content="Bottom center"
|
|
placement="bottom"
|
|
effect="light"
|
|
trigger="click"
|
|
virtual-triggering
|
|
:virtual-ref="triggerRef"
|
|
/>
|
|
<el-button @click="visible = !visible">test</el-button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, onUnmounted, ref } from 'vue'
|
|
|
|
const visible = ref(false)
|
|
const position = ref({
|
|
top: 0,
|
|
left: 0,
|
|
bottom: 0,
|
|
right: 0,
|
|
} as DOMRect)
|
|
|
|
const triggerRef = ref({
|
|
getBoundingClientRect: () => position.value,
|
|
})
|
|
|
|
const mousemoveHandler = ({ clientX, clientY }: MouseEvent) => {
|
|
position.value = DOMRect.fromRect({
|
|
x: clientX,
|
|
y: clientY,
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
document.addEventListener('mousemove', mousemoveHandler)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
document.removeEventListener('mousemove', mousemoveHandler)
|
|
})
|
|
</script>
|