virtual-trigger.vue 755 B

123456789101112131415161718192021222324252627282930313233
  1. <template>
  2. <el-tooltip v-model:visible="visible" content="Bottom center" placement="bottom" effect="light" trigger="click" virtual-triggering :virtual-ref="triggerRef" />
  3. <el-button @click="visible = !visible">test</el-button>
  4. </template>
  5. <script setup lang="ts">
  6. import { onMounted, ref } from 'vue'
  7. const visible = ref(false)
  8. const triggerRef = ref({
  9. getBoundingClientRect() {
  10. return position.value
  11. },
  12. })
  13. const position = ref({
  14. top: 0,
  15. left: 0,
  16. bottom: 0,
  17. right: 0,
  18. })
  19. onMounted(() => {
  20. document.addEventListener('mousemove', e => {
  21. position.value = DOMRect.fromRect({
  22. width: 0,
  23. height: 0,
  24. x: e.clientX,
  25. y: e.clientY,
  26. })
  27. })
  28. })
  29. </script>