.vue文件中style標籤的幾個標識符

時間 2019-12-01

標籤 vue 文件 style 標籤幾個標識符简体版

原文原文鏈接

本人全部文章首發在博客園: www.cnblogs.com/zhangrunhao…css

問題背景

在人生就要絕望的時候, 被編輯器所提示的一個scopedSlots所拯救. 臥槽, 寫到最後才發現這個屬性的具體卵用. 詳情見最後解決辦法.html

問題由來

項目中使用了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

vue-laoder會解析組件, 提取語言塊. 在須要的時候, 通過其餘的loader處理, 最後組裝成一個commonjs模塊.
- 其實就是export default出來一個對象 而後呢, 上面的<template>, 掛載在 這個對象的template屬性上
- 以前, 直接import引近來一些樣式文件也是可行的, 但當時並未思考這些標識如何實現.
<style>能夠有module和scoped屬性, 來將樣式封裝到組件中. 具備不一樣封裝模式的多個<style>標籤, 能夠在一個組件中混合使用
默認狀況下, style-loader會提取內容, 並經過<style>標籤, 加入到文檔的<head>中. 也能夠經過配置webpack造成單個.css文件.

`$style`配合`<module>`如何工做

參考: vue-loader-v14.vuejs.org/zh-cn/featu…webpack

在<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)進行訪問web
可使用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了.less

添加`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支持.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

.vue文件中style標籤的幾個標識符

問題背景

問題由來

陷入點

問題詳解

認識.vue的<style>標籤

$style配合<module>如何工做

scoped的做用域是如何的

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

解決過程

使用scopedSlots解決

添加scoped以後, 在子組件上面添加類樣式名, 發現並無卵用

解決方案一: scoped方案

解決方案二: module方案

總結

認識`.vue`的`<style>`標籤

`$style`配合`<module>`如何工做

`scoped`的做用域是如何的

使用`scopedSlots`解決

添加`scoped`以後, 在子組件上面添加類樣式名, 發現並無卵用

解決方案一: `scoped`方案

解決方案二: `module`方案