今回は、Vue で CSS Module をエレガントに使用する方法についてお届けします。Vue で CSS モジュールをエレガントに使用する際の 注意事項 について、実際のケースを見てみましょう。
CSS モジュールは、コンポーネントのスタイルが相互に影響を与えないように、各ローカル クラスにグローバルに一意のクラス名を与えます。例:
/* 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="' + 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 コンポーネントの選択に適しています。 。ただし、次の欠点もあります:
データでスタイルを渡す必要があります
グローバル クラス名をインポートするには、styles.localClassName を使用する必要があります
他のグローバル クラス名がある場合は、それらを入力する必要がありますTogether
コンポーネントのプロパティ値にバインドしたい場合は、ローカルクラス名とプロパティ名が同じであっても、明示的に指定する必要があります
上記のボタンコンポーネントの場合、次を使用します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>
現在:
データでスタイルを渡す必要はありませんが、mixins:full_moon_with_face:
でスタイルを渡す必要があります。styles.localClassName に別れを告げることができます。
ローカル クラス名は styleName 属性に配置され、グローバル クラス名は class 属性に配置されます。これにより、多くの調整が行われます。
ローカル クラス名は、コンポーネントのプロパティを同じ名前にバインドします。前に modifier を追加するだけです
modifier
@button
<button styleName="@button">按钮</button>
これは、コンポーネントのスタイルを外部からリセットできます:
<button styleName="button" data-component-button="true">按钮</button>
$type
.form [data-component-button] { font-size: 20px; }
これは次と同等です:
<button styleName="$type">按钮</button>
:mini
<button :styleName="type">按钮</button>
これは次と同等です:
<button styleName=":mini">按钮</button>
これは次と同等です:
<button :styleName="mini ? 'mini' : ''">按钮</button> disabled=isDisabled <button styleName="disabled=isDisabled">按钮</button>
使用法Vueテンプレートで使用
CSSの紹介外部モジュールテンプレート
<button :styleName="isDisabled ? 'disabled' : ''">按钮</button>
テンプレート内の 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>
Vue JSX で使用する
<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 レンダリング関数で
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> ) } }
を使用する この記事の事例を読んだ後は、この方法を習得したと思います。 、PHP 中国語 Web サイトの他の関連記事にも注目してください。
推奨読書:
vue-cli を使用してマルチモジュールのパッケージ化を拡張する方法 Vue パッケージ化を使用してコード分割を最適化する方法以上がVue での CSS モジュールのエレガントな使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。