本人所有文章首發在部落格園: www.cnblogs.com/zhangrunhao…
問題背景
在人生就要絕望的時候, 被編輯器所提示的一個
scopedSlots
所拯救. 臥槽, 寫到最後才發現這個屬性的具體卵用. 詳情見最後解決辦法.
問題由來
- 專案中使用了elementUI框架, 與
.vue
檔案. - 現狀:
<template>
中使用$style:[類名]
,<style module>
進行了樣式的繫結. - 個人認為使用$style這種方式的繫結, 寫起來很麻煩.
- 不僅僅是麻煩更重要的是, 沒有辦法直接影響和修改element中的樣式.
<template>
<span :class="$style.text">
...
</span>
</template>
<style module>
.text {}
</style>
複製程式碼
陷入點
- 不知道清楚再style中使用了
module
這個屬性的具體含義 - dev啟動環境下, 使用
scoped
形成獨立作用域後, 並不能影響到elemnt中元件的樣式. - 使用
scopedSlots
標識style標籤後, 解決問題. 但出現 dev環境正常, 部署後, 不起作用
問題詳解
認識.vue
的<style>
標籤
這應該是關係到,
vue-loader
這個webpack的外掛
vue-laoder
會解析元件, 提取語言塊. 在需要的時候, 經過其他的loader處理, 最後組裝成一個commonjs模組.- 其實就是
export default出來一個物件
然後呢, 上面的<template>
, 掛載在這個物件的template屬性上
- 之前, 直接import引近來一些樣式檔案也是可行的, 但當時並未思考這些標識如何實現.
- 其實就是
<style>
可以有module和scoped屬性, 來將樣式封裝到元件中. 具有不同封裝模式的多個<style>
標籤, 可以在一個元件中混合使用- 預設情況下,
style-loader
會提取內容, 並通過<style>
標籤, 加入到文件的<head>
中. 也可以通過配置webpack形成單個.css檔案.
$style
配合<module>
如何工作
- 在
<style>
中使用一個module
屬性, 可以形成名為$style
的計算屬性 - 從而在節點中動態繫結樣式.
<span :class="$style.text">
...
</span>
複製程式碼
- 形成的計算屬性可以繫結:class的object/array語法.
- 在html中 class繫結的事一個object語法.
- 如果在data上面的
isRed
這個屬性是true
的話, 就會新增上red
這個屬性名 - 從而形成了一個屬性控制
<span :class="{[$style.red] : isRed}">
測試
</span>
<script>
data() {
return {
entries: [],
isRed: true,
};
},
</script>
<style module>
.red {
color: red;
}
</style>
複製程式碼
-
可以在js中通過
console.log(this.$style.red)
進行訪問 -
可以使用
module=''
來更改$style
這個名稱
<div :class="aaa.root">
</div>
<style lang="less" module="aaa">
</style>
複製程式碼
scoped
的作用域是如何的
- 當
<style></style>
標籤有scoped
屬性的時候, 他的css樣式只作用在當前作用域 - 使用了
scoped
之後, 父元件的樣式不會再深入到自元件.- 不過子元件的根節點同時受到 父元件有作用域的CSS 和 子元件有作用域的影響
- 但是有一點: 如果我們在子元件上面新增了一個類樣式 就能向下一層層的進行修改
- 深度作用選擇器:
>>>
或者是/deep/
- 已驗證: 在less下面不起作用
- 已驗證: 在普通的css下才起作用.
- 據網上說,
stylus
起作用,scss
不起作用, 並未驗證
v-html
動態生成的樣式不受作用域內樣式影響, 但我想應該加個類樣式名稱,可以解決.(未驗證)- css的作用域的渲染方式, 遠不如class的渲染速度
- 遞迴元件中, 小心使用CSS樣式.
element中樣式的混入方式 (todo)
- 通過打包進行樣式的使用, 故使用方式在
build
的資料夾中 - 樣式目錄為:
element/packages/theme-chalk/src/menu.scss
, 以方便後期的具體檢視
解決過程
使用scopedSlots
解決
我擦哦, 再次測試後, 發現新增
scopedSlots
並沒有什麼卵用, 和什麼都不寫是他媽一個樣子啊.. 我說怎麼, 怎麼查了半天, 也沒人用. 還被這玩意所拯救, 也真是夠了.. 當時還驕傲了半天, 還以為是發現了新天地, 也真是6了.
新增scoped
之後, 在子元件上面新增類樣式名, 發現並沒有卵用
-
錯誤依舊: 只是在表面層上的有一些data-v的注入
-
沒有找到需要注入到裡面的條件, 發現自己前面大部分的判斷都是錯誤的.
解決方案一: scoped
方案
- 將無法進行樣式覆蓋的部分拿出來
- 使用原生的css樣式, 新增scoped
- 使用
>>>
語法糖進行樣式的注入
<style scoped>
.main_nav .el-menu .el-submenu >>> .el-submenu__title {
background-color: red;
}
</style>
複製程式碼
解決方案二: module
方案
- 使用module進行屬性的選擇
- 然後是用
:global()
進行這個屬性下面的全部選擇 - 進而選中這個沒有在作用域下面但是可以選擇到的元素
- 個人始終認為這種選擇方案, 可以做到css作用域的區分, 但是, 並不靈活
- 具體的以後再分析
<style lang="less" module="aaa">
.red {
.item {
:global(.el-submenu__title) {
background: red;
}
}
}
</style>
複製程式碼
總結
- .vue檔案中的
<style></style>
只有module
和scoped
, 沒有其他取巧方案 module
形成一個代表屬性的計算屬性, 預設名稱為$style
, 其中的:global()
可以進行這個區域下面的所有元素的選擇.scoped
形成的作用域, 可以通過>>>
來進行子元件的樣式覆蓋, 帶只要原生的css支援.