[筆記] 當在 Vue 中不得不用全局樣式時...

有時候基於 Vue 的單文件組件開發項目時, 不得不使用全局樣式, 這時有一些須要注意的地方.

當遇到須要使用全局樣式時, 下列幾種狀況

• 樣式在項目各處均有使用;
• 樣式只在當前組件內的 DOM 上使用;
• 樣式須要應用到當前組件 DOM 的外部 DOM;

下面詳細記錄一下須要注意的問題:

樣式在項目各處均有使用

若是樣式須要在項目各處均有使用, 例如: reset.css, tiny-trim.css 等等.
這時推薦在項目入口文件中直接導入樣式文件:

// src/main.js
import 'tiny-trim.css'
import 'asset/reset.css'
import 'asset/global.css'

固然, 也能夠在頂層組件中沒有設置 scoped 屬性的 style 標籤中導入:

@import url(asset/reset.css);
@import url(asset/global.css);

樣式只在當前組件內的 DOM 上使用

當使用一些第三方 UI 庫時, 有一些 UI 庫生成的 DOM 在 template 中並不能直接添加 class 或 style 來修改第三方 UI 庫的組件樣式, 這時咱們能夠經過當前組件沒有 scoped 屬性的 style 標籤來添加全局樣式.

但此時須要考慮一些問題:

• 這個樣式應該隻影響當前組件內第三方 UI 庫渲染出來的 DOM
• 由於 DOM 不在 template 標籤裏 (DOM 由第三方 UI 庫的 JS 在瀏覽器加載時構建或在編譯打包過程當中生成), 不能直接設置 class 或 style 來修改樣式, 故只能使用沒有 scoped 屬性的 style 標籤

能夠看出兩點是有必定矛盾的. 不過能夠採用以下方法解決或緩解:

1. 爲當前組件根元素設置自定義 data 屬性

   <!-- src/components/MyComponent.vue -->
   <template>
     <div class="my-component" data-custom-mycomponent>
       <!-- ... -->
     </div>
   </tempalte>

2. 在沒有 scoped 屬性的 style 標籤中使用自定義 data 屬性限定樣式做用域

   .my-component[data-custom-mycomponent] {
       // ...
     }

   這裏推薦使用 Less 或 Sass, 嵌套語法能減小許多代碼冗餘.

樣式須要應用到當前組件 DOM 的外部 DOM

這種狀況主要是針對上一種狀況的補充, 有時候第三方 UI 庫生成的 DOM 節點並不在當前組件的 DOM 內, 可能渲染到 body 中 (如 dialog, tooltip, message 等).

這些渲染到當前組件 DOM 以外的組件, 須要在上一種狀況的處理基礎上, 爲它們的頂層元素再設置一個自定義的 data 屬性:

<!-- src/components/MyComponent.vue -->
  <template>
    <div class="my-component" data-custom-mycomponent>
      <!-- message 組件的 DOM 將被渲染到 body 中, 而不是當前組件 .my-component 中 -->
      <message
        class="my-component-message"
        msg="You got a message! "
        data-custom-mycomponent-message />
    </div>
  </tempalte>

.my-component[data-custom-mycomponent] {
    // ...
  }
  .my-component-message[data-custom-mycomponent-message] {
    // ...
  }

-EOF

原文: [筆記] 當在 Vue 中不得不用全局樣式時...