element?tooltip的使用
在項(xiàng)目的開發(fā)中，有好多地方都需要對(duì)頁面標(biāo)簽添加一些備注信息，方便用戶可以更深入的了解內(nèi)容的含義。
element-ui中就用tooltip的使用，用起來很方便，且可以調(diào)整提示文字出現(xiàn)的文字，官方地址如下：
實(shí)現(xiàn)效果如下圖所示：
簡單的主要代碼如下：
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start"> <el-button>上左</el-button> </el-tooltip>
使用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ì)齊。
如果在平時(shí)開發(fā)中想要用顯示一個(gè)圖標(biāo)，鼠標(biāo)懸停時(shí)顯示提示信息，效果如下：
代碼如下：
// 直接加在某段文字前后 <el-tooltip effect="dark" placement="bottom-start"> <div slot="content">注：提示信息</div> <i class="el-icon-info" /> </el-tooltip>
// 插在label里面的用法
<el-form-item label="" prop="nameAccessControl" label-width="135px">
<span slot="label">
標(biāo)簽名稱
<el-tooltip effect="dark" placement="bottom-start">
<div slot="content">注：提示信息</div>
<i class="el-icon-info" />
</el-tooltip>
</span>
<el-input v-model="temp.nameAccessControl" maxlength="100"></el-input>
</el-form-item>總之，tooltip還是蠻好用的，項(xiàng)目中很多地方都有用到，即方便又美觀
到此這篇關(guān)于element tooltip的使用的文章就介紹到這了,更多相關(guān)element tooltip內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue項(xiàng)目使用高德地圖的定位及關(guān)鍵字搜索功能的實(shí)例代碼(踩坑經(jīng)驗(yàn))
這篇文章主要介紹了vue項(xiàng)目使用高德地圖的定位及關(guān)鍵字搜索功能的實(shí)例代碼，也是小編踩了無數(shù)坑總結(jié)出來的經(jīng)驗(yàn),非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
這篇文章主要介紹了vue3 自定義loading的操作方法,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
這篇文章主要介紹了vue3-ace-editor如何配置語法問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue2.0使用swiper組件實(shí)現(xiàn)輪播的示例代碼
下面小編就為大家分享一篇vue2.0使用swiper組件實(shí)現(xiàn)輪播的示例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
基于vue寫一個(gè)全局Message組件的實(shí)現(xiàn)
這篇文章主要介紹了基于vue寫一個(gè)全局Message組件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Vue結(jié)合ElementUI實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求和頁面跳轉(zhuǎn)功能(最新推薦)
我們?cè)赑roflie.vue實(shí)例中,有beforeRouteEnter、beforeRouteLeave兩個(gè)函數(shù)分別是進(jìn)入路由之前和離開路由之后,我們可以在這兩個(gè)函數(shù)之內(nèi)進(jìn)行數(shù)據(jù)的請(qǐng)求,下面給大家分享Vue結(jié)合ElementUI實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求和頁面跳轉(zhuǎn)功能,感興趣的朋友一起看看吧2024-05-05
vue3+js+elementPlus使用富文本編輯器@vueup/vue-quill詳細(xì)教程
富文本編輯器在任何項(xiàng)目中都會(huì)用到,下面這篇文章主要給大家介紹了關(guān)于vue3+js+elementPlus使用富文本編輯器@vueup/vue-quill的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
element-plus 下拉框?qū)崿F(xiàn)全選的示例代碼
本文主要介紹了element-plus 下拉框?qū)崿F(xiàn)全選的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
element-ui配合node實(shí)現(xiàn)自定義上傳文件方式
這篇文章主要介紹了element-ui配合node實(shí)現(xiàn)自定義上傳文件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)封裝樹狀圖,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03