使用vue深度選擇器修改ElementUI組件內(nèi)樣式的示例代碼
更新時間：2022年12月07日 14:18:08 作者：喵醬愛吃魚
在帶有scoped屬性的style中書寫樣式時，無法作用影響到子組件中的樣式，此時我們會使用到deep深度選擇器，來解決此問題，我們在使用less預處理器，能正常使用，但是在scss預處理器中會報錯，下面通過本文介紹vue深度選擇器修改ElementUI組件內(nèi)樣式,需要的朋友可以參考下
例子：el-collapse標簽修改子組件樣式
在帶有scoped屬性的style中書寫樣式時，無法作用影響到子組件中的樣式，此時我們會使用到deep深度選擇器，來解決此問題，我們在使用less預處理器，能正常使用，但是在scss預處理器中會報錯。
<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)找組件引用。
到此這篇關于使用vue深度選擇器修改ElementUI組件內(nèi)樣式的文章就介紹到這了,更多相關vue修改ElementUI組件內(nèi)樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了vant時間控件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
TinyMCE 是一款功能強大的富文本編輯器,廣泛應用于各種 Web 應用中,本文將詳細介紹如何在 Vue 項目中集成 TinyMCE,通過詳盡的步驟說明、示例代碼展示以及豐富的配置選項,助力開發(fā)者輕松實現(xiàn)內(nèi)容編輯的增強與美化,需要的朋友可以參考下2024-11-11
今天小編就為大家分享一篇vue: WebStorm設置快速編譯運行的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
今天小編就為大家分享一篇vuex直接賦值的三種方法總結(jié)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
基于vue項目設置resolves.alias: ''@''路徑并適配webstorm
這篇文章主要介紹了基于vue項目設置resolves.alias: '@'路徑并適配webstorm,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-12-12
這篇文章主要為大家詳細介紹了基于Vue方法實現(xiàn)簡單計時器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了使用vue-cli4.0快速搭建一個項目的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
本文給大家詳細介紹了Mac下安裝vue的方法，本文圖文并茂給大家介紹的非常詳細,需要的朋友可以參考下2018-04-04
最近在學vue,試著寫個單頁應用,在寫組件,拆分組件時遇到一些困惑,下面這篇文章主要給大家介紹了關于vue中拆分組件的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
vue3+vite+axios?配置連接后端調(diào)用接口的實現(xiàn)方法
這篇文章主要介紹了vue3+vite+axios?配置連接后端調(diào)用接口的實現(xiàn)方法，在vite.config.ts文件中添加配置，本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2022-12-12