深入了解el-popover组件

一、基础使用

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起到一定的方便和指导作用。