W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗(yàn)值獎勵
Popover 的屬性與 Tooltip 很類似,它們都是基于Vue-popper開發(fā)的,因此對于重復(fù)屬性,請參考 Tooltip 的文檔,在此文檔中不做詳盡解釋。
trigger屬性用于設(shè)置何時觸發(fā) Popover,支持四種觸發(fā)方式:hover,click,focus 和 manual。對于觸發(fā) Popover 的元素,有兩種寫法:使用 #reference 的具名插槽,或使用自定義指令v-popover指向 Popover 的索引ref。
<template>
<el-popover
placement="top-start"
title="標(biāo)題"
:width="200"
trigger="hover"
content="這是一段內(nèi)容,這是一段內(nèi)容,這是一段內(nèi)容,這是一段內(nèi)容。"
>
<template #reference>
<el-button>hover 激活</el-button>
</template>
</el-popover>
<el-popover
placement="bottom"
title="標(biāo)題"
:width="200"
trigger="click"
content="這是一段內(nèi)容,這是一段內(nèi)容,這是一段內(nèi)容,這是一段內(nèi)容。"
>
<template #reference>
<el-button>click 激活</el-button>
</template>
</el-popover>
<el-popover
ref="popover"
placement="right"
title="標(biāo)題"
:width="200"
trigger="focus"
content="這是一段內(nèi)容,這是一段內(nèi)容,這是一段內(nèi)容,這是一段內(nèi)容。"
>
<template #reference>
<el-button>focus 激活</el-button>
</template>
</el-popover>
<el-popover
placement="bottom"
title="標(biāo)題"
:width="200"
trigger="manual"
content="這是一段內(nèi)容,這是一段內(nèi)容,這是一段內(nèi)容,這是一段內(nèi)容。"
v-model:visible="visible"
>
<template #reference>
<el-button @click="visible = !visible">手動激活</el-button>
</template>
</el-popover>
</template>
<script>
export default {
data() {
return {
visible: false,
}
},
}
</script>
可以在 Popover 中嵌套多種類型信息,以下為嵌套表格的例子。
利用分發(fā)取代content屬性
<template>
<el-popover placement="right" :width="400" trigger="click">
<template #reference>
<el-button>click 激活</el-button>
</template>
<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>
</template>
<script>
export default {
data() {
return {
gridData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄',
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄',
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄',
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄',
},
],
}
},
}
</script>
當(dāng)然,你還可以嵌套操作,這相比 Dialog 更為輕量:
<template>
<el-popover placement="top" :width="160" v-model:visible="visible">
<p>這是一段內(nèi)容這是一段內(nèi)容確定刪除嗎?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="visible = false">取消</el-button>
<el-button type="primary" size="mini" @click="visible = false"
>確定</el-button
>
</div>
<template #reference>
<el-button @click="visible = true">刪除</el-button>
</template>
</el-popover>
</template>
<script>
export default {
data() {
return {
visible: false,
}
},
}
</script>
參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
---|---|---|---|---|
trigger | 觸發(fā)方式 | String | click/focus/hover/manual | click |
title | 標(biāo)題 | String | — | — |
content | 顯示的內(nèi)容,也可以通過 slot 傳入 DOM | String | — | — |
width | 寬度 | String, Number | — | 最小寬度 150px |
placement | 出現(xiàn)位置 | 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 |
visible / v-model:visible | 狀態(tài)是否可見 | Boolean | — | false |
offset | 出現(xiàn)位置的偏移量 | Number | — | 0 |
transition | 定義漸變動畫 | String | — | fade-in-linear |
show-arrow | 是否顯示 Tooltip 箭頭,更多參數(shù)可見Vue-popper | Boolean | — | true |
popper-options | popper.js 的參數(shù) | Object | 參考 popper.js 文檔 | { boundariesElement: 'body', gpuAcceleration: false } |
popper-class | 為 popper 添加類名 | String | — | — |
show-after | 延遲出現(xiàn),單位毫秒 | Number | — | 0 |
hide-after | 延遲關(guān)閉,單位毫秒 | Number | — | 0 |
auto-close | Tooltip 出現(xiàn)后自動隱藏延時,單位毫秒,為 0 則不會自動隱藏 | number | — | 0 |
tabindex | Popover 組件的 tabindex | number | — | — |
參數(shù) | 說明 |
---|---|
— | Popover 內(nèi)嵌 HTML 文本 |
reference | 觸發(fā) Popover 顯示的 HTML 元素 |
事件名稱 | 說明 | 回調(diào)參數(shù) |
---|---|---|
show | 顯示時觸發(fā) | — |
after-enter | 顯示動畫播放完畢后觸發(fā) | — |
hide | 隱藏時觸發(fā) | — |
after-leave | 隱藏動畫播放完畢后觸發(fā) | — |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: