Heim > Artikel > Web-Frontend > 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="' + styles.button + ' ' + styles.mini + '" />'
vue-css-modules: Vereinfachte Klassennamenzuordnung
Das Folgende ist ein , der CSS-Module-Schaltflächenkomponenten verwendet :
<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>
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 ? 'mini' : ''">按钮</button> disabled=isDisabled <button styleName="disabled=isDisabled">按钮</button>
Dies entspricht:
<button :styleName="isDisabled ? 'disabled' : ''">按钮</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!