Vue での CSS モジュールのエレガントな使用法

php中世界最好的语言
リリース: 2018-05-25 14:53:04
オリジナル
2515 人が閲覧しました

今回は、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="&#39; + styles.button + &#39; &#39; + styles.mini + &#39;" />'
ログイン後にコピー

vue-css-modules: 簡素化されたクラス名のマッピング

これは CSS モジュールを使用したボタン グループの部分です:

<template>
 <button :class="{
 &#39;global-button-class-name&#39;: 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 ? &#39;mini&#39; : &#39;&#39;">按钮</button>
disabled=isDisabled
<button styleName="disabled=isDisabled">按钮</button>
ログイン後にコピー

使用法Vueテンプレートで使用

CSSの紹介外部モジュールテンプレート

<button :styleName="isDisabled ? &#39;disabled&#39; : &#39;&#39;">按钮</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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート