关于elementui 组件Popover删除弹出框点击取消无法关闭弹出框的解决办法

最新推荐文章于 2024-07-09 08:29:27 发布

原创最新推荐文章于 2024-07-09 08:29:27 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#node.js #html5 #vue #js #java

本文解决了一个在使用ElementUI组件时遇到的问题，即点击取消按钮后弹出框无法关闭的情况。通过添加ref属性并自定义方法，成功实现了取消按钮的功能。

问题如图

今天写前端页面时使用elementui 组件时发现点击取消按钮，弹出框不关闭。
官方代码如下

<el-popover
  placement="top"
  width="160"
  v-model="visible">
  <p>这是一段内容这是一段内容确定删除吗？</p>
  <div style="text-align: right; margin: 0">
    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
    <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
  </div>
  <el-button slot="reference">删除</el-button>
</el-popover>

<script>
  export default {
    data() {
      return {
        visible: false,
      };
    }
  }