有时候基于 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 中不能不必全局款式时…