Eleganter Einsatz von CSS-Modulen in Vue

Dieses Mal werde ich Ihnen zeigen, wie Sie CSS-Modules elegant in Vue verwenden können. Was sind die Vorsichtsmaßnahmen für die elegante Verwendung von CSS-Modulen in Vue? Stehen Sie auf und schauen Sie nach.

CSS-Module geben jeder lokalen Klasse einen global eindeutigen Klassennamen, sodass sich Komponentenstile nicht gegenseitig beeinflussen. Zum Beispiel:

/* button.css */
.button {
 font-size: 16px;
}
.mini {
 font-size: 12px;
}

Es wird in etwa so umgewandelt:

/* button.css */
.buttonbutton--d8fj3 {
 font-size: 16px;
}
.buttonmini--f90jc {
 font-size: 12px;
}

Beim Importieren einer CSS-Moduldatei erhalten wir das Zuordnungsobjekt des lokalen Klassennamens zum globalen Klassennamen. So:

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: Vereinfachte Klassennamenzuordnung

Das Folgende ist ein , der CSS-Module-Schaltflächenkomponenten verwendet :

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

Tatsächlich sind CSS-Module eine gute Wahl für Vue-Komponenten. Es gibt aber auch folgende Mängel:

• Sie müssen Stile in Daten übergeben

• Sie müssen Styles.localClassName verwenden, um die globale Klasse zu importieren name

• Wenn es andere globale Klassennamen gibt, müssen Sie diese zusammenfügen

• wenn Sie sie mit dem der Komponente kombinieren möchten Eigenschaften Wertbindung, auch wenn der lokale Klassenname und der Attributname identisch sind, müssen Sie

explizit angeben Schaltflächenkomponente oben, verwenden Sie vue-css-modules Nachher: ​​

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

Jetzt:

• Sie müssen keine Stile in Daten übergeben, aber Sie müssen Stile übergeben in Mixins: full_moon_with_face:

• Sie können sich von style.localClassName verabschieden

• Fügen Sie den lokalen Klassennamen in das styleName-Attribut und die globale Klasse ein Name im Klassenattribut, was viel übersichtlicher ist

• Der lokale Klassenname bindet die Eigenschaft der Komponente mit demselben Namen, fügen Sie einfach davor hinzu: Modifikator

Modifikator

@button

<button styleName="@button">按钮</button>

Dies entspricht:

<button styleName="button" data-component-button="true">按钮</button>

Dies ermöglicht Sie können den Stil der Komponente extern zurücksetzen:

.form [data-component-button] {
 font-size: 20px;
}

$type

<button styleName="$type">按钮</button>

Dies ist äquivalent zu:

<button :styleName="type">按钮</button>

:mini

<button styleName=":mini">按钮</button>

Dies ist äquivalent zu:

<button :styleName="mini ? &#39;mini&#39; : &#39;&#39;">按钮</button>
disabled=isDisabled
<button styleName="disabled=isDisabled">按钮</button>

Dies entspricht:

<button :styleName="isDisabled ? &#39;disabled&#39; : &#39;&#39;">按钮</button>

Verwendungsmethode

Verwendung in der Vue-Vorlage

CSS-Modul außerhalb der Vorlage einführen

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

Verwendung innerhalb der Vorlage CSS-Modul

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

wird in Vue JSX verwendet

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

wird in der Vue-Rendering-Funktion verwendet

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte achten Sie auf weitere spannende Artikel auf der chinesischen PHP-Website.

Empfohlene Lektüre:

So verwenden Sie Vue-Cli, um die Verpackung mit mehreren Modulen zu erweitern

So verwenden Sie die Vue-Verpackung um die Codeaufteilung zu optimieren

Das obige ist der detaillierte Inhalt vonEleganter Einsatz von CSS-Modulen in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!