詳解.vue文件中style標簽的幾個標識符

$style配合<module>如何工作

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

在<style>中使用一個module屬性, 可以形成名為$style的計算屬性從而在節點中動態綁定樣式.

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

形成的計算屬性可以綁定: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的作用域是如何的

當<style></style>標簽有scoped屬性的時候, 他的css樣式只作用在當前作用域

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

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

v-html動態生成的樣式不受作用域內樣式影響, 但我想應該加個類樣式名稱,可以解決.(未驗證)

css的作用域的渲染方式, 遠不如class的渲染速度

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

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

解決過程

使用scopedSlots解決

添加scoped之后, 在子組件上面添加類樣式名, 發現并沒有卵用

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

沒有找到需要注入到里面的條件, 發現自己前面大部分的判斷都是錯誤的.

解決方案一: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>

總結

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com