element?el-tooltip實現(xiàn)自定義修改樣式
先粘一張官方給出的UI樣式
關(guān)于UI框架，用起來雖然很方便，但是樣式卻和所需的不一樣，那么該如何修改成自己想要的樣式呢？
在粘一張我自己修改后的樣式圖
不僅修改了button的背景色、文字顏色，更修改了上方提示氣泡的背景色
官方api里沒有看到如何修改button樣式,所以我修改的方式就是在使用組件的地方，寫行內(nèi)樣式
<el-tooltip
style="color:white;border:none;background-color:#7ec9a1"
content="這里是內(nèi)容一"
placement="top"
:enterable='false'>
<el-button>tip 1</el-button>
</el-tooltip>但是修改上方tip提示的樣式，就遇到了一些小問題
- 第一就是沒找到該dom
- 找到dom，就不知該如何修改
剛開始，在使用el-tooltip的地方，本以為直接查看元素就能找到dom節(jié)點，但是有些想當然了。在查閱一番資料文獻之后，才發(fā)現(xiàn)，其實這個組件的層級，并不是在你使用他的地方，而是和你的app同一層級，所以在當前使用的地方找不到tip提示的dom節(jié)點
既然找到了，那就應(yīng)該能夠修改了吧？非也
根據(jù)官方定義使用的className名 el-tooltip__popper可以修改掉上方tip提示泡的背景色，但是下方的箭頭卻沒修改成功，修改他的className也并沒有效果
.el-tooltip__popper{
background: rgba(0,0,0,0.65) !important;
}如果箭頭的樣式與tip提示的樣式不一樣，還不如不進行修改，不然會顯得很突兀。再次查閱資料之后，發(fā)現(xiàn)可以修改箭頭樣式的方法，實際操作之后發(fā)現(xiàn)有效，代碼如下：
.el-tooltip__popper[x-placement^=top] .popper__arrow:after{
border-top-color: #595959 !important;
}需要注意的就是，該代碼片段，需要寫在根文件的style里，如果寫在當前文件里也并非不可，但是需要將scope取消掉，原因在上方已闡述過一次。
該組件的層級不在于你使用的地方，它與跟文件屬于統(tǒng)一層級
到此這篇關(guān)于element el-tooltip實現(xiàn)自定義修改樣式的文章就介紹到這了,更多相關(guān)element el-tooltip修改樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue環(huán)境搭建簡單教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)搜索功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了vue如何在新窗口打開頁面問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要給大家介紹了關(guān)于vue路由教程之靜態(tài)路由的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-09-09
訪問百度音樂API需要傳遞音樂類型參數(shù)，而這些參數(shù)是存在musictype.json中，現(xiàn)在在組件listcate.vue需要獲取json數(shù)據(jù)，如何實現(xiàn)呢，下面小編給大家?guī)砹薞ue中如何獲取json文件中的數(shù)據(jù)，感興趣的朋友一起看看吧2022-09-09
這篇文章主要介紹了vuex Module將 store 分割成模塊，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)web在線聊天功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
關(guān)于nuxt?store中保存localstorage的問題
這篇文章主要介紹了關(guān)于nuxt?store中保存localstorage的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue.js結(jié)合SortableJS實現(xiàn)樹形數(shù)據(jù)拖拽
本文主要介紹了Vue.js結(jié)合SortableJS實現(xiàn)樹形數(shù)據(jù)拖拽，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
vue中el-select中多選回顯數(shù)據(jù)后沒法重新選擇和更改的解決
本文主要介紹了vue中el-select中多選回顯數(shù)據(jù)后沒法重新選擇和更改解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-01-01