This time I will bring you the use of CSS Modules elegant mode. What are the precautions for using the elegant mode of CSS Modules? The following is a practical case, let’s take a look.
CSS Modules gives each local class a globally unique class name so that component styles will not affect each other. For example:
1 2 3 4 5 6 7 |
|
It will be converted to something like this:
1 2 3 4 5 6 7 |
|
When importing a CSS module file, it will provide us with the mapping object of local class name to global class name. Like this:
1 2 3 4 5 6 |
|
vue-css-modules: Simplified class name mapping
The following is a that uses CSS Modules Button GroupParts:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
Indeed, CSS Modules is a good choice for Vue components. But there are also the following shortcomings:
You must pass in styles in data
You must use styles.localClassName to import the global class name
If there are other global class names, you must put them together
If you want to bind to the property value of the component, even if it is local The class name is the same as the attribute name, and must also be specified explicitly
For the button component above, after using vue-css-modules:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
Now:
You don’t have to pass styles in data, but you have to pass styles in mixins:full_moon_with_face:
You can say goodbye to styles.localClassName
Put the local class name in the styleName attribute, and the global class name in the class attribute, which is a lot neater
The local class name binds the component's property with the same name, just add in front of it: Modifier
Modifier
@button
1 |
|
This is equivalent to:
1 |
|
This allows you to reset the style of the component externally:
1 2 3 |
|
$type
1 |
|
This is the same as:
1 |
|
:mini
1 |
|
This is the same as:
1 2 3 |
|
This is the same as:
1 |
|
Usage method
Use in the Vue template
Introduce the CSS module outside the template
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
Use the CSS module inside the template
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
Used in Vue JSX
1 2 3 4 5 6 7 8 9 10 11 |
|
Used in Vue rendering function
1 2 3 4 5 6 7 8 9 10 11 |
|
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website !
Recommended reading:
How to write components in vue
##node token implementation verification
The above is the detailed content of CSS Modules elegant mode usage. For more information, please follow other related articles on the PHP Chinese website!