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 { 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' }, '点我') } }
总结
相关推荐
yfisaboy 2020-07-28
牵手白首 2020-06-02
MaureenChen 2020-05-25
VitaLemon 2020-10-17
北京老苏 2020-08-17
一像素 2020-08-16
preserve log:勾选,页面发生跳转,接口不丢失;;Disable cache:不使用缓存,勾选,拿服务器的缓存;不勾选,用本地缓存;;All那列,表示浏览器的请求类型,对应下面的列type;
baynkbtg 2020-07-05
dingqinghu 2020-06-16
deadgrape 2020-06-09
liujia 2020-06-02
kikaylee 2020-05-31
delmarks 2020-05-17
王磊的程序员之路 2020-05-15
STPace 2020-05-07
singer 2020-05-07
e度空间 2020-04-30
furongwei 2020-04-25