Popover 气泡
使用指南
气泡式弹窗组件,可添加描述或者额外的菜单;若是简单文本描述请使用Tooltip组件;
与thinking-ui 2.0版组件的区别
按照新的popover组件规范修改相关样式
代码演示
API
参数 | 说明 | 类型 | 默认值 |
mask | 是否显示遮罩层 | boolean | false |
visible | 是否显示,v-model 绑定值 | boolean | false |
reference | 参照元素,可以为VNode,或者DOM元素,若使用该方式,default插槽请不要使用 | VNode,DOM | - |
placement | 位置,可选值:top bottom top-start top-end bottom-start bottom-end | string | bottom |
maskCls | mask蒙层自定义class | string | 无 |
wrapCls | wrap弹窗内容区域的自定义class | string | 无 |
getRenderContainer | 把组件挂载某个地方,函数请返回节点,字符串默认通过document.querySelector 查找 | Function=> Node / String | document.body |
offset | 气泡弹出后偏移量, 一般用来进行气泡偏移调整 | number | 0 |
disabled | 是否禁用 | boolean | false |
always | 是否一直呈现 | boolean | false |
control | 是否由父组件控制显示隐藏,默认是在触发气泡组件上添加点击事件,触发 | boolean | false |
arrow | 是否显示方向箭头,默认不显示 | boolean | false |
menus | 菜单选项对象 | array | [] |
属性 | 说明 | 类型 |
icon | 图标 | string |
label | 菜单名称 | string |
Slot
属性 | 说明 | 参数 |
default | 触发气泡的组件 | - |
Event
事件名 | 说明 | 参数 |
toggle | 切换显示时触发,v-model 绑定事件 | value |
show | 显示时回调 | - |
hide | 关闭时回调 | - |