ant-design-vue/components/popover/demo/hover-with-click.md

#### 悬停点击弹出窗口 以下示例显示如何创建可悬停和单击的弹出窗口。 #### Hover with click popover The following example shows how to create a popover which can be hovered and clicked.

<template>
  <a-popover
    style="width: 500px"
    title="Hover title"
    trigger="hover"
    :visible="hovered"
    @visibleChange="handleHoverChange"
  >
    <div slot="content">This is hover content.</div>
    <a-popover
      title="Click title"
      trigger="click"
      :visible="clicked"
      @visibleChange="handleClickChange"
    >
      <div slot="content">
        <div>This is click content.</div>
        <a @click="hide">Close</a>
      </div>
      <a-button>Hover and click / 悬停并单击</a-button>
    </a-popover>
  </a-popover>
</template>
<script>
export default {
  data() {
    return {
      clicked: false,
      hovered: false,
    }
  },
  methods: {
    hide () {
      this.clicked = false
      this.hovered = false
    },
    handleHoverChange (visible) {
      this.clicked = false
      this.hovered = visible
    },
    handleClickChange (visible) {
      this.clicked = visible
      this.hovered = false
    },
  },
}
</script>