Vue使用Elementui修改預設最快方法!

2022-08-22 09:24:11 字數 930 閱讀 6108

相信大家都需要過,在vue中使用elementui的時候,遇到最多也最蛋疼的問題就是修改預設樣式,接下來直奔主題;

//

template

progress

:text-inside="

true

":stroke-width="26"

:percentage="70"

>

預設樣式

方法1

1、找預設新增的類名

2、去掉scoped,scoped是vue是限制獨立元件中的css樣式不被溢位到全域性使用!

//

style

.el-progress-bar__inner

//這兩種酌情使用。

.el-progress-bar__inner

//!important是css選擇器中的屬性,預設權重無線大!

總結:這種方法會生效,但是會影響到全域性;

方法2,

使用vue中的深度作用域選擇器!這個符號哦>>>

總結:使用vue的深度選擇器,就可以完美的解決!

注意:有些像 sass 之類的預處理器無法正確解析>>>。這種情況下你可以使用/deep/::v-deep操作符取而代之——兩者都是>>>的別名,同樣可以正常工作。

VUE全域性使用element ui元件

npm i element ui s import elementui from element ui import element ui lib theme default index.css vue.use elementui 搜尋 過程中遇到乙個bug import element ui li...

Vue中elementUI的使用

官方文件 npm安裝 npm i element ui s在vue中進行引入 在main.js中 import vue from vue import router from router import elementui from element ui import element ui lib ...

在vue中使用element ui

目錄 封裝element ui 1.完整引入element ui外掛程式 2.按需引入 03 需要在main.js中匯入一下 04 在頁面中使用 封裝的下拉多選元件 安裝element ui npm install element ui import elementui from element u...