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

转自于：https://huaweicloud.csdn.net/638f116ddacf622b8df8e566.html?spm=1001.2101.3001.6650.9&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~activity-9-122042411-blog-107202090.pc_relevant_multi_platform_whitelistv4&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~activity-9-122042411-blog-107202090.pc_relevant_multi_platform_whitelistv4&utm_relevant_index=10

是时候表演真正的技术了网上找了一堆都是没用的。。。。搜的第一个是啥也没说手动控制el-popover弹窗的显示与隐藏其实很简单，el-popover层绑定一个v-model的值为true或者false就行了。这是官网上给的Attributes。而且显示根本不用控制，el-popover有一个trigger属性，trigger可以为click/focus/hover/manual，默认值是click

 小妖盖  · 2021-12-20 15:45:44

 

是时候表演真正的技术了

 

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

手动控制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>