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 Event学习第九章 鼠标事件
Feb 08 Javascript
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 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里得到前天和昨天的日期的代码
2007/08/16 PHP
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
详解微信UnionID作用
2019/05/15 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
女儿十岁生日答谢词
2014/01/27 职场文书
电焊工工作岗位职责
2014/02/06 职场文书
房屋买卖协议书
2014/04/10 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书
生产助理岗位职责
2014/06/18 职场文书
实验室的标语
2014/06/20 职场文书
2014年度党员自我评议
2014/09/13 职场文书
银行转正自我鉴定
2014/09/29 职场文书
创先争优宣传标语
2014/10/08 职场文书
外贸英文求职信范文
2015/03/19 职场文书