Maison >interface Web >js tutoriel >Comment Vue implémente la portée locale et la modularisation
Cette fois, je vais vous montrer comment Vue implémente la portée et la modularisation locales, et quelles sont les précautions à prendre par Vue pour implémenter la portée et la modularisation locales. Voici un cas pratique, jetons un coup d'œ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 */ .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="' + styles.button + ' ' + styles.mini + '" />'
vue-css-modules : Mappage de nom de classe simplifié
Voici un bouton utilisant les composants des modules CSS :
<template> <button :class="{ 'global-button-class-name': 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, utilisez vue-css-modules Après :
<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 passer 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 classe global dans l'attribut class, qui est beaucoup plus organisé
Le nom de classe local lie la propriété du composant du même nom, il suffit d'ajouter devant : modificateur
modificateur
@button
<button styleName="@button">按钮</button>
Cela équivaut à :
<button styleName="button" data-component-button="true">按钮</button>
Cela permet 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 ? 'mini' : ''">按钮</button> disabled=isDisabled <button styleName="disabled=isDisabled">按钮</button>
Cela équivaut à :
<button :styleName="isDisabled ? 'disabled' : ''">按钮</button>
Méthode d'utilisation
Utilisez
pour introduire le modèle dans le modèle Vue Modules CSS externes
<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 les modules CSS internes au 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>
Utilisation 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> ) } }
Utilisation 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 faire attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Utilisez JS pour manipuler des images, en ne laissant que le noir et blanc
Encapsulez les crochets de navigation de routage Vue2 et utilisez-les en combat réel. Utilisez
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!