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