深入了解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起到一定的方便和指導作用。