elementUI+popover的显示与隐藏

最新推荐文章于 2024-07-30 17:58:40 发布

木爻木Y

最新推荐文章于 2024-07-30 17:58:40 发布

阅读量2.2k

点赞数 2

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

本文链接：https://blog.csdn.net/qq_39111164/article/details/116498979

版权

Vue 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

elementUI

4 篇文章 0 订阅

订阅专栏

实现点击search显示，点击cancel隐藏
在这里插入图片描述

      <el-popover
        placement="bottom-start"
        trigger="click"
        ref="popover"
      >

显示

  <el-button
          class="popButton"
          slot="reference"
          v-waves
          size="small"
          type="primary"
          icon="el-icon-search"
        >Search</el-button
        >

设置 slot="reference"或者点击的时候this.$refs.popover.showPopper = true;

隐藏

 <el-button v-waves size="small" style="margin:0 10px;" icon="el-icon-close" type="primary" @click="handleCancel">{{ $t('table.cancel') }}</el-button>
 点击的时候设置为false
  handleCancel(){
      this.$refs.popover.showPopper = false
    },