el-popover 的reference使用案例

`el-popover` 是 Element UI 组件库中的一个弹出层组件，用于展示信息提示气泡。在使用时，可以通过 `reference` 属性指定一个 DOM 元素作为触发元素，当用户与这个元素交互时，就会显示或隐藏 `el-popover` 组件。

以下是一个简单的使用案例：

<template>
  <el-popover
    :ref="popover"
    placement="top"
    title="标题"
    width="200"
    :content="content"
    :trigger="trigger">
    <el-button slot="reference" @click="togglePopover">
      点击显示 Popover
    </el-button>
  </el-popover>
</template>

<script>
export default {
  data() {
    return {
      content: '这是一段内容，点击按钮后显示',
      trigger: 'click',
      popover: null
    };
  },
  methods: {
    togglePopover() {
      if (this.popover) {
        this.popover.toggle();
      }
    }
  }
}
</script>

在这个例子中，我们有一个按钮，当点击这个按钮时，会触发 `el-popover` 的显示。`el-popover` 的 `reference` 属性在这里绑定到了一个名为 `popover` 的变量上，这是 Vue 的动态引用特性。我们还定义了一个 `togglePopover` 方法来控制 `el-popover` 的显示和隐藏。

需要注意的是，在 Vue 2.6.x 之后的版本中，可以使用 `v-popover` 指令来更简洁地实现同样的功能。