el-popover 内容自定义
时间: 2023-10-06 10:04:44 浏览: 202
element-ui组件table实现自定义筛选功能的示例代码
5星 · 资源好评率100%
el-popover组件支持内容自定义。你可以在el-popover标签内插入任何HTML元素作为内容,或者使用slot插槽来自定义内容。
下面是一个例子:
```
<el-popover
placement="top"
width="200"
trigger="click">
<button>点击显示</button>
<div slot="content">
<p>这里是自定义内容</p>
<p>你可以在这里插入任何HTML元素</p>
</div>
</el-popover>
```
在上面的例子中,我们在el-popover标签内插入了一个按钮作为触发器,并在slot="content"的div内插入了自定义内容。
你还可以在slot="reference"的元素中插入任何内容,作为触发器的内容。
```
<el-popover
placement="top"
width="200"
trigger="click">
<span slot="reference">
<i class="el-icon-edit"></i>
</span>
<div slot="content">
<p>这里是自定义内容</p>
<p>你可以在这里插入任何HTML元素</p>
</div>
</el-popover>
```
在上面的例子中,我们在slot="reference"的span元素中插入了一个编辑图标作为触发器的内容。
阅读全文