使用vue深度選擇器修改ElementUI組件內樣式的示例代碼
更新時間：2022年12月07日 14:18:08 作者：喵醬愛吃魚
在帶有scoped屬性的style中書寫樣式時，無法作用影響到子組件中的樣式，此時我們會使用到deep深度選擇器，來解決此問題，我們在使用less預處理器，能正常使用，但是在scss預處理器中會報錯，下面通過本文介紹vue深度選擇器修改ElementUI組件內樣式,需要的朋友可以參考下
例子：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官網找組件引用。
到此這篇關于使用vue深度選擇器修改ElementUI組件內樣式的文章就介紹到這了,更多相關vue修改ElementUI組件內樣式內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
javascript中Set、Map、WeakSet、WeakMap區(qū)別
這篇文章主要介紹了javascript中Set、Map、WeakSet、WeakMap區(qū)別,需要的朋友可以參考下2022-12-12
Spring Boot/VUE中路由傳遞參數(shù)的實現(xiàn)代碼
在路由時傳遞參數(shù)，一般有兩種形式，一種是拼接在url地址中，另一種是查詢參數(shù)。這篇文章主要介紹了Spring Boot/VUE中路由傳遞參數(shù),需要的朋友可以參考下2018-03-03
這篇文章主要介紹了詳解vue項目構建與實戰(zhàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了使用vue-upload上傳圖片的詳細使用說明，文中有相關的代碼示例供大家參考，感興趣的小伙伴一起跟著小編來學習吧2023-05-05
這篇文章主要介紹了Vue組件的繼承用法,本文通過實例代碼案例講解給大家介紹的非常詳細，需要的朋友可以參考下2022-08-08
本文主要介紹了el-tree文字顯示不全的解決辦法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要給大家介紹了關于vue打開其他項目頁面并傳入數(shù)據的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
這篇文章主要為大家詳細介紹了vue+elementui實現(xiàn)拖住滑塊拼圖驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了封裝Vue Element的table表格組件的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-08-08
這篇文章主要為大家詳細介紹了Vue.js下拉菜單組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10