詳解.vue文件中style標(biāo)簽的幾個(gè)標(biāo)識(shí)符

$style配合<module>如何工作

參考: https://vue-loader-v14.vuejs.org/zh-cn/features/css-modules.html

在<style>中使用一個(gè)module屬性, 可以形成名為$style的計(jì)算屬性從而在節(jié)點(diǎn)中動(dòng)態(tài)綁定樣式.

<span :class="$style.text">
 ...
</span>

形成的計(jì)算屬性可以綁定:class的object/array語法.

<span :class="{[$style.red] : isRed}">
 測試
</span>
<script>
 data() {
 return {
 entries: [],
 isRed: true,
 };
 },
</script>
<style module>
 .red {
 color: red;
 }
</style>

<div :class="aaa.root">
</div>
<style lang="less" module="aaa">
</style>

scoped的作用域是如何的

當(dāng)<style></style>標(biāo)簽有scoped屬性的時(shí)候, 他的css樣式只作用在當(dāng)前作用域

使用了scoped之后, 父組件的樣式不會(huì)再深入到自組件.

深度作用選擇器: >>> 或者是 /deep/

v-html動(dòng)態(tài)生成的樣式不受作用域內(nèi)樣式影響, 但我想應(yīng)該加個(gè)類樣式名稱,可以解決.(未驗(yàn)證)

css的作用域的渲染方式, 遠(yuǎn)不如class的渲染速度

遞歸組件中, 小心使用CSS樣式.

element中樣式的混入方式 (todo)

解決過程

使用scopedSlots解決

添加scoped之后, 在子組件上面添加類樣式名, 發(fā)現(xiàn)并沒有卵用

錯(cuò)誤依舊: 只是在表面層上的有一些data-v的注入

沒有找到需要注入到里面的條件, 發(fā)現(xiàn)自己前面大部分的判斷都是錯(cuò)誤的.

解決方案一:scoped方案

<style scoped>

.main_nav .el-menu .el-submenu >>> .el-submenu__title {
 background-color: red;
}
</style>

解決方案二: module方案

<style lang="less" module="aaa">
.red {
 .item {
 :global(.el-submenu__title) {
 background: red;
 }
 }
}
</style>

總結(jié)

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com