ElementUI手动控制popover弹层的显示与隐藏

最新推荐文章于 2025-03-07 13:46:36 发布

小妖盖

最新推荐文章于 2025-03-07 13:46:36 发布

阅读量1.5w

点赞数 9

分类专栏： vue elementui 文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_44532220/article/details/122042411

版权

vue 同时被 2 个专栏收录

3 篇文章

订阅专栏

elementui

2 篇文章

订阅专栏

本文介绍了如何在ElementUI中手动控制popover弹层的显示与隐藏。通过设置el-popover的v-model绑定值为true或false，可以轻松实现弹窗的显示和隐藏。此外，触发弹窗的显示可以利用trigger属性，如click/focus/hover/manual，而隐藏弹窗是主要讨论的重点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

是时候表演真正的技术了

网上找了一堆都是没用的。。。。搜的第一个是啥也没说

手动控制el-popover弹窗的显示与隐藏其实很简单，el-popover层绑定一个v-model的值为true或者false就行了。这是官网上给的Attributes。

<el-popover v-model="showPopover">

在这里插入图片描述
而且显示根本不用控制，el-popover有一个trigger属性，trigger可以为click/focus/hover/manual，默认值是click，所以单击就能触发，主要是弹窗的隐藏问题。

<el-popover trigger="click">

在这里插入图片描述

<el-popover
  placement="right"
  width="400"
  trigger="click"
  v-model="showPopover"
  >
  <el-table :data="gridData">
    <el-table-column width="150" property="date" label="日期"></el-table-column>
    <el-table-column width="100" property="name" label="姓名"></el-table-column>
    <el-table-column width="300" property="address" label="地址"></el-table-column>
  </el-table>
  <!--激活控制弹窗的显示-->
  <el-button slot="reference">click 激活</el-button>
  <!--在加个按钮绑定一个方法控制弹窗的隐藏-->
  <el-button class="btn-normal" size="medium" @click="closePopover">popover弹窗关闭</el-button>
</el-popover>

<script>
  export default {
    data() {
      return {
        showPopover:false,//v-model默认值是false, click激活变成true
        gridData: [{date: '2016-05-02',name: '王小虎',address: '上海'}]
      }
    },
    methods: {
      closePopover(){
        this.showPopover = false//关闭就是把v-model设置成false
      }
    }
  }
</script>