# popover (w-popover)

- **Import**: `WPopover` from `win-design-next`
- **Tag**: `<w-popover>`
- **说明**: Popover 悬浮框
- **分类**: feedback
- **Skill 版本**: V1.1.0
- **适配组件库**: win-design-next 1.2.2
- **API 来源**: `docs/zh-CN/component/popover.md`

## API

## API

### Attributes

| 属性名                    | 说明                                                                                                               | 类型                                                                                                                                                                        | Default                                                                    |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| trigger                   | 触发方式                                                                                                           | ^[enum]`'click' \| 'focus' \| 'hover' \| 'contextmenu'`                                                                                                                     | hover                                                                      |
| title                     | 标题                                                                                                               | ^[string]                                                                                                                                                                   | —                                                                          |
| effect                    | Tooltip 主题，WinDesign Next 内置了 `dark` / `light` 两种主题                                                      | ^[enum]`'dark' \| 'light'` / ^[string]                                                                                                                                      | light                                                                      |
| content                   | 显示的内容，也可以通过写入默认 `slot` 修改显示内容                                                                 | ^[string]                                                                                                                                                                   | ''                                                                         |
| width                     | 宽度                                                                                                               | ^[string] / ^[number]                                                                                                                                                       | 150                                                                        |
| placement                 | 出现位置                                                                                                           | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | bottom                                                                     |
| disabled                  | Popover 是否可用                                                                                                   | ^[boolean]                                                                                                                                                                  | false                                                                      |
| visible / v-model:visible | Popover 是否显示                                                                                                   | ^[boolean] / ^[null]                                                                                                                                                        | null                                                                       |
| offset                    | 浮层偏移量, `Popover` 是在 `Tooltip`,基础上开发的， `Popover`的 offset 是 `undefined`, 但`Tooltip` 的 offset 是 12 | ^[number]                                                                                                                                                                   | undefined                                                                  |
| transition                | 定义渐变动画，默认是 w3-fade-in-linear                                                                             | ^[string]                                                                                                                                                                   | —                                                                          |
| show-arrow                | 是否显示 Tooltip 箭头， 欲了解更多信息，请参考 WPopper                                                             | ^[boolean]                                                                                                                                                                  | true                                                                       |
| popper-options            | [popper.js](https://popper.js.org/docs/v2/) 的参数                                                                 | ^[object]                                                                                                                                                                   | `{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}` |
| popper-class              | 为 popper 添加类名                                                                                                 | ^[string]                                                                                                                                                                   | —                                                                          |
| popper-style              | 为 popper 自定义样式                                                                                               | ^[string] / ^[object]                                                                                                                                                       | —                                                                          |
| show-after                | 在触发后多久显示内容，单位毫秒                                                                                     | ^[number]                                                                                                                                                                   | 0                                                                          |
| hide-after                | 延迟关闭，单位毫秒                                                                                                 | ^[number]                                                                                                                                                                   | 200                                                                        |
| auto-close                | tooltip 出现后自动隐藏延时，单位毫秒                                                                               | ^[number]                                                                                                                                                                   | 0                                                                          |
| tabindex                  | Popover 组件的 [tabindex](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/tabindex)            | ^[number] / ^[string]                                                                                                                                                       | 0                                                                          |
| teleported                | 是否将 popover 的下拉列表插入至 body 元素                                                                          | ^[boolean]                                                                                                                                                                  | true                                                                       |
| persistent                | 当 popover 组件长时间不触发且 `persistent` 属性设置为 `false` 时, popover 将会被删除                               | ^[boolean]                                                                                                                                                                  | true                                                                       |

### Slots

| 插槽名    | 说明                          |
| --------- | ----------------------------- |
| default   | Popover 内嵌 HTML 文本        |
| reference | 触发 Popover 显示的 HTML 元素 |

### Events

| 事件名       | 说明                   | Type                    |
| ------------ | ---------------------- | ----------------------- |
| show         | 显示时触发             | ^[Function]`() => void` |
| before-enter | 显示动画播放前触发     | ^[Function]`() => void` |
| after-enter  | 显示动画播放完毕后触发 | ^[Function]`() => void` |
| hide         | 隐藏时触发             | ^[Function]`() => void` |
| before-leave | 隐藏动画播放前触发     | ^[Function]`() => void` |
| after-leave  | 隐藏动画播放完毕后触发 | ^[Function]`() => void` |

### Exposes

| 名称 | 详情         | 类型                    |
| ---- | ------------ | ----------------------- |
| hide | 隐藏 popover | ^[Function]`() => void` |
