Dieses Mal werde ich Ihnen die Verwendung von CSS-Modulens im eleganten Modus vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von CSS-Modulen im eleganten Modus? ein Blick.
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 an den Eigenschaftswert der Komponente binden möchten , auch wenn es lokal ist Der Klassenname ist derselbe wie der Attributname
Für die Schaltflächenkomponente oben, nach Verwendung von 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>
Jetzt:
Sie müssen keine Stile in Daten übergeben, sondern Stile in mixins:full_moon_with_face:
Sie können sich von style.localClassName verabschieden
Geben Sie den lokalen Klassennamen in das styleName-Attribut und den globalen Klassennamen in das Klassenattribut ein. Das ist viel übersichtlicher
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>
Damit können Sie den Stil von zurücksetzen die Komponente extern:
.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, um das CSS einzuführen Modul außerhalb der Vorlage
<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>
Verwenden Sie das CSS-Modul innerhalb der Vorlage
<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>
Verwenden Sie
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> ) } }
Verwenden Sie
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' }, '点我') } }
in der Vue-Rendering-Funktion!
Empfohlene Lektüre:
So schreiben Sie Komponenten in Vue
Knoten+Token-Implementierungsüberprüfung
Das obige ist der detaillierte Inhalt vonVerwendung im eleganten Modus von CSS-Modulen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!