快捷導(dǎo)航

Vue 中使用 CSS Modules優(yōu)雅方法

更新時間：2018年04月09日 11:11:16 作者：fjc0k

這篇文章主要介紹了Vue 中使用 CSS Modules優(yōu)雅方法,本文文字結(jié)合實例代碼的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下

CSS Modules：局部作用域 & 模塊化

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

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

它會被轉(zhuǎn)換為類似這樣：

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

當(dāng)導(dǎo)入一個 CSS 模塊文件時，它會將局部類名到全局類名的映射對象提供給我們。就像這樣：

import styles from './button.css'
// styles = {
// button: 'button__button--d8fj3',
// mini: 'button__mini--f90jc'
// }
element.innerHTML = '<button class="' + styles.button + ' ' + styles.mini + '" />'

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

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

<template>
 <button :class="{
 'global-button-class-name': 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 導(dǎo)入全局類名
如果有其他全局類名，你必須將它們放在一起
如果要和組件的屬性值綁定，就算局部類名和屬性名一樣，也要顯式指定

對于上面的按鈕組件，使用 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>

現(xiàn)在：

你不必在 data 中傳入 styles ，但得在 mixins 中傳入 styles :full_moon_with_face:
你可以跟 styles.localClassName 說拜拜了
將局部類名放在 styleName 屬性，全局類名放在 class 屬性，規(guī)整了許多
局部類名綁定組件同名屬性，只需在其前面加上 : 修飾符

修飾符

@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 ? 'mini' : ''">按鈕</button>
disabled=isDisabled
<button styleName="disabled=isDisabled">按鈕</button>

這等同于：

<button :styleName="isDisabled ? 'disabled' : ''">按鈕</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>

使用模板內(nèi)部的 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 渲染函數(shù)中使用

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'
 }, '點我')
 }
}

總結(jié)

以上所述是小編給大家介紹的Vue 中使用 CSS Modules優(yōu)雅方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: