Heim >Web-Frontend >js-Tutorial >Verwendung im eleganten Modus von CSS-Modulen

Verwendung im eleganten Modus von CSS-Modulen

php中世界最好的语言
php中世界最好的语言Original
2018-04-28 16:41:242114Durchsuche

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="&#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 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 ? &#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, 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!

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