Heim  >  Artikel  >  Web-Frontend  >  Eleganter Einsatz von CSS-Modulen in Vue

Eleganter Einsatz von CSS-Modulen in Vue

php中世界最好的语言
php中世界最好的语言Original
2018-05-25 14:53:042515Durchsuche

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!

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