全国服务热线:4008-888-888

行业新闻

百度智能小程序是什么_Vue 中使用 CSS Modules优雅方

Vue 中使用 CSS Modules优雅方法       这篇文章主要介绍了Vue 中使用 CSS Modules优雅方法,本文文字结合实例代码的形式给大家介绍的非常详细,需要的朋友可以参考下

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 {
 pro凡科抠图: { mini: Boolean },
 data: () = ({ styles })
 /script 

的确,CSS Modules 对于 Vue 组件是一个不错的选择。但也存在以下几点不足:

你必须在 data 中传入 styles 你必须使用 styles.localClassName 导入全局类名 如果有其他全局类名,你必须将它们放在一起 如果要和组件的属性值绑定,就算局部类名和属性名一样,也要显式指定
你不必在 data 中传入 styles ,但得在 mixins 中传入 styles :full_moon_with_face: 你可以跟 styles.localClassName 说拜拜了 将局部类名放在 styleName 属性,全局类名放在 class 属性,规整了许多 局部类名绑定组件同名属性,只需在其前面加上 : 修饰符

总结

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




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服