el-popover事件控制显示隐藏

el-popover 组件提供了两个事件用于控制它的显示和隐藏：`show` 和 `hide`。

你可以在元素上使用 `v-on` 指令监听这两个事件，然后在触发时调用相应的方法来控制 el-popover 的显示和隐藏。

例如，在下面的代码中，我们为一个按钮绑定了 `showPopover` 方法，该方法用于在按钮上触发 `show` 事件，从而显示 el-popover 组件：

<template>
  <div>
    <el-button v-on:click="showPopover">显示 el-popover</el-button>
    <el-popover ref="popover" title="标题" width="200">
      <p>这是 el-popover 的内容</p>
    </el-popover>
  </div>
</template>

<script>
export default {
  methods: {
    showPopover() {
      this.$refs.popover.$emit('show')
    }
  }
}
</script>

同样，我们可以为 el-popover 组件绑定 `hidePopover` 方法，该方法用于在 el-popover 上触发 `hide` 事件，从而隐藏组件：

<template>
  <div>
    <el-button v-on:click="showPopover">显示 el-popover</el-button>
    <el-popover ref="popover" title="标题" width="200" v-on:hide="onHide">
      <p>这是 el-popover 的内容</p>
    </el-popover>
  </div>
</template>

<script>
export default {
  methods: {
    showPopover() {
      this.$refs.popover.$emit('show')
    },
    hidePopover() {
      this.$refs.popover.$emit('hide')
    },
    onHide() {
      console.log('el-popover 隐藏了')
    }
  }
}
</script>

在上面的代码中，我们为 el-popover 组件绑定了 `onHide` 方法，该方法用于在组件隐藏时打印一条消息。当点击按钮触发 `show` 事件显示 el-popover 后，我们再次点击按钮触发 `hide` 事件，从而隐藏组件。在组件隐藏时，会触发 `v-on:hide` 监听器并执行 `onHide` 方法，从而打印出一条消息。