el-popover 通过js手动控制弹出框显示、隐藏

在Vue.js中，可以使用ref属性来引用el-popover组件，并通过组件实例的show和hide方法来控制弹出框的显示和隐藏。

以下是一个简单的例子：

<template>
  <div>
    <el-popover
      ref="popover"
      content="这是一段内容, 这是一段内容, 这是一段内容."
      title="标题"
      placement="top"
      width="200"
      trigger="manual"
    >
      <el-button slot="reference">手动触发</el-button>
    </el-popover>
 
    <el-button @click="showPopover">显示弹出框</el-button>
    <el-button @click="hidePopover">隐藏弹出框</el-button>
  </div>
</template>
 
<script>
export default {
  methods: {
    showPopover() {
      this.$refs.popover.show();
    },
    hidePopover() {
      this.$refs.popover.hide();
    }
  }
};
</script>

在这个例子中，el-popover组件被赋予了一个ref属性，值为"popover"。通过this.$refs.popover可以访问到该组件的实例。trigger属性设置为manual以允许通过代码控制弹出框的显示和隐藏。showPopover方法调用this.$refs.popover.show()来显示弹出框，hidePopover方法调用this.$refs.popover.hide()来隐藏弹出框。