VueでCSSモジュールを使う優雅な方法

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

CSSモジュール:ローカルスコープとモジュール性

CSSモジュールは、各ローカルクラスにグローバルにユニークなクラス名を与え、コンポーネントスタイルが互いに影響を与えないようにします。 そのような:


/* 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モジュールを使用するボタンコンポーネントは次のとおりです。


<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モジュールは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>

今:

データにスタイルを渡す必要はありませんが、mixinにスタイルを渡す必要があります:full_moon_with_face:
styles.localClassNameを使って、ローカルクラス名がstyleNameプロパティに配置され、グローバルクラス名がclassプロパティに配置され、多くのローカルクラス名バインディングコンポーネントが同じnameプロパティを持ち、その前に:modifier

モディファイア

@ボタン


<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>

:ミニ


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

要約

上記はXiaobianによって紹介されたVueのCSSモジュールを使用するエレガントな方法です。私は皆を助けてくれることを願っています。ご質問があれば、Xiaobianが返信します。 Script Houseのウェブサイトへのご支援をありがとうございます!


1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ