Appearance

Return to top
On this page

Popover 弹出框

基本使用

显示代码
vue
<template>
  <n-popover placement="top" content="我是个弹出框内容">
    <template #reference>
      <n-button type="primary">hover激活</n-button>
    </template>
  </n-popover>
</template>

不同的激活方式

在这里提供几种不同方向的触发方式

显示代码
vue
<template>
  <n-popover class="space" trigger="hover" content="hover激活">
    <template #reference>
      <n-button type="primary">hover激活</n-button>
    </template>
  </n-popover>
  <n-popover class="space" trigger="click" content="click激活">
    <template #reference>
      <n-button type="primary">click激活</n-button>
    </template>
  </n-popover>
  <n-popover class="space" trigger="focus" content="focus激活">
    <template #reference>
      <n-button type="primary">focus激活</n-button>
    </template>
  </n-popover>
  <n-popover class="space" trigger="manual" v-model="visible" content="手动激活">
    <template #reference>
      <n-button type="primary" @click="handler">手动激活</n-button>
    </template>
  </n-popover>
</template>

<script setup>
import { ref } from 'vue';

const visible = ref(false);
function handler() {
  visible.value = !visible.value;
}
</script>

<style scoped>
.space {
  margin-left: 16px;
}
</style>

不同位置

通过placement属性传入不同位置，在不同位置展示 popover,可用的位置有

  • top、top-start、top-end
  • left、left-start、left-end
  • right、right-start、right-end
  • bottom、bottom-start、bottom-end

自定义内容

在基础示例中，我们可以通过content传入文本内容，也可以通过默认插槽来传入自定义节点内容,width可控制弹出框的宽度

显示代码
vue
<template>
  <n-popover placement="top" title="我是标题" width="400">
    <n-table :data="tableData" :columns="columns" />
    <template #reference>
      <n-button type="primary">hover激活</n-button>
    </template>
  </n-popover>
</template>

<script setup>
const columns = [
  {
    title: '日期',
    key: 'date',
  },
  {
    title: '姓名',
    key: 'name',
  },
  {
    title: '地址',
    key: 'address',
  },
];
const tableData = [
  {
    date: '2021-11-02',
    name: '张三',
    address: '浙江省杭州市上城区 231 号',
  },
  {
    date: '2021-12-04',
    name: '李四',
    address: '浙江省杭州市西湖区 12 号',
  },
  {
    date: '2021-10-01',
    name: '王英',
    address: '浙江省杭州市临平区 2 号',
  },
  {
    date: '2021-11-03',
    name: '李逵',
    address: '浙江省杭州市拱墅区 199 号',
  },
];
</script>

API

参数说明类型可选值默认值
placement弹出框展示出的位置string不同位置'top'
width弹出框内容宽度string/number————
v-model手动控制 弹出框展示时的显隐boolean————
content弹出框展示的文本内容string————
popperClass自定义类，给弹出框添加自定义样式string————
title弹出框内容标题string————
disabled禁用 弹出框即不展示boolean——false
trigger弹出框触发条件string['click','hover','focus' ,'manual']'hover'
delay弹出框在触发关闭指令后多少毫秒关闭,默认为 0，即立即关闭number——0

Slots

插槽名描述
default默认插槽，弹出框的内容
reference通过该节点触发弹出框

Events

事件名称说明回调参数
afterEnter显示动画播放完毕后触发——
afterLeave隐藏动画播放完毕后触发——