Vue 中使用 CSS Modules优雅方法


Posted in Javascript onApril 09, 2018

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优雅方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js获取图片长和宽度的代码
Nov 24 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
Javascript验证方法大全
Sep 21 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
vue 中的keep-alive实例代码
Jul 20 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 #Javascript
vue脚手架及vue-router基本使用
Apr 09 #Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 #Javascript
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 #Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 #Javascript
webpack 模块热替换原理
Apr 09 #Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
Apr 09 #Javascript
You might like
PHP设计模式 注册表模式
2012/02/05 PHP
解析argc argv在php中的应用
2013/06/24 PHP
PHP中的替代语法简介
2014/08/22 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
jquery获取input的value问题说明
2010/08/19 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
基于jquery实现最简单的选项卡切换效果
2016/05/08 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
javascript编写简易计算器
2017/05/06 Javascript
JS实现标签滚动切换效果
2017/12/25 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
Python global全局变量函数详解
2018/09/18 Python
python后端接收前端回传的文件方法
2019/01/02 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
python日期相关操作实例小结
2019/06/24 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
医学生临床实习自我评价
2014/03/07 职场文书
出生公证委托书
2014/04/03 职场文书
医院标语大全
2014/06/23 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
公司股份合作协议书
2014/12/07 职场文书
部队个人年终总结
2015/03/02 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
闪闪的红星观后感
2015/06/08 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers
Linux安装Docker详细教程
2022/07/07 Servers