Popover 弹出框
代码演示
弹出框状态值： false
基础用法
popover 组件默认触发方式 trigger 为 hover, popover默认出现位置为 bottom-start。
查看代码 < />
<template>
<w-popover v-model="visible" title="标题" content="这里是一段描述">
<w-button slot="reference">hover 激活</w-button>
</w-popover>
</template>触发方式
设定组件的trigger属性即可更改popper的触发方式, 可选触发方式有: hover, click, focus, manual, 当设定为 manual时, 需要手动为popover组件添加v-model以及为触发按钮添加click事件。
查看代码 < />
<template>
<w-popover title="标题" trigger="hover" content="这里是一段描述">
<w-button slot="reference">hover 激活</w-button>
</w-popover>
<w-popover
ref="popper"
title="标题"
trigger="click"
content="这里是一段描述"
>
</w-popover>
<w-button
v-popover:popper
style="margin-right: 5px;">
click 激活
</w-button>
<w-popover title="标题" trigger="focus" content="这里是一段描述">
<w-button slot="reference">focus 激活</w-button>
</w-popover>
<w-popover
v-model="isShow"
title="标题"
trigger="manual"
content="这里是一段描述"
>
<w-button slot="reference" @click="isShow = !isShow">manual 激活</w-button>
</w-popover>
</template>
<script>
export default {
data () {
return {
isShow: false,
}
}
</script>嵌套内容
通过默认slot的方式，可以嵌套内容。
查看代码 < />
<template>
<w-popover trigger="click" title="标题">
<w-input></w-input>
<w-button slot="reference">点击出现嵌套内容</w-button>
</w-popover>
</template>API
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
|---|---|---|---|---|---|
| content | 显示的内容，或通过 slot 传入 DOM | String | — | — | |
| disabled | 是否禁用Popover | Boolean | — | false | |
| popper-class | 为 popper 添加类名 | String | — | — | |
| placement | 出现位置 | String | top/right/bottom/left 及各方向的修饰符(-start, -end) | bottom-start | |
| trigger | 触发方式 | String | click/focus/hover/manual | hover | |
| title | 标题 | String | — | — | |
| value | 气泡状态 (显示-true, 隐藏-false) | Boolean | — | false | v1.2.0 |
| visible-arrow | 是否显示popover的箭头 | Boolean | — | true | |
| width | 宽度 | String, Number | — | 最小宽度 160px |
Slot
| 参数 | 说明 | Version |
|---|---|---|
| — | Popover 内嵌DOM | |
| reference | Popover的触发点 |
Popper Methods
| 事件名称 | 说明 | 回调参数 | Version |
|---|---|---|---|
| updatePopper | 更新popper（当相对定位元素发生位置或宽高变化时，需要更新popper的位置时调用） | — |
Events
| 事件名称 | 说明 | 回调参数 | Version |
|---|---|---|---|
| hidden | 隐藏时触发 | — | |
| show | 显示时触发 | — |
贡献者
| 类型 | 参与者 |
|---|---|
| 设计者 | UED视觉组 |
| 维护者 | UED前端组 |