Comment utiliser les modules CSS dans Vue

Cet article présente principalement la méthode élégante d'utilisation des modules CSS dans Vue. Le texte de cet article est combiné avec l'exemple de code pour vous le présenter de manière très détaillée. Les amis dans le besoin peuvent s'y référer

. Modules CSS : portée locale et modulaire

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 */
.button__button--d8fj3 {
 font-size: 16px;
}
.button__mini--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: 'button__button--d8fj3',
// mini: 'button__mini--f90jc'
// }
element.innerHTML = '<button class="&#39; + styles.button + &#39; &#39; + styles.mini + &#39;" />'

vue-css-modules : Mappage de nom de classe simplifié

Voici un bouton utilisant les composants des modules CSS :

<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 vous lier à la valeur de propriété du composant , même s'il est local Le nom de la classe est le même que le nom de l'attribut, et doit également être explicitement spécifié

Pour le composant bouton ci-dessus, après avoir utilisé 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>

Maintenant :

• Vous n'êtes pas obligé de transmettre des styles dans les données, mais vous devez transmettre des 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 la classe globale dans l'attribut class, ce qui a beaucoup rationalisé de

• liaison de nom de classe locale Pour l'attribut portant le même nom du composant, ajoutez simplement devant celui-ci : modificateur

modificateur

@button

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

Cela équivaut à :

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

Cela permet de réinitialiser le style de un composant en externe :

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

$type

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

Ceci est équivalent à :

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

:mini

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

Ceci est équivalent à :

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

Comment utiliser

Utiliser dans Modèle Vue

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 modèle Module CSS interne

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

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

Utilisé dans la fonction de rendu Vue

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

Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Composant récursif Vue.js pour implémenter le menu arborescent

Comment résoudre le problème dans lequel le stylet ne peut pas être utilisé vue-cli

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!