Popover 气泡弹出框
介绍
引入
import Vue from 'vue';
import { Popover } from 'vant';
Vue.use(Popover);
代码演示
基础用法
API
Props
| 参数 |
说明 |
类型 |
默认值 |
| v-model |
是否展示气泡弹出层 |
boolean |
false |
| actions |
选项列表 |
Action[] |
[] |
| placement |
弹出位置 |
string |
- |
| theme |
主题风格，可选值为 dark |
string |
light |
| overlay |
是否显示遮罩层 |
boolean |
false |
| close-on-click-action |
是否在点击选项后关闭 |
boolean |
true |
| close-on-click-outside |
是否在点击外部元素后关闭菜单 |
boolean |
true |
get-container v2.4.4 |
指定挂载的节点，用法示例 |
string | () => Element |
body |
Action 数据结构
actions 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象可以包含以下值：
| 键名 |
说明 |
类型 |
| text |
选项文字 |
string |
| icon |
文字左侧的图标，支持传入图标名称或图片链接 |
string |
| disabled |
是否为禁用状态 |
boolean |
| className |
为对应选项添加额外的类名 |
any |
Events
| 事件名 |
说明 |
回调参数 |
| select |
点击选项时触发 |
action: Action, index: number |
| open |
打开菜单时触发 |
- |
| close |
关闭菜单时触发 |
- |
| opened |
打开菜单且动画结束后触发 |
- |
| closed |
关闭菜单且动画结束后触发 |
- |
Slots
| 名称 |
说明 |
| reference |
触发 Popover 显示的元素内容 |
