Vue 中使用 CSS Modules优雅方法
作者:fjc0k 时间:2024-04-30 10:23:39
CSS Modules:局部作用域 & 模块化
CSS Modules 为每一个局部类赋予全局唯一的类名,这样组件样式间就不会相互影响了。如:
/* button.css */
.button {
font-size: 16px;
}
.mini {
font-size: 12px;
}它会被转换为类似这样:
/* button.css */
.button__button--d8fj3 {
font-size: 16px;
}
.button__mini--f90jc {
font-size: 12px;
}
当导入一个 CSS 模块文件时,它会将局部类名到全局类名的映射对象提供给我们。就像这样:
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 :简化类名映射
下面是一个使用了 CSS Modules 的按钮组件:
<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>
的确,CSS Modules 对于 Vue 组件是一个不错的选择。但也存在以下几点不足:
你必须在 data 中传入 styles
你必须使用 styles.localClassName 导入全局类名
如果有其他全局类名,你必须将它们放在一起
如果要和组件的属性值绑定,就算局部类名和属性名一样,也要显式指定
对于上面的按钮组件,使用 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>
现在:
你不必在 data 中传入 styles ,但得在 mixins 中传入 styles :full_moon_with_face:
你可以跟 styles.localClassName 说拜拜了
将局部类名放在 styleName 属性,全局类名放在 class 属性,规整了许多
局部类名绑定组件同名属性,只需在其前面加上 : 修饰符
修饰符
@button
<button styleName="@button">按钮</button>
这等同于:
<button styleName="button" data-component-button="true">按钮</button>
这让你能在外部重置组件的样式:
.form [data-component-button] {
font-size: 20px;
}
$type
<button styleName="$type">按钮</button>
这等同于:
<button :styleName="type">按钮</button>
:mini
<button styleName=":mini">按钮</button>
这等同于:
<button :styleName="mini ? 'mini' : ''">按钮</button>
disabled=isDisabled
<button styleName="disabled=isDisabled">按钮</button>
这等同于:
<button :styleName="isDisabled ? 'disabled' : ''">按钮</button>
使用方法
在 Vue 模板中使用
引入模板外部的 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>
使用模板内部的 CSS 模块
<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>
在 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>
)
}
}
在 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'
}, '点我')
}
}
总结
以上所述是小编给大家介绍的Vue 中使用 CSS Modules优雅方法网站的支持!
来源:https://juejin.im/post/5ac5fd7f5188257cc20d854e
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
通过Python来使用七牛云存储的方法详解
![](https://img.aspxhome.com/file/2023/2/64602_0s.png)
python Web应用程序测试selenium库使用用法详解
使用Rotate Master实现MySQL 多主复制的实现方法
python实现写数字文件名的递增保存文件方法
asp利用Split函数进行多关键字检索
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
![](https://img.aspxhome.com/file/2023/3/134853_0s.png)
aspjpeg 半透明描边的实现函数
![](https://img.aspxhome.com/file/UploadPic/200812/17/17_172743_1-89s.jpg)
python根据出生日期获得年龄的方法
利用python Pandas实现批量拆分Excel与合并Excel
mysql8.0 windows x64 zip包安装配置教程
JS实现仿新浪微博发布内容为空时提示功能代码
![](https://img.aspxhome.com/file/2023/4/56164_0s.jpg)
js+css在交互上的应用
![](https://img.aspxhome.com/file/2023/9/136219_0s.jpg)
php 字符串函数收集
windows+apache+mod_python配置django运行环境
使用pandas 将DataFrame转化成dict
在PyCharm导航区中打开多个Project的关闭方法
![](https://img.aspxhome.com/file/2023/8/102938_0s.jpg)
python中ndarray数组的索引和切片的使用
在Vue中配置代理服务器的方法详解
![](https://img.aspxhome.com/file/2023/5/130255_0s.jpg)
Django实现内容缓存实例方法
在MySQL中为何不建议使用utf8
![](https://img.aspxhome.com/file/2023/5/126305_0s.jpg)