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 相关文章推荐
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 Javascript
js数组与字符串的相互转换方法
Jul 09 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
jQuery实现购物车数字加减效果
Mar 14 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 Javascript
JS实现简易计算器
Feb 14 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
原生js实现自定义消息提示框
Nov 19 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
set_include_path在win和linux下的区别
2008/01/10 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
PHP中COOKIES使用示例
2015/07/26 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
Python标准库与第三方库详解
2014/07/22 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
python 实现绘制整齐的表格
2019/11/18 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
运动会四百米广播稿
2014/01/19 职场文书
农村面貌改造提升实施方案
2014/03/18 职场文书
公司承诺书格式
2014/05/21 职场文书
求职导师推荐信范文
2015/03/27 职场文书
2015年科普工作总结
2015/07/23 职场文书
职工食堂管理制度
2015/08/06 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
Nginx缓存设置案例详解
2021/09/15 Servers