這篇文章主要介紹了Vue 中使用CSS Modules優雅方法,本文文字結合實例代碼的形式給大家介紹的非常詳細，需要的朋友可以參考下
CSS Modules：局部作用域&模組化
CSS Modules 為每個局部類別賦予全域唯一的類別名，這樣元件樣式間就不會互相影響了。如：
/* button.css */
.button {
font-size: 16px;
}
.mini {
font-size: 12px;
}它會被轉換為類似這樣：
/* button.css */
.button__button--d8fj3 {
font-size: 16px;
}
.button__mini--f90jc {
font-size: 12px;
}當導入一個 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 匯入全域類別名
如果有其他全域類別名，你必須將它們放在一起
如果要和元件的屬性值綁定，就算局部類別名稱和屬性名稱一樣，也要明確指定
#對於上面的按鈕元件，使用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 ? '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>使用模板內部的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 中如何使用 CSS Modules的詳細內容。更多資訊請關注PHP中文網其他相關文章！
