在Vue裡CSS Modules優雅使用方法

這次帶給大家在Vue裡CSS Modules優雅使用方法，在Vue裡CSS Modules優雅使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

CSS Modules 為每個局部類別賦予全域唯一的類別名，這樣元件樣式間就不會互相影響了。如：

/* button.css */
.button {
 font-size: 16px;
}
.mini {
 font-size: 12px;
}

它會被轉換為類似這樣：

/* button.css */
.buttonbutton--d8fj3 {
 font-size: 16px;
}
.buttonmini--f90jc {
 font-size: 12px;
}

當導入一個 CSS 模組檔案時，它會將局部類別名稱到全域類別名稱的映射物件提供給我們。就像這樣：

import styles from './button.css'
// styles = {
// button: 'buttonbutton--d8fj3',
// mini: 'buttonmini--f90jc'
// }
element.innerHTML = '<button class="&#39; + styles.button + &#39; &#39; + styles.mini + &#39;" />'

vue-css-modules ：簡化類別名稱映射

下面是一個使用了CSS Modules 的按鈕組件：

<template>
 <button :class="{
 &#39;global-button-class-name&#39;: true,
 [styles.button]: true,
 [styles.mini]: mini
 }">点我</button>
</template>
<script>
 import styles from './button.css'
 export default {
 props: { mini: Boolean },
 data: () => ({ styles })
 }
</script>

的確，CSS Modules 對於Vue 元件是不錯的選擇。但也存在以下幾點不足：

• 你必須在data 中傳入styles

• 你必須使用styles.localClassName 匯入全域類別名

• 如果有其他全域類別名，你必須將它們放在一起

• 如果要和元件的屬性#值綁定，就算局部類別名稱和屬性名稱一樣，也要明確指定

#對於上面的按鈕元件，使用vue- css-modules 後：

<template>
 <button
 class="global-button-class-name"
 styleName="button :mini">
 点我
 </button>
</template>
<script>
 import CSSModules from 'vue-css-modules'
 import styles from './button.css'
 export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean }
 }
</script>

現在：

• #你不必在data 中傳入styles ，但得在mixins 中傳入styles :full_moon_with_face:

• 你可以跟styles.localClassName 說拜拜了

• 將局部類別名稱放在styleName 屬性，全域類別名稱放在class 屬性，規則了許多

• 局部類別名稱綁定元件同名屬性，只需在其前面加上: 修飾符

修飾符

@button

<button styleName="@button">按钮</button>

這等於：

<button styleName="button" data-component-button="true">按钮</button>

這讓你能在外部重置元件的樣式：

.form [data-component-button] {
 font-size: 20px;
}

$type

<button styleName="$type">按钮</button>

這等同於：

<button :styleName="type">按钮</button>

:mini

<button styleName=":mini">按钮</button>

這等於：

<button :styleName="mini ? &#39;mini&#39; : &#39;&#39;">按钮</button>
disabled=isDisabled
<button styleName="disabled=isDisabled">按钮</button>

這等於：

<button :styleName="isDisabled ? &#39;disabled&#39; : &#39;&#39;">按钮</button>

使用方法

在Vue 模板中使用

引入模板外部的CSS 模組

<template>
 <button
 class="global-button-class-name"
 styleName="button :mini">
 点我
 </button>
</template>
<script>
 import CSSModules from 'vue-css-modules'
 import styles from './button.css'
 export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean }
 }
</script>

使用模板內部的CSS 模組

<template>
 <button
 class="global-button-class-name"
 styleName="button :mini">
 点我
 </button>
</template>
<script>
 import CSSModules from 'vue-css-modules'
 export default {
 mixins: [CSSModules()],
 props: { mini: Boolean }
 }
</script>
<style module>
 .button {
 font-size: 16px;
 }
 .mini {
 font-size: 12px;
 }
</style>

在Vue JSX 中使用

import CSSModules from 'vue-css-modules'
import styles from './button.css'
export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean },
 render() {
 return (
  <button styleName="@button :mini">点我</button>
 )
 }
}

在Vue 渲染函數中使用

import CSSModules from 'vue-css-modules'
import styles from './button.css'
export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean },
 render(h) {
 return h('button', {
  styleName: '@button :mini'
 }, '点我')
 }
}

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

怎麼使用vue-cli擴充多模組打包

怎麼使用Vue打包優化code spliting

以上是在Vue裡CSS Modules優雅使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！