virtual-triggering.vue 554 B

12345678910111213141516171819202122232425
  1. <template>
  2. <el-button ref="buttonRef" v-click-outside="onClickOutside"
  3. >Click me</el-button
  4. >
  5. <el-popover
  6. ref="popoverRef"
  7. :virtual-ref="buttonRef"
  8. trigger="click"
  9. title="With title"
  10. virtual-triggering
  11. >
  12. <span> Some content </span>
  13. </el-popover>
  14. </template>
  15. <script setup lang="ts">
  16. import { ref, unref } from 'vue'
  17. import { ClickOutside as vClickOutside } from 'element-plus'
  18. const buttonRef = ref()
  19. const popoverRef = ref()
  20. const onClickOutside = () => {
  21. unref(popoverRef).popperRef?.delayHide?.()
  22. }
  23. </script>