CSS模块:局部作用域,模块化
CSS模块为每一个局部类赋予全局唯一的类名,这样组件样式间就不会相互影响了。如:
/*按钮。css */.button {
字体大小:16 px;
}
.mini {
字体大小:12 px;
}
它会被转换为类似这样:
/*按钮。css */.button__button——d8fj3 {
字体大小:16 px;
}
.button__mini——f90jc {
字体大小:12 px;
}
当导入一个CSS模块文件时,它会将局部类名到全局类名的映射对象提供给我们。就像这样:
从“进口风格。/button.css '//风格={//按钮:“button__button——d8fj3”,//迷你:“button__mini——f90jc”//}
元素。innerHTML=' & lt;按钮类=" +风格。按钮+‘+风格。迷你+”/祝辞的
下面是一个使用了CSS模块的按钮组件:
& lt; template>
& lt;按钮:class=" {
“global-button-class-name”:没错,
(风格。按钮:没错,
(风格。迷你]:迷你
}”在点我& lt;/button>
& lt;/template>
& lt; script>
从“进口风格。/button.css '
出口默认{
道具:{迷你:布尔},
数据:()=比;({风格})
}
& lt;/script>
的确、CSS模块对于Vue组件是一个不错的选择。但也存在以下几点不足:
<李>你必须在数据中传入风格李
<李>你必须使用风格。李localClassName导入全局类名
<李>如果有其他全局类名,你必须将它们放在一起李
<李>如果要和组件的属性值绑定,就算局部类名和属性名一样,也要显式指定李
<李>
对于上面的按钮组件,使用vue-css-modules后:
& lt; template>
& lt;按钮
类=" global-button-class-name "
styleName属性="按钮:迷你”比;
点我
& lt;/button>
& lt;/template>
& lt; script>
从“vue-css-modules”进口CSSModules
从“进口风格。/button.css '
出口默认{
mixin:(CSSModules(风格),
道具:{迷你:布尔}
}
& lt;/script>
现在:
<李>你不必在数据中传入风格,但得在mixin中传入样式:full_moon_with_face:李
<李>你可以跟风格。李localClassName说拜拜了
<李>将局部类名放在styleName属性属性,全局类名放在类属性,规整了许多
<李>局部类名绑定组件同名属性,只需在其前面加上:修饰符
李
@button
& lt;按钮styleName属性=" @button "祝辞按钮& lt;/button>
这等同于:
& lt;按钮styleName属性="按钮" data-component-button=" true "祝辞按钮& lt;/button>
这让你能在外部重置组件的样式:
养成(data-component-button) {
字体大小:20 px;
}
美元类型
& lt;按钮styleName属性=" $类型”在按钮& lt;/button>
这等同于:
& lt;按钮:styleName属性=袄嘈汀钡脑诎磁? lt;/button>
:迷你
& lt;按钮styleName属性=":迷你"祝辞按钮& lt;/button>
这等同于:
& lt;按钮:styleName属性="迷你& # 63;“迷你”:“在按钮& lt;/button>
禁用=isDisabled
& lt;按钮styleName属性=敖?isDisabled”祝辞按钮& lt;/button>
这等同于:
& lt;按钮:styleName属性=" isDisabled & # 63;“禁用”:“在按钮& lt;/button>
在Vue模板中使用
引入模板外部的CSS模块
& lt; template>
& lt;按钮
类=" global-button-class-name "
styleName属性="按钮:迷你”比;
点我
& lt;/button>
& lt;/template>
& lt; script>
从“vue-css-modules”进口CSSModules
从“进口风格。/button.css '
出口默认{
mixin:(CSSModules(风格),
道具:{迷你:布尔}
}
& lt;/script>
使用模板内部的CSS模块
