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