Popover 气泡
APP
PC
在点击控件或者某个区域后，浮出一个气泡菜单来做更多的操作。 如果设置了遮罩层，建议通过点击遮罩层的任一位置，进行退出。
引入方式
数字生活网页应用工程中，不需要 import，直接使用组件标签即可。
import {Popover, PopoverItem} from '@21cnfe/vui'
Vue.component('Popover', Popover)
Vue.component('PopoverItem', PopoverItem)
|
代码演示
基本用法
气泡框的大小由内容区域决定，气泡框的位置由 trigger 插槽的内容决定
<Popover mask :visible.sync="visible" @onVisibleChange="onVisibleChange">
<template slot="content">
// 1.使用 Popover 具名插槽 content 嵌入自定义内容
</template>
<template slot="trigger">
// 2.使用 Popover 具名插槽 trigger 关联触发 Popover 显示的 HTML 元素
</template>
</Popover>
</script>
|
PopoverItem
Popover中嵌入PopoverItem，PopoverItem具有匿名插槽和具名插槽 icon
<Popover :visible.sync="visiable" mask placement="bottomRight" class="popover" @onVisibleChange="onTest">
// 嵌入 PopoverItem
<PopoverItem>
// PopoverItem具名插槽icon
<div slot="icon"><Icon type="check"></Icon></div>
//PopoverItem匿名插槽
<div></div>
</PopoverItem>
</Popover>
|
气泡位置
气泡框的位置由 trigger 插槽的内容决定，通过使用 placement 属性围绕 trigger 插槽定位
<Popover placement="top"></Popover>
<Popover placement="right"></Popover>
<Popover placement="bottom"></Popover>
<Popover placement="left"></Popover>
<Popover placement="topLeft"></Popover>
<Popover placement="topRight"></Popover>
<Popover placement="bottomLeft"></Popover>
<Popover placement="bottomRight"></Popover>
|
API
| 属性 |
说明 |
类型 |
默认值 |
visible |
气泡显隐状态 |
Boolean |
false |
mask |
是否显示遮罩背景层 |
Boolean |
false |
maskClosable |
点击蒙层是否允许关闭 |
Boolean |
true |
placement |
可选值'left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight' |
String |
'bottomRight' |
Events
| 事件名称 |
说明 |
回调参数 |
onSelect |
选中某选项时的回调函数 |
-- |
onVisibleChange |
当显隐状态变化时回调函数 |
isVisible：当前显隐状态 |
Slot
Popover
| 插槽名称 |
说明 |
content |
Popover嵌入内容 |
trigger |
关联触发 Popover 显示的 HTML 元素 |
PopoverItem
| 插槽名称 |
说明 |
| 匿名插槽 |
PopoverItem中嵌入内容 |
icon |
PopoverItem嵌入图标 |
