Utilisation du mode élégant des modules CSS

Cette fois, je vais vous présenter l'utilisation des ModulesCSS en mode élégant. Quelles sont les précautions lors de l'utilisation des modules CSS en mode élégant. Voici des cas pratiques, prenons. un regard.

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 classe globale, 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

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 la classe attribut, qui est beaucoup plus soigné

• Le nom de la classe locale lie la propriété du composant du même nom, il suffit d'ajouter devant : modifier

modificateur

@button

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

Cela équivaut à :

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

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

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

$type

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

Cela équivaut à :

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

Utiliser

Utilisez

dans un modèle Vue pour introduire CSS en dehors du modèle Module

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

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

Utilisez-le dans Vue JSX Utilisez

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

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

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 prêter attention aux autres. articles connexes sur le site php chinois !

Lecture recommandée :

Comment écrire des composants dans vue

vérification de l'implémentation du nœud + jeton

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!