elementui的el-popover修改樣式不生效的解決
在使用element-ui的時(shí)候，有一個(gè)常用的組件，那就是el-popover，但是element-ui官方文檔中樣式跟用法都比較局限，在使用時(shí)都需要改動(dòng)樣式
項(xiàng)目中使用了el-popover，但是想修改一下樣式，一直不成功，先來(lái)看一下官方文檔怎么說(shuō)的
添加一個(gè)類名，string類型，ok，添加一個(gè)
<el-popover
placement="right"
width="400"
trigger="hover"
popper-class="my-popover"
>
去設(shè)置樣式
<style lang="scss" scoped>
.my-popover{
padding:20px;
}
</style>
結(jié)果就是沒有設(shè)置成功！
是不是因?yàn)閟coped，不加scoped再試一下！
<style>
my-popover{
padding:10px 30px;
}
</style>
還是沒有效果?。。?br />
經(jīng)過瘋狂試驗(yàn)以及網(wǎng)上搜索！
最終寫法是這樣,.el-popover.my-popover 這種格式，前綴是.el-popover ，不然不生效。且不能加上scoped
<style>
.el-popover.my-popover{
padding:10px 30px;
}
</style>
修改成功！
到此這篇關(guān)于elementui的el-popover修改樣式不生效的解決的文章就介紹到這了,更多相關(guān)el-popover 樣式不生效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-cli3項(xiàng)目在IE瀏覽器打開兼容問題及解決
這篇文章主要介紹了vue-cli3項(xiàng)目在IE瀏覽器打開兼容問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue中axios的get請(qǐng)求和post請(qǐng)求的傳參方式、攔截器示例代碼
Post是向服務(wù)器提交數(shù)據(jù)的一種請(qǐng)求,get是向服務(wù)器發(fā)索取數(shù)據(jù)的一種請(qǐng)求,post在真正接受數(shù)據(jù)之前會(huì)先將請(qǐng)求頭發(fā)送給服務(wù)器進(jìn)行確認(rèn),然后才真正發(fā)送數(shù)據(jù),本文給大家介紹vue中axios的get請(qǐng)求和post請(qǐng)求的傳參方式、攔截器示例代碼,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了Vue中使用h5 Plus的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
使用Vue做一個(gè)簡(jiǎn)單的todo應(yīng)用的三種方式的示例代碼
這篇文章主要介紹了使用Vue做一個(gè)簡(jiǎn)單的todo應(yīng)用的三種方式的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-10-10
vue的rules驗(yàn)證部分可以部分又失效的原因及解決方案
vue的rules驗(yàn)證失效,部分可以部分又失效,很多百度都有,但是我這里遇到了一個(gè)特別的,那就是prop沒有寫全,導(dǎo)致驗(yàn)證某一個(gè)失效,接下來(lái)就跟小編一起來(lái)看看這個(gè)失效的原因和解決方案吧2023-11-11
Vue讓router-view默認(rèn)顯示頁(yè)面操作方法
一個(gè)home頁(yè)面,點(diǎn)擊左邊的菜單欄,右邊顯示頁(yè)面,因此都知道在右邊放一個(gè)router-view然后配置路由即可,然而問題出現(xiàn)在：重新打開的時(shí)候,默認(rèn)是白色空的,遇到這樣的問題如何解決呢,下面小編給大家分享Vue讓router-view默認(rèn)顯示頁(yè)面操作方法,感興趣的朋友一起看看吧2024-03-03
vue3+element-plus?Dialog對(duì)話框的使用與setup?寫法的用法
這篇文章主要介紹了vue3+element-plus?Dialog對(duì)話框的使用?與?setup?寫法的使用,本文通過兩種方式結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
KeepAlive 是 vue 中的內(nèi)置組件，當(dāng)多個(gè)組件動(dòng)態(tài)切換時(shí)可以對(duì)實(shí)例狀態(tài)進(jìn)行緩存，本文就來(lái)詳細(xì)的介紹一下Vue中KeepAlive內(nèi)置緩存使用，感興趣的可以了解一下2023-10-10
本篇文章主要介紹了Vue常用指令_V-model用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-03-03
vue學(xué)習(xí)筆記之Vue中css動(dòng)畫原理簡(jiǎn)單示例
這篇文章主要介紹了vue學(xué)習(xí)筆記之Vue中css動(dòng)畫原理,結(jié)合簡(jiǎn)單實(shí)例形式分析了Vue中css樣式變換動(dòng)畫效果實(shí)現(xiàn)原理與相關(guān)操作技巧,需要的朋友可以參考下2020-02-02