Utilisation élégante des modules CSS dans Vue

Cette fois, je vais vous expliquer comment utiliser les ModulesCSS avec élégance dans Vue. Quelles sont les précautions pour une utilisation élégante des modules CSS dans Vue. Levez-vous et jetez un œil.

Les modules CSS donnent à chaque classe locale un nom de classe globalement unique afin que les styles de composants ne s'affectent pas les uns les autres. Par exemple :

/* button.css */
.button {
 font-size: 16px;
}
.mini {
 font-size: 12px;
}

Il sera converti en quelque chose comme ceci :

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

Lors de l'importation d'un fichier de module CSS, il fournira un objet de mappage du nom de classe locale à la classe globale nom pour nous. Comme ceci :

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 : mappage de nom de classe simplifié

Ce qui suit est une utilisation des modules CSS Groupe de boutonsParties :

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

En effet, les modules CSS sont un bon choix pour les composants Vue. Mais il y a aussi les défauts suivants :

• Vous devez transmettre les styles dans data

• Vous devez utiliser styles.localClassName pour importer la classe globale name

• S'il existe d'autres noms de classes globales, vous devez les assembler

• si vous souhaitez les combiner avec le du composant Properties Liaison de valeur, même si le nom de la classe locale et le nom de l'attribut sont identiques, vous devez spécifier explicitement

pour le composant bouton ci-dessus, utilisez vue- Après les modules CSS :

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

Maintenant :

• Vous n'êtes pas obligé de transmettre des styles dans les données, mais vous devez le faire passer les styles dans les mixins:full_moon_with_face:

• Vous pouvez dire au revoir à styles.localClassName

• Mettez le nom de la classe locale dans l'attribut styleName et le nom de classe global dans l'attribut class. Il est organisé. De nombreux

• noms de classes locales lient des composants avec la même propriété name, il suffit d'ajouter devant : modificateur

Modificateurs

@button

<button styleName="@button">按钮</button>

Cela équivaut à :

<button styleName="button" data-component-button="true">按钮</button>

Ceci permet de réinitialiser le style d'un composant en externe :

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

$type

<button styleName="$type">按钮</button>

C'est équivalent à :

<button :styleName="type">按钮</button>

:mini

<button styleName=":mini">按钮</button>

Cela équivaut à :

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

Cela équivaut à :

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

Utilisation

Utiliser

Introduire le module CSS en dehors du modèle

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

Utiliser le module CSS à l'intérieur du modèle

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

Utiliser le dans Vue JSX

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>
 )
 }
}

Dans la fonction de rendu Vue Utilisez

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'
 }, '点我')
 }
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention aux autres. articles connexes sur le site php chinois !

Lecture recommandée :

Comment utiliser vue-cli pour étendre le packaging multi-modules

Comment utiliser le packaging Vue pour optimiser le fractionnement du code

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!