溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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 組件是一個不錯的選擇。但也存在以下幾點不足：
對于上面的按鈕組件，使用 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>
現在：
修飾符
@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'
}, '點我')
}
}
總結
以上所述是小編給大家介紹的Vue 中使用 CSS Modules優雅方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
