1、从elemtn-plus中导入ClickOutside指令
import { ClickOutside as vClickOutside } from 'element-plus'

从elemtn-plus中导入ClickOutside指令
//import { ClickOutside as vClickOutside } from 'element-plus'
<scrpit>
import { ClickOutside as vClickOutside } from 'element-plus';
</script>

2、从元素上绑定对应的指令
v-click-outside= "onClickOutside"

//从元素上绑定对应的指令
//v-click-outside= "onClickOutside"
 <el-popover width="74%" :visible="popoverVisible" @show="showPopoverHandler" @hide="closePopoverHandler">
       <template #reference>
                <el-select ref="selectRef" @focus="inputFocus" style="width: 99%"
 size="small" popper-class="el-select-popper" />
        </template>
             <div v-click-outside="onClickOutside">
                <el-form :inline="true" :model="formInline">
                 </el-form>
                <el-table @row-dblclick="rowClick" :data="equipListPageList" width="100%"
               :header-cell-style="{ 'background': '#F2F2F2' }"></el-table>
                 <el-pagination v-model:current-page="currentPage" v-model:page- 
                 size="pageSize" :page-sizes="[5, 10, 15, 20]" :small="small" 
                 :disabled="disabled" background layout="total, sizes, prev, pager, next, 
                 jumper" :total="total"@size-change="handleSizeChange" @current- 
                 change="handleCurrentChange" :teleported="false" />
             </div>

 </el-popover>

3、onClickOutside绑定对应的方法

<script>
const onClickOutside = () => {
    popoverVisible.value = false
}
</script>

GitHub 加速计划 / eleme / element
15
3
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐