詳解.vue文件中style標簽的幾個標識符
.vue文件中style標簽的幾個標識符
在人生就要絕望的時候, 被編輯器所提示的一個scopedSlots所拯救.
臥槽, 寫到最后才發(fā)現(xiàn)這個屬性的具體卵用. 詳情見最后解決辦法.
問題背景
問題由來
- 項目中使用了elementUI框架, 與.vue文件.
- 現(xiàn)狀: <template>中使用$style:[類名], <style module>進行了樣式的綁定.
- 個人認為使用$style這種方式的綁定, 寫起來很麻煩.
- 不僅僅是麻煩更重要的是, 沒有辦法直接影響和修改element中的樣式.
<template>
<span :class="$style.text">
...
</span>
</template>
<style module>
.text {}
</style>
陷入點
- 不知道清楚再style中使用了
module這個屬性的具體含義 - dev啟動環(huán)境下, 使用
scoped形成獨立作用域后, 并不能影響到elemnt中組件的樣式. - 使用
scopedSlots標識style標簽后, 解決問題. 但出現(xiàn) dev環(huán)境正常, 部署后, 不起作用
問題詳解
認識.vue的<style>標簽
這應該是關系到, vue-loader這個webpack的插件
vue-laoder會解析組件, 提取語言塊. 在需要的時候, 經(jīng)過其他的loader處理, 最后組裝成一個commonjs模塊.- 其實就是
export default出來一個對象然后呢, 上面的<template>, 掛載在這個對象的template屬性上 - 之前, 直接import引近來一些樣式文件也是可行的, 但當時并未思考這些標識如何實現(xiàn).
- 其實就是
<style>可以有module和scoped屬性, 來將樣式封裝到組件中. 具有不同封裝模式的多個<style>標簽, 可以在一個組件中混合使用- 默認情況下,
style-loader會提取內(nèi)容, 并通過<style>標簽, 加入到文檔的<head>中. 也可以通過配置webpack形成單個.css文件.
$style配合<module>如何工作
參考: https://vue-loader-v14.vuejs.org/zh-cn/features/css-modules.html
在<style>中使用一個module屬性, 可以形成名為$style的計算屬性從而在節(jié)點中動態(tài)綁定樣式.
<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之后, 父組件的樣式不會再深入到自組件.
- 不過子組件的根節(jié)點同時受到 父組件有作用域的CSS 和 子組件有作用域的影響
- 但是有一點: 如果我們在子組件上面添加了一個類樣式 就能向下一層層的進行修改
深度作用選擇器: >>> 或者是 /deep/
- 已驗證: 在less下面不起作用
- 已驗證: 在普通的css下才起作用.
- 據(jù)網(wǎng)上說,
stylus起作用,scss不起作用, 并未驗證
v-html動態(tài)生成的樣式不受作用域內(nèi)樣式影響, 但我想應該加個類樣式名稱,可以解決.(未驗證)
css的作用域的渲染方式, 遠不如class的渲染速度
遞歸組件中, 小心使用CSS樣式.
element中樣式的混入方式 (todo)
- 通過打包進行樣式的使用, 故使用方式在
build的文件夾中 - 樣式目錄為:
element/packages/theme-chalk/src/menu.scss, 以方便后期的具體查看
解決過程
使用scopedSlots解決
我擦哦, 再次測試后, 發(fā)現(xiàn)添加scopedSlots并沒有什么卵用, 和什么都不寫是他媽一個樣子啊.. 我說怎么, 怎么查了半天, 也沒人用.
還被這玩意所拯救, 也真是夠了..
當時還驕傲了半天, 還以為是發(fā)現(xiàn)了新天地, 也真是6了.
添加scoped之后, 在子組件上面添加類樣式名, 發(fā)現(xiàn)并沒有卵用
錯誤依舊: 只是在表面層上的有一些data-v的注入
沒有找到需要注入到里面的條件, 發(fā)現(xiàn)自己前面大部分的判斷都是錯誤的.
解決方案一:scoped方案
- 將無法進行樣式覆蓋的部分拿出來
- 使用原生的css樣式, 添加scoped
- 使用
>>>語法糖進行樣式的注入
<style scoped>
.main_nav .el-menu .el-submenu >>> .el-submenu__title {
background-color: red;
}
</style>
解決方案二: module方案
- 使用module進行屬性的選擇
- 然后是用:global()進行這個屬性下面的全部選擇
- 進而選中這個沒有在作用域下面但是可以選擇到的元素
- 個人始終認為這種選擇方案, 可以做到css作用域的區(qū)分, 但是, 并不靈活
- 具體的以后再分析
<style lang="less" module="aaa">
.red {
.item {
:global(.el-submenu__title) {
background: red;
}
}
}
</style>
總結
- .vue文件中的
<style></style>只有module和scoped, 沒有其他取巧方案 module形成一個代表屬性的計算屬性, 默認名稱為$style, 其中的:global()可以進行這個區(qū)域下面的所有元素的選擇.scoped形成的作用域, 可以通過>>>來進行子組件的樣式覆蓋, 帶只要原生的css支持.
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家介紹了vue組件historyApiFallback作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
Vue使用富文本編輯器Vue-Quill-Editor(含圖片自定義上傳服務、清除復制粘貼樣式等)
這篇文章主要介紹了Vue項目中使用富文本編輯器Vue-Quill-Editor(含圖片自定義上傳服務、清除復制粘貼樣式等)的相關知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
Vue 3 提供了多種數(shù)據(jù)傳遞的方式,讓我們的組件之間可以盡情地交流,接下來,我們就直接一個個來看,這些方式都是怎么工作的,感興趣的小伙伴跟著小編一起來看看吧2024-07-07
這篇文章主要為大家詳細介紹了一個可復用的vue分頁組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
本文將探討 Vue 版本升級后常見的不兼容問題,并提供相應的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
這篇文章主要為大家詳細介紹了Vuex實現(xiàn)計數(shù)器以及列表展示效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-03-03
本文主要介紹了element可編輯表格驗證問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
Vue移動端用淘寶彈性布局lib-flexible插件做適配的方法
這篇文章主要介紹了Vue移動端用淘寶彈性布局lib-flexible插件做適配的操作方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了vue-property-decorator的簡單知識,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue-router 組件的高級應用,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04