Element-Ui組件(四十)Popover 彈出框
本文來源於Element官方文檔:
基礎用法
普通彈出框
<el-popover
ref="popover1"
placement="top-start"
title="標題"
width="200"
trigger="hover"
content="這是一段內容,這是一段內容,這是一段內容,這是一段內容。">
</el-popover>
<el-popover
ref="popover2"
placement="bottom"
title="標題"
width="200"
trigger="click"
content="這是一段內容,這是一段內容,這是一段內容,這是一段內容。">
</el-popover>
<el-button v-popover:popover1>hover 激活</el-button>
<el-button v-popover:popover2>click 激活</el-button>
<el-popover
placement="right"
title="標題"
width="200"
trigger="focus"
content="這是一段內容,這是一段內容,這是一段內容,這是一段內容。">
<el-button slot="reference">focus 激活</el-button>
</el-popover>
帶slot的彈出框
<el-popover
ref="popover4"
placement="right"
width="400"
trigger="click">
<el-table :data="gridData">
<el-table-column width="150" property="date" label="日期"></el-table-column>
<el-table-column width="100" property="name" label="姓名"></el-table-column>
<el-table-column width="300" property="address" label="地址"></el-table-column>
</el-table>
</el-popover>
<el-button v-popover:popover4>click 激活</el-button>
Attributes:
參數 | 類型 | 說明 | 可選值 | 默認值 |
---|---|---|---|---|
trigger | 觸發方式 | String | click/focus/hover/manual | click |
title | 標題 | String | — | — |
content | 顯示的內容,也可以通過 slot 傳入 DOM | String | — | — |
width | 寬度 | String, Number | — | 最小寬度 150px |
placement | 出現位置 | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
disabled | Popover 是否可用 | Boolean | — | false |
value(v-model) | 狀態是否可見 | Boolean | — | false |
offset | 出現位置的偏移量 | Number | — | 0 |
transition | 定義漸變動畫 | String | — | fade-in-linear |
visible-arrow | 是否顯示 Tooltip 箭頭,更多參數可見Vue-popper | Boolean | — | true |
popper-options | popper.js 的參數 | Object | 參考 popper.js 文檔 | { boundariesElement: ‘body’, gpuAcceleration: false } |
popper-class | 爲 popper 添加類名 | String | — | — |
open-delay | 觸發方式爲 hover 時的顯示延遲,單位爲毫秒 | Number | — | — |
Slot
參數 | 說明 |
---|---|
— | Popover 內嵌 HTML 文本 |
reference | 觸發 Popover 顯示的 HTML 元素 |
Events
事件名稱 | 說明 | 回調參數 |
---|---|---|
show | 顯示時觸發 | — |
hide | 隱藏時觸發 | — |