一、基础使用
el-popover是element-ui中的一个组件，具有方便弹出提示的特性，使用它可以为页面增加更多的信息展示机制。
要使用el-popover组件，首先需要引入element-ui库，并在需要使用的组件中写入相关代码。例如：
<el-popover
trigger="click"
content="这是一个基本的popover框"
placement="top"
>
<el-button>click me</el-button>
</el-popover>
此时，我们已经在页面中成功的添加了一个基本的popover框，并通过按钮成功的触发了它的显示。同时也可以通过参数调节其位置以达到我们想要的效果。
二、弹出框内容的自定义
对于一个基本的popover框，其弹出的内容比较单一，只是简单的显示一段文字。因此我们需要对其内容进行自定义改造，才能得到更好的使用体验。
要实现内容的自定义，我们可以直接将自己的html代码放入<el-popover>标签中。例如：
<el-popover
trigger="click"
placement="bottom-start"
>
<i class="el-icon-question"></i>
<span slot="content">
我是自定义弹出内容
<br>
我可以随便写Html
<br>
<br>
<el-button size="mini">点击关闭</el-button>
</span>
</el-popover>
这样，我们就可以自由的按照自己的需要，定制自己的popover框，包括文本、图片、超链接等等。
三、不同触发方式的实现
除了click触发之外，el-popover还支持其他多种触发方式，如hover、focus、manual等。下面是几个实现方式：
<el-popover
trigger="hover"
placement="top-start"
>
<i class="el-icon-edit-outline"></i>
<span slot="content">编辑当前文件</span>
</el-popover>
<el-popover
trigger="focus"
placement="top-start"
>
<input type="text" placeholder="搜索关键词">
<span slot="content">Enter进行搜索</span>
</el-popover>
<el-popover
v-model="popoverVisible"
trigger="manual"
placement="top-start"
>
<i class="el-icon-star-on" @click="popoverVisible = !popoverVisible"></i>
<span slot="content">
添加该文章到收藏夹
<br>
<br>
<el-button size="mini" @click="popoverVisible = !popoverVisible">取消</el-button>
</span>
</el-popover>以上三个例子分别实现了鼠标悬浮、输入框聚焦、手动触发三种不同的popover框。
四、不同placement的配置
对于一个popover框，其显示位置也是比较重要的一课内容。element-ui提供了多个placement供我们选择，包括top、top-start、top-end、bottom、bottom-start、bottom-end、left、left-start、left-end、right、right-start、right-end等等。 只需要将placement参数设为对应值即可实现。
<el-popover
trigger="click"
placement="top-start"
>
<i class="el-icon-loading"></i>
<span slot="content">内容加载中...</span>
</el-popover>
<el-popover
trigger="click"
placement="left-start"
>
<i class="el-icon-s-comment"></i>
<span slot="content">发起评论</span>
</el-popover>
<el-popover
trigger="click"
placement="right-start"
>
<i class="el-icon-video-camera"></i>
<span slot="content">视频通话</span>
</el-popover>以上三个例子分别将popover框放置在了窗口的顶部左侧、左侧、右侧，并且已经添加了相应的图标和内容描述。
总结
本篇文章对el-popover组件进行了深入解析，介绍了基础使用、弹出框内容自定义、不同触发方式的实现、不同placement的配置等多方面的内容。希望本文能对大家使用el-popover起到一定的方便和指导作用。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/191895.html
微信扫一扫 
支付宝扫一扫 