el-popover参数说明
时间: 2025-01-15 12:02:25 浏览: 43
### Element-UI `el-popover` 组件参数说明
#### 基本属性
`el-popover` 是基于 Vue-popper 开发的弹出框组件,具有多种配置选项来满足不同的需求。以下是常用的参数及其描述:
| 参数名 | 类型 | 默认值 | 描述 |
| -- |
| `placement` | string | 'bottom' | 弹出位置,可选值有 top、top-start、top-end、bottom、bottom-start、bottom-end、left、left-start、left-end、right、right-start 和 right-end[^1] |
| `title` | string | — | 设置标题内容 |
| `width` | number/string | — | 宽度,默认单位 px |
| `trigger` | string | 'hover' | 触发方式,支持 click/focus/hover/manual |
| `content` | string/VNode | — | 显示的内容 |
#### 高级属性
除了基本属性外,还有一些高级属性可以进一步定制行为:
| 参数名 | 类型 | 默认值 | 描述 |
| --- | --- | --- | --- |
| `disabled` | boolean | false | 是否禁用 popover 功能 |
| `offset` | number | 0 | 弹层相对于触发元素的位置偏移量 |
| `transition` | string | 'fade-in-linear' | 自定义过渡动画名称 |
| `visible-arrow` | boolean | true | 是否显示箭头 |
| `popper-options` | object | {} | 更多 popper.js 的配置项 |
```html
<el-popover
placement="bottom"
title="这是一个标题"
width="200"
trigger="click"
content="这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容。">
<el-button slot="reference">点击激活</el-button>
</el-popover>
```
阅读全文
相关推荐











