快捷導(dǎo)航

Vue3新特性之在Composition API中使用CSS Modules

更新時(shí)間：2020年07月13日 10:25:07 作者：江米小棗tonylua

這篇文章主要介紹了Vue3新特性之在Composition API中使用CSS Modules,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

在 Vue 3 Composition API 最近的一次 beta 升級(jí)中，無(wú)論是 Vue 3 本 3 庫(kù) vue-next，還是面向 Vue 2 過(guò)渡用的 @vue/composition-api 庫(kù)中，都同步更新了一個(gè) useCSSModule 函數(shù) -- 用來(lái)在使用了 Composition API 的 Vue 實(shí)例中，支持 CSS Modules 語(yǔ)法。

首先來(lái)看看什么是 CSS Modules：

CSS Modules

CSS Modules 是一種 CSS 的模塊化和組合系統(tǒng)。vue-loader 集成 CSS Modules，可以作為模擬 scoped CSS 的替代方案。

啟用 CSS Modules

如果是使用 vue cli 創(chuàng)建的項(xiàng)目，應(yīng)該已經(jīng)默認(rèn)開啟了這一特性；如果項(xiàng)目中需要手動(dòng)開啟，按如下設(shè)置：

// webpack.config.js
{
 module: {
  rules: [
   // ... 其它規(guī)則省略
   {
    test: /\.css$/,
    use: [
     'vue-style-loader',
     {
      loader: 'css-loader',
      options: {
       // 開啟 CSS Modules
       modules: true,
       // 自定義生成的類名
       localIdentName: '[local]_[hash:base64:8]'
      }
     }
    ]
   }
  ]
 }
}

或者與其它預(yù)處理器一起使用：

// webpack.config.js -> module.rules
{
 test: /\.scss$/,
 use: [
  'vue-style-loader',
  {
   loader: 'css-loader',
   options: { modules: true }
  },
  'sass-loader'
 ]
}

然后在組件中的 <style> 上添加 module 特性：

<style module>
.red {
 color: red;
}
.bold {
 font-weight: bold;
}
</style>

在組件中訪問(wèn) CSS Modules

在 <style> 上添加 module 后，一個(gè)叫做 $style 的計(jì)算屬性就會(huì)被自動(dòng)注入組件。

<template>
 <div>
  <p :class="$style.red">
   hello red!
  </p>
 </div>
</template>

因?yàn)檫@是一個(gè)計(jì)算屬性，所以也支持 :class 的對(duì)象/數(shù)組語(yǔ)法：

<template>
 <div>
  <p :class="{ [$style.red]: isRed }">
   Am I red?
  </p>
  <p :class="[$style.red, $style.bold]">
   Red and bold
  </p>
 </div>
</template>

也可以通過(guò) JavaScript 訪問(wèn)：

<script>
export default {
 created () {
  console.log(this.$style.red)
 }
}
</script>

Vue 2.x 傳統(tǒng)用法

在 Options API 組件中：

<template>
 <span :class="$style.span1">hello 111 - {{ text }}</span>
</template>

<script>
export default {
 props: {
  text: {
   type: String,
   default: ''
  }
 }
};
</script>

<style lang="scss" module>
.span1 {
 color: red;
 font-size: 50px;
}
</style>

對(duì)于 JSX 組件，由于其沒(méi)辦法用 scoped style，所以 CSS Modules 是個(gè)很好的選擇:

<script>
export default {
 props: {
  text: {
   type: String,
   default: ''
  }
 },
 render(h) {
  return <span class={this.$style.span1}>hello 222 - {this.text}</span>;
 }
};
</script>

<style lang="scss" module>
.span1 {
 color: blue;
 font-size: 40px;
}
</style>

Vue 3.x 中的 useCSSModule

引入 useCSSModule 函數(shù)后，在 Composition API 組件中使用 CSS Modules 就有了標(biāo)準(zhǔn)方案：

<template>
 <span :class="$style.span1">hello 333 - {{ text }}</span>
</template>

<script>
import { useCSSModule } from '@vue/composition-api';

export default {
 props: {
  text: {
   type: String,
   default: ''
  }
 },
 setup(props, context) {
  const $style = useCSSModule();
  return {
   $style
  };
 }
};
</script>

<style lang="scss" module>
.span1 {
 color: green;
 font-size: 30px;
}
</style>

其源碼實(shí)現(xiàn)也是非常之簡(jiǎn)單，基本就是取出 this.$style 而已：

export const useCSSModule = (name = '$style'): Record<string, string> => {
 const instance = getCurrentInstance()
 if (!instance) {
  __DEV__ && warn(`useCSSModule must be called inside setup()`)
  return EMPTY_OBJ
 }

 const mod = (instance as any)[name]
 if (!mod) {
  __DEV__ &&
   warn(`Current instance does not have CSS module named "${name}".`)
  return EMPTY_OBJ
 }

 return mod as Record<string, string>
}

自定義 CSS Modules 注入名稱

通過(guò)觀察 useCSSModule 的源碼發(fā)現(xiàn)，CSS Modules 的 name 好像可以不只是 $style；確實(shí)，在 .vue 文件中可以定義不止一個(gè) <style module>，這可以通過(guò)設(shè)置 module 特性的值實(shí)現(xiàn)：

<style module="a">
 /* 注入標(biāo)識(shí)符 a */
</style>

<style module="b">
 /* 注入標(biāo)識(shí)符 b */
</style>

到此這篇關(guān)于Vue3新特性之在Composition API中使用CSS Modules的文章就介紹到這了,更多相關(guān)Vue3新特性之在Composition API中使用CSS Modules內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: