数字生活小程序-文档中心

在点击控件或者某个区域后，浮出一个气泡菜单来做更多的操作。如果设置了遮罩层，建议通过点击遮罩层的任一位置，进行退出。

引入方式

数字生活小程序工程中，不需要 import，直接使用组件标签即可。

import {Popover, PopoverItem} from '@21cnfe/vui'  
Vue.component('Popover', Popover)  
Vue.component('PopoverItem', PopoverItem)

代码演示

Popover 气泡 popovers

基本用法气泡框的大小由内容区域决定，气泡框的位置由 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

插槽名称	说明
`content`	Popover嵌入内容
`trigger`	关联触发 Popover 显示的 HTML 元素

PopoverItem

插槽名称	说明
匿名插槽	PopoverItem中嵌入内容
`icon`	PopoverItem嵌入图标

1. Popover 气泡 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

Popover 气泡 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

引入方式

代码演示

API

Events

Slot

Popover

PopoverItem

Popover 气泡 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用