国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

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

2019-11-19 13:28:50
字體:
來源:轉載
供稿:網友

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

在人生就要絕望的時候, 被編輯器所提示的一個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>如何工作

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

<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>只有modulescoped, 沒有其他取巧方案
  • module形成一個代表屬性的計算屬性, 默認名稱為$style, 其中的:global()可以進行這個區域下面的所有元素的選擇.
  • scoped形成的作用域, 可以通過>>>來進行子組件的樣式覆蓋, 帶只要原生的css支持.

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 东平县| 海兴县| 台安县| 怀仁县| 嘉鱼县| 大余县| 四子王旗| 石林| 合江县| 昌宁县| 贞丰县| 泰安市| 犍为县| 抚宁县| 咸宁市| 清原| 龙里县| 甘南县| 沭阳县| 罗甸县| 通化市| 岑巩县| 灵石县| 平陆县| 偏关县| 上栗县| 全南县| 化德县| 额济纳旗| 五常市| 鸡泽县| 新源县| 湄潭县| 济宁市| 庆元县| 松桃| 宜兰市| 松原市| 二连浩特市| 太保市| 巴青县|