W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
常用于展示鼠標(biāo) hover 時(shí)的提示信息。
在這里我們提供 9 種不同方向的展示方式,可以通過以下完整示例來理解,選擇你要的效果。
使用content屬性來決定hover時(shí)的提示信息。由placement屬性決定展示效果:placement屬性值為:方向-對(duì)齊位置;四個(gè)方向:top、left、right、bottom;三種對(duì)齊位置:start, end,默認(rèn)為空。如placement="left-end",則提示信息出現(xiàn)在目標(biāo)元素的左側(cè),且提示信息的底部與目標(biāo)元素的底部對(duì)齊。
<template>
<div class="box">
<div class="top">
<el-tooltip
class="item"
effect="dark"
content="Top Left 提示文字"
placement="top-start"
>
<el-button>上左</el-button>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="Top Center 提示文字"
placement="top"
>
<el-button>上邊</el-button>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="Top Right 提示文字"
placement="top-end"
>
<el-button>上右</el-button>
</el-tooltip>
</div>
<div class="left">
<el-tooltip
class="item"
effect="dark"
content="Left Top 提示文字"
placement="left-start"
>
<el-button>左上</el-button>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="Left Center 提示文字"
placement="left"
>
<el-button>左邊</el-button>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="Left Bottom 提示文字"
placement="left-end"
>
<el-button>左下</el-button>
</el-tooltip>
</div>
<div class="right">
<el-tooltip
class="item"
effect="dark"
content="Right Top 提示文字"
placement="right-start"
>
<el-button>右上</el-button>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="Right Center 提示文字"
placement="right"
>
<el-button>右邊</el-button>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="Right Bottom 提示文字"
placement="right-end"
>
<el-button>右下</el-button>
</el-tooltip>
</div>
<div class="bottom">
<el-tooltip
class="item"
effect="dark"
content="Bottom Left 提示文字"
placement="bottom-start"
>
<el-button>下左</el-button>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="Bottom Center 提示文字"
placement="bottom"
>
<el-button>下邊</el-button>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="Bottom Right 提示文字"
placement="bottom-end"
>
<el-button>下右</el-button>
</el-tooltip>
</div>
</div>
</template>
<style>
.box {
width: 400px;
.top {
text-align: center;
}
.left {
float: left;
width: 60px;
}
.right {
float: right;
width: 60px;
}
.bottom {
clear: both;
text-align: center;
}
.item {
margin: 4px;
}
.left .el-tooltip__popper,
.right .el-tooltip__popper {
padding: 8px 10px;
}
}
</style>
Tooltip 組件提供了兩個(gè)不同的主題:dark和light。
通過設(shè)置effect屬性來改變主題,默認(rèn)為dark。
<template>
<el-tooltip content="Top center" placement="top">
<el-button>Dark</el-button>
</el-tooltip>
<el-tooltip content="Bottom center" placement="bottom" effect="light">
<el-button>Light</el-button>
</el-tooltip>
</template>
展示多行文本或者是設(shè)置文本內(nèi)容的格式
用具名 slot 分發(fā)content,替代tooltip中的content屬性。
<template>
<el-tooltip placement="top">
<template #content> 多行信息<br />第二行信息 </template>
<el-button>Top center</el-button>
</el-tooltip>
</template>
除了這些基本設(shè)置外,還有一些屬性可以讓使用者更好的定制自己的效果:
transition 屬性可以定制顯隱的動(dòng)畫效果,默認(rèn)為fade-in-linear。 如果需要關(guān)閉 tooltip 功能,disabled 屬性可以滿足這個(gè)需求,它接受一個(gè)Boolean,設(shè)置為true即可。
事實(shí)上,這是基于 Vue-popper 的擴(kuò)展,你可以自定義任意 Vue-popper 中允許定義的字段。 當(dāng)然 Tooltip 組件實(shí)際上十分強(qiáng)大,文末的 API 文檔會(huì)做一一說明。
<template>
<el-tooltip
:disabled="disabled"
content="點(diǎn)擊關(guān)閉 tooltip 功能"
placement="bottom"
effect="light"
>
<el-button @click="disabled = !disabled"
>點(diǎn)擊{{disabled ? '開啟' : '關(guān)閉'}} tooltip 功能</el-button
>
</el-tooltip>
</template>
<script>
export default {
data() {
return {
disabled: false,
}
},
}
</script>
tooltip 內(nèi)不支持 router-link 組件,請(qǐng)使用 vm.$router.push 代替。
tooltip 內(nèi)不支持 disabled form 元素,參考MDN,請(qǐng)?jiān)?disabled form 元素外層添加一層包裹元素。
參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
---|---|---|---|---|
append-to-body | 決定 popper 是否傳送到 document.body 下 | Boolean | - | true |
effect | 默認(rèn)提供的主題 | String | dark/light | dark |
content | 顯示的內(nèi)容,也可以通過 slot#content 傳入 DOM | String | — | — |
placement | Tooltip 的出現(xiàn)位置 | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
model-value / v-model | 狀態(tài)是否可見 | Boolean | — | false |
disabled | Tooltip 是否可用 | Boolean | — | false |
offset | 出現(xiàn)位置的偏移量 | Number | — | 0 |
transition | 定義漸變動(dòng)畫 | String | — | el-fade-in-linear |
visible-arrow | 是否顯示 Tooltip 箭頭,更多參數(shù)可見Vue-popper | Boolean | — | true |
popper-options | popper.js 的參數(shù) | Object | 參考 popper.js 文檔 | { boundariesElement: 'body', gpuAcceleration: false } |
show-after | 延遲出現(xiàn),單位毫秒 | Number | — | 0 |
hide-after | 延遲關(guān)閉,單位毫秒 | Number | — | 0 |
auto-close | Tooltip 出現(xiàn)后自動(dòng)隱藏延時(shí),單位毫秒,為 0 則不會(huì)自動(dòng)隱藏 | number | — | 0 |
manual | 手動(dòng)控制模式,設(shè)置為 true 后,mouseenter 和 mouseleave 事件將不會(huì)生效 | Boolean | — | false |
popper-class | 為 Tooltip 的 popper 添加類名 | String | — | — |
enterable | 鼠標(biāo)是否可進(jìn)入到 tooltip 中 | Boolean | — | true |
tabindex | Tooltip 組件的 tabindex | number | — | 0 |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: