Element Plus 使用v-click-outside指令

3,963 阅读1分钟
<template>
    <el-button 
        ref="buttonRef" 
        v-click-outside:[popperPaneRef]="onClickOutside"
        @click="visible=true"
    >Click me</el-button>
    <el-popover
        ref="tooltipRef"
        :virtual-ref="buttonRef"
        v-model:visible="visible"
        title="With title"
        virtual-triggering>
            <el-button 
                type="primary"
                link
                @click.stop="visible = false"
            > Some content </el-button>
    </el-popover>
</template>

<script setup>
import {computed, ref} from 'vue'
import {ClickOutside as vClickOutside} from 'element-plus'
const buttonRef = ref()
const tooltipRef = ref()
const visible = ref(false)
const popperPaneRef = computed(() => {
    return tooltipRef.value?.popperRef?.contentRef
})
const onClickOutside = () => {
    visible.value = false
}
</script>