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

發(fā)布時(shí)間：2020-08-26 10:05:09 來源：腳本之家閱讀：143 作者：JingLiii 欄目：web開發(fā)

.vue文件中style標(biāo)簽的幾個標(biāo)識符

在人生就要絕望的時(shí)候, 被編輯器所提示的一個scopedSlots所拯救.

臥槽, 寫到最后才發(fā)現(xiàn)這個屬性的具體卵用. 詳情見最后解決辦法.

問題背景

問題由來

項(xiàng)目中使用了elementUI框架, 與.vue文件.
現(xiàn)狀: <template>中使用$style:[類名], <style module>進(jìn)行了樣式的綁定.
個人認(rèn)為使用$style這種方式的綁定, 寫起來很麻煩.
不僅僅是麻煩更重要的是, 沒有辦法直接影響和修改element中的樣式.

<template>
 <span :class="$style.text">
  ...
 </span>
</template>
<style module>
 .text {}
</style>

陷入點(diǎn)

不知道清楚再style中使用了module這個屬性的具體含義
dev啟動環(huán)境下, 使用scoped形成獨(dú)立作用域后, 并不能影響到elemnt中組件的樣式.
使用scopedSlots標(biāo)識style標(biāo)簽后, 解決問題. 但出現(xiàn) dev環(huán)境正常, 部署后, 不起作用

問題詳解

認(rèn)識.vue的<style>標(biāo)簽

這應(yīng)該是關(guān)系到, vue-loader這個webpack的插件

vue-laoder會解析組件, 提取語言塊. 在需要的時(shí)候, 經(jīng)過其他的loader處理, 最后組裝成一個commonjs模塊.
- 其實(shí)就是export default出來一個對象 然后呢, 上面的<template>, 掛載在 這個對象的template屬性上
- 之前, 直接import引近來一些樣式文件也是可行的, 但當(dāng)時(shí)并未思考這些標(biāo)識如何實(shí)現(xiàn).
<style>可以有module和scoped屬性, 來將樣式封裝到組件中. 具有不同封裝模式的多個<style>標(biāo)簽, 可以在一個組件中混合使用
默認(rèn)情況下, style-loader會提取內(nèi)容, 并通過<style>標(biāo)簽, 加入到文檔的<head>中. 也可以通過配置webpack形成單個.css文件.

$style配合<module>如何工作

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

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

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

形成的計(jì)算屬性可以綁定: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)進(jìn)行訪問
可以使用module=''來更改$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之后, 父組件的樣式不會再深入到自組件.

不過子組件的根節(jié)點(diǎn)同時(shí)受到父組件有作用域的CSS 和子組件有作用域的影響
但是有一點(diǎn): 如果我們在子組件上面添加了一個類樣式就能向下一層層的進(jìn)行修改

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

已驗(yàn)證: 在less下面不起作用
已驗(yàn)證: 在普通的css下才起作用.
據(jù)網(wǎng)上說, stylus起作用, scss不起作用, 并未驗(yàn)證

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

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

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

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

通過打包進(jìn)行樣式的使用, 故使用方式在build的文件夾中
樣式目錄為: element/packages/theme-chalk/src/menu.scss, 以方便后期的具體查看

解決過程

使用scopedSlots解決

我擦哦, 再次測試后, 發(fā)現(xiàn)添加scopedSlots并沒有什么卵用, 和什么都不寫是他媽一個樣子啊.. 我說怎么, 怎么查了半天, 也沒人用.
還被這玩意所拯救, 也真是夠了..
當(dāng)時(shí)還驕傲了半天, 還以為是發(fā)現(xiàn)了新天地, 也真是6了.

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

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

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

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

解決方案一:scoped方案

將無法進(jìn)行樣式覆蓋的部分拿出來
使用原生的css樣式, 添加scoped
使用 >>> 語法糖進(jìn)行樣式的注入

<style scoped>

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

解決方案二: module方案

使用module進(jìn)行屬性的選擇
然后是用:global()進(jìn)行這個屬性下面的全部選擇
進(jìn)而選中這個沒有在作用域下面但是可以選擇到的元素
個人始終認(rèn)為這種選擇方案, 可以做到css作用域的區(qū)分, 但是, 并不靈活
具體的以后再分析

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

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

總結(jié)

.vue文件中的<style></style>只有module和scoped, 沒有其他取巧方案
module形成一個代表屬性的計(jì)算屬性, 默認(rèn)名稱為$style, 其中的:global()可以進(jìn)行這個區(qū)域下面的所有元素的選擇.
scoped形成的作用域, 可以通過>>>來進(jìn)行子組件的樣式覆蓋, 帶只要原生的css支持.

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽