element?el-tooltip實(shí)現(xiàn)自定義修改樣式
先粘一張官方給出的UI樣式
關(guān)于UI框架，用起來(lái)雖然很方便，但是樣式卻和所需的不一樣，那么該如何修改成自己想要的樣式呢？
在粘一張我自己修改后的樣式圖
不僅修改了button的背景色、文字顏色，更修改了上方提示氣泡的背景色
官方api里沒(méi)有看到如何修改button樣式,所以我修改的方式就是在使用組件的地方，寫(xiě)行內(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提示的樣式，就遇到了一些小問(wèn)題
- 第一就是沒(méi)找到該dom
- 找到dom，就不知該如何修改
剛開(kāi)始，在使用el-tooltip的地方，本以為直接查看元素就能找到dom節(jié)點(diǎn)，但是有些想當(dāng)然了。在查閱一番資料文獻(xiàn)之后，才發(fā)現(xiàn)，其實(shí)這個(gè)組件的層級(jí)，并不是在你使用他的地方，而是和你的app同一層級(jí)，所以在當(dāng)前使用的地方找不到tip提示的dom節(jié)點(diǎn)
既然找到了，那就應(yīng)該能夠修改了吧？非也
根據(jù)官方定義使用的className名 el-tooltip__popper可以修改掉上方tip提示泡的背景色，但是下方的箭頭卻沒(méi)修改成功，修改他的className也并沒(méi)有效果
.el-tooltip__popper{
background: rgba(0,0,0,0.65) !important;
}如果箭頭的樣式與tip提示的樣式不一樣，還不如不進(jìn)行修改，不然會(huì)顯得很突兀。再次查閱資料之后，發(fā)現(xiàn)可以修改箭頭樣式的方法，實(shí)際操作之后發(fā)現(xiàn)有效，代碼如下：
.el-tooltip__popper[x-placement^=top] .popper__arrow:after{
border-top-color: #595959 !important;
}需要注意的就是，該代碼片段，需要寫(xiě)在根文件的style里，如果寫(xiě)在當(dāng)前文件里也并非不可，但是需要將scope取消掉，原因在上方已闡述過(guò)一次。
該組件的層級(jí)不在于你使用的地方，它與跟文件屬于統(tǒng)一層級(jí)
到此這篇關(guān)于element el-tooltip實(shí)現(xiàn)自定義修改樣式的文章就介紹到這了,更多相關(guān)element el-tooltip修改樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vant 中的Toast設(shè)置全局的延遲時(shí)間操作
這篇文章主要介紹了Vant 中的Toast設(shè)置全局的延遲時(shí)間操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要為大家詳細(xì)介紹了Vue自嵌套樹(shù)組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue.js-div滾動(dòng)條隱藏但有滾動(dòng)效果的實(shí)現(xiàn)方法
下面小編就為大家分享一篇vue.js-div滾動(dòng)條隱藏但有滾動(dòng)效果的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
簡(jiǎn)單方法實(shí)現(xiàn)Vue?無(wú)限滾動(dòng)組件示例
這篇文章主要為大家介紹了簡(jiǎn)單方法實(shí)現(xiàn)Vue?無(wú)限滾動(dòng)組件示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
vue3?process.env.XXX環(huán)境變量不生效的解決方法
這篇文章主要給大家介紹了關(guān)于vue3?process.env.XXX環(huán)境變量不生效的解決方法,通過(guò)文中介紹的方法可以很方便的解決遇到的問(wèn)題,對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
Vue-drag-resize 拖拽縮放插件的使用(簡(jiǎn)單示例)
本文通過(guò)代碼給大家介紹了Vue-drag-resize 拖拽縮放插件使用簡(jiǎn)單示例,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
如果你也和我一樣，按照正常的流程下載并且配置了stylus，但是依舊報(bào)錯(cuò)，也許這篇文章就是你的菜，一起來(lái)看看吧2022-08-08
Vue中判斷語(yǔ)句與循環(huán)語(yǔ)句基礎(chǔ)用法及v-if和v-for的注意事項(xiàng)詳解
在Vue指令中,最經(jīng)常被用于做邏輯操作的指令,下面這篇文章主要給大家介紹了關(guān)于Vue中判斷語(yǔ)句與循環(huán)語(yǔ)句基礎(chǔ)用法及v-if和v-for注意事項(xiàng)的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
vue基于Element按鈕權(quán)限實(shí)現(xiàn)方案
這篇文章主要介紹了vue基于Element按鈕權(quán)限實(shí)現(xiàn)方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
在vue中，子組件如果想修改父組件的變量，一般做法是通過(guò)綁定事件的方法，父組件向子組件傳遞修改變量的方法，子組件觸發(fā)修改變量的方法執(zhí)行，這種方式中規(guī)中矩；另一種方法是使用sync修飾符，此方法可以減少很多代碼量2022-08-08