使用vue深度選擇器修改ElementUI組件內(nèi)樣式的示例代碼
更新時間：2022年12月07日 14:18:08 作者：喵醬愛吃魚
在帶有scoped屬性的style中書寫樣式時，無法作用影響到子組件中的樣式，此時我們會使用到deep深度選擇器，來解決此問題，我們在使用less預(yù)處理器，能正常使用，但是在scss預(yù)處理器中會報(bào)錯，下面通過本文介紹vue深度選擇器修改ElementUI組件內(nèi)樣式,需要的朋友可以參考下
例子：el-collapse標(biāo)簽修改子組件樣式
在帶有scoped屬性的style中書寫樣式時，無法作用影響到子組件中的樣式，此時我們會使用到deep深度選擇器，來解決此問題，我們在使用less預(yù)處理器，能正常使用，但是在scss預(yù)處理器中會報(bào)錯。
<style lang="scss" scoped>
.collapse1 {
/deep/ .el-collapse-item__content {
padding: 0px 5%;
background: #fff;
}
/deep/ .el-collapse-item__header {
padding: 0px 5%;
background: #fff;
}
}
</style>scss使用：
<style lang="scss" scoped>
.collapse1 {
::v-deep .el-collapse-item__content {
padding: 0px 5%;
background: #fff;
}
::v-deep .el-collapse-item__header {
padding: 0px 5%;
background: #fff;
}
}
</style>注意：在vue中，>>>是深度選擇器，可以作用到子組件中的樣式，/deep/和::v-deep都是>>>的別名，在scss中不識別/deep/, 可以使用::v-deep
<-- 放上去就行了 -->
<el-collapse class="collapse1" v-model="...">
<el-collapse-item v-for="(item,index) in ..." :name="index">
<template slot="title">
{{ item.... }}{{ index }}
</template>
</el-collapse-item>
</el-collapse>注：el-collapse-item__header等類名在瀏覽器開發(fā)者工具中的Elements找到
vue使用element ui
第一步：
npm install element-ui --save
第二步：
主要代碼（安裝完成后在 main.js 添加全局引用）：
import ElementUI from "element-ui"; import "element-ui/lib/theme-chalk/index.css"; Vue.use(ElementUI);
第三步：
element ui官網(wǎng)找組件引用。
到此這篇關(guān)于使用vue深度選擇器修改ElementUI組件內(nèi)樣式的文章就介紹到這了,更多相關(guān)vue修改ElementUI組件內(nèi)樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vant時間控件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
TinyMCE 是一款功能強(qiáng)大的富文本編輯器,廣泛應(yīng)用于各種 Web 應(yīng)用中,本文將詳細(xì)介紹如何在 Vue 項(xiàng)目中集成 TinyMCE,通過詳盡的步驟說明、示例代碼展示以及豐富的配置選項(xiàng),助力開發(fā)者輕松實(shí)現(xiàn)內(nèi)容編輯的增強(qiáng)與美化,需要的朋友可以參考下2024-11-11
vue: WebStorm設(shè)置快速編譯運(yùn)行的方法
今天小編就為大家分享一篇vue: WebStorm設(shè)置快速編譯運(yùn)行的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
今天小編就為大家分享一篇vuex直接賦值的三種方法總結(jié)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
基于vue項(xiàng)目設(shè)置resolves.alias: ''@''路徑并適配webstorm
這篇文章主要介紹了基于vue項(xiàng)目設(shè)置resolves.alias: '@'路徑并適配webstorm,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12
這篇文章主要為大家詳細(xì)介紹了基于Vue方法實(shí)現(xiàn)簡單計(jì)時器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
使用vue-cli4.0快速搭建一個項(xiàng)目的方法步驟
這篇文章主要介紹了使用vue-cli4.0快速搭建一個項(xiàng)目的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
本文給大家詳細(xì)介紹了Mac下安裝vue的方法，本文圖文并茂給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-04-04
最近在學(xué)vue,試著寫個單頁應(yīng)用,在寫組件,拆分組件時遇到一些困惑,下面這篇文章主要給大家介紹了關(guān)于vue中拆分組件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
vue3+vite+axios?配置連接后端調(diào)用接口的實(shí)現(xiàn)方法
這篇文章主要介紹了vue3+vite+axios?配置連接后端調(diào)用接口的實(shí)現(xiàn)方法，在vite.config.ts文件中添加配置，本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12