Heim > Web-Frontend > js-Tutorial > Hauptteil

Verwendung im eleganten Modus von CSS-Modulen

php中世界最好的语言
Freigeben: 2018-04-28 16:41:24
Original
2075 Leute haben es durchsucht

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;
}
Nach dem Login kopieren

Es wird in etwa so umgewandelt:

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

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;" />'
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren
Nach dem Login kopieren

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>
Nach dem Login kopieren

Dies entspricht:

<button styleName="button" data-component-button="true">按钮</button>
Nach dem Login kopieren

Damit können Sie den Stil von zurücksetzen die Komponente extern:

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

$type

<button styleName="$type">按钮</button>
Nach dem Login kopieren

Dies ist äquivalent zu:

<button :styleName="type">按钮</button>
Nach dem Login kopieren

:mini

<button styleName=":mini">按钮</button>
Nach dem Login kopieren

Dies ist äquivalent zu:

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

Dies entspricht:

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

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>
Nach dem Login kopieren
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
 )
 }
}
Nach dem Login kopieren

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'
 }, '点我')
 }
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage