Vue 中使用 CSS Modules优雅方法

2023-09-14 09:24:04 59

CSSModules：局部作用域&模块化

CSSModules为每一个局部类赋予全局唯一的类名，这样组件样式间就不会相互影响了。如：

/*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模块文件时，它会将局部类名到全局类名的映射对象提供给我们。就像这样：

importstylesfrom'./button.css'
//styles={
//button:'button__button--d8fj3',
//mini:'button__mini--f90jc'
//}
element.innerHTML=''

vue-css-modules：简化类名映射

下面是一个使用了CSSModules的按钮组件：

的确，CSSModules对于Vue组件是一个不错的选择。但也存在以下几点不足：

你必须在data中传入styles
你必须使用styles.localClassName导入全局类名
如果有其他全局类名，你必须将它们放在一起
如果要和组件的属性值绑定，就算局部类名和属性名一样，也要显式指定

对于上面的按钮组件，使用vue-css-modules后：

现在：

你不必在data中传入styles，但得在mixins中传入styles:full_moon_with_face:
你可以跟styles.localClassName说拜拜了
将局部类名放在styleName属性，全局类名放在class属性，规整了许多
局部类名绑定组件同名属性，只需在其前面加上:修饰符

修饰符

@button

按钮

这等同于：

按钮

这让你能在外部重置组件的样式：

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

$type

按钮

这等同于：

按钮

:mini

按钮

这等同于：

按钮
disabled=isDisabled
按钮

这等同于：

按钮

使用方法

在Vue模板中使用

引入模板外部的CSS模块

使用模板内部的CSS模块




.button{
font-size:16px;
}
.mini{
font-size:12px;
}

在VueJSX中使用

importCSSModulesfrom'vue-css-modules'
importstylesfrom'./button.css'
exportdefault{
mixins:[CSSModules(styles)],
props:{mini:Boolean},
render(){
return(
点我
)
}
}

在Vue渲染函数中使用

importCSSModulesfrom'vue-css-modules'
importstylesfrom'./button.css'

exportdefault{
mixins:[CSSModules(styles)],
props:{mini:Boolean},
render(h){
returnh('button',{
styleName:'@button:mini'
},'点我')
}
}

总结

以上所述是小编给大家介绍的Vue中使用CSSModules优雅方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Vue 中使用 CSS Modules优雅方法

热门推荐

随机推荐