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 相关文章推荐
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
js实现前端分页页码管理
Jan 06 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
layer iframe 设置关闭按钮的方法
Sep 12 Javascript
p5.js临摹旋转爱心
Oct 23 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
vue实现打地鼠小游戏
Aug 21 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 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
PHP函数学习之PHP函数点评
2012/07/05 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
Javascript的比较汇总
2016/07/25 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
python求解水仙花数的方法
2015/05/11 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
django定期执行任务(实例讲解)
2017/11/03 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
django 微信网页授权登陆的实现
2019/07/30 Python
python循环输出三角形图案的例子
2019/11/22 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
焦裕禄精神心得体会
2014/09/02 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
社区义诊通知
2015/04/24 职场文书
2015入党自传格式范文
2015/06/26 职场文书
暑假生活随笔
2015/08/15 职场文书
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS