elementui的el-popover修改樣式不生效的解決
更新時間：2021年06月30日 16:03:42 作者：愛喝冬瓜湯的外星人
在使用element-ui的時候，有一個常用的組件，那就是el-popover，本文就介紹一下elementui的el-popover修改樣式不生效的解決方法，感興趣的可以了解一下
在使用element-ui的時候，有一個常用的組件，那就是el-popover，但是element-ui官方文檔中樣式跟用法都比較局限，在使用時都需要改動樣式
項(xiàng)目中使用了el-popover，但是想修改一下樣式，一直不成功，先來看一下官方文檔怎么說的
添加一個類名，string類型，ok，添加一個
<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>
還是沒有效果?。?！
經(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
element?實(shí)現(xiàn)導(dǎo)航欄收起展開功能及思路
這篇文章主要介紹了element?實(shí)現(xiàn)導(dǎo)航欄收起展開功能，實(shí)現(xiàn)思路先給 el-menu加上 :collapse="isCollapse" 屬性，這個屬性也是 element 上的一個參數(shù)，意思為是否開啟折疊動畫，在 data 中定義 isCollapse ，用 true 和 false 控制展開與收起，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue中如何動態(tài)拼接this后面的變量問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
今天小編就為大家分享一篇vue 解決遍歷對象顯示的順序不對問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue中使用geobuf的示例詳細(xì)，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-04-04
頁面內(nèi)容太多會導(dǎo)致加載速度過慢,這時可考慮使用滾動加載即還沒有出現(xiàn)在可視范圍內(nèi)的內(nèi)容塊先不加載,出現(xiàn)后再加載,所以本文給大家介紹了基于vue實(shí)現(xiàn)頁面滾動加載的示例,需要的朋友可以參考下2024-01-01
Vue3中Transition和TransitionGroup組件的使用及說明
本文將深入探討這兩個組件的作用,以及如何在實(shí)際項(xiàng)目中靈活運(yùn)用它們,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
Vue.js實(shí)現(xiàn)點(diǎn)擊左右按鈕圖片切換
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)點(diǎn)擊左右按鈕圖片切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
vue.js?自定義指令（拖拽、拖動、移動）?指令?v-drag詳解
這篇文章主要介紹了vue.js?自定義指令（拖拽、拖動、移動）?指令?v-drag,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
對于日常使用vue3開發(fā)項(xiàng)目的前端小伙伴來說,組件通信方式可以說是必會的基本功,今天帶大家一起盤下vue3中的14種通信方式,希望對大家有所幫助2025-01-01
Vue3中各種靈活傳遞數(shù)據(jù)的方式小結(jié)
Vue 3 提供了多種數(shù)據(jù)傳遞的方式,讓我們的組件之間可以盡情地交流,接下來,我們就直接一個個來看,這些方式都是怎么工作的,感興趣的小伙伴跟著小編一起來看看吧2024-07-07