弹出层

四个方位展示

<g-popover>
  <template v-slot:content>
    <div>内容内容内容</div>
  </template>
  <g-button>上</g-button>
</g-popover>
<g-popover position="bottom">
  <template v-slot:content>
    <div>内容内容内容</div>
  </template>
  <g-button>下</g-button>
</g-popover>
<g-popover position="left">
  <template v-slot:content>
    <div>内容内容内容</div>
  </template>
  <g-button>左</g-button>
</g-popover>
<g-popover position="right">
  <template v-slot:content>
    <div>内容内容内容</div>
  </template>
  <g-button>右</g-button>
</g-popover>

包含关闭按钮

<g-popover>
  <template #content="{ close }">
    <div>内容内容内容</div>
    <g-button @click="close">关闭</g-button>
  </template>
  <g-button>click me</g-button>
</g-popover>

包含 HTML 元素

<g-popover position="top">
  <div slot="content">内容内容 <a href="//qq.com">看新闻</a> 内容</div>
  <g-button>click me</g-button>
</g-popover>

鼠标移入触发

<g-popover trigger="hover">
  <div slot="content">内容内容内容</div>
  <g-button>click me</g-button>
</g-popover>