vue3 elementplus el-popover组件点击外部区域无法关闭问题
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
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>
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 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)