在Vue里CSS Modules优雅使用方法

这次给大家带来在Vue里CSS Modules优雅使用方法，在Vue里CSS Modules优雅使用的注意事项有哪些，下面就是实战案例，一起来看一下。

CSS Modules 为每一个局部类赋予全局唯一的类名，这样组件样式间就不会相互影响了。如：

/* button.css */
.button {
 font-size: 16px;
}
.mini {
 font-size: 12px;
}

它会被转换为类似这样：

/* button.css */
.buttonbutton--d8fj3 {
 font-size: 16px;
}
.buttonmini--f90jc {
 font-size: 12px;
}

当导入一个 CSS 模块文件时，它会将局部类名到全局类名的映射对象提供给我们。就像这样：

import styles from './button.css'
// styles = {
// button: 'buttonbutton--d8fj3',
// mini: 'buttonmini--f90jc'
// }
element.innerHTML = ''

vue-css-modules ：简化类名映射

下面是一个使用了 CSS Modules 的按钮组件：

的确，CSS Modules 对于 Vue 组件是一个不错的选择。但也存在以下几点不足：

• 你必须在 data 中传入 styles

• 你必须使用 styles.localClassName 导入全局类名

• 如果有其他全局类名，你必须将它们放在一起

• 如果要和组件的属性值绑定，就算局部类名和属性名一样，也要显式指定

对于上面的按钮组件，使用 vue-css-modules 后：

现在：

• 你不必在 data 中传入 styles ，但得在 mixins 中传入 styles :full_moon_with_face:

• 你可以跟 styles.localClassName 说拜拜了

• 将局部类名放在 styleName 属性，全局类名放在 class 属性，规整了许多

• 局部类名绑定组件同名属性，只需在其前面加上 : 修饰符

修饰符

@button

按钮

这等同于：

按钮

这让你能在外部重置组件的样式：

.form [data-component-button] {
 font-size: 20px;
}

$type

按钮

这等同于：

按钮

:mini

按钮

这等同于：

按钮
disabled=isDisabled
按钮

这等同于：

按钮

使用方法

在 Vue 模板中使用

引入模板外部的 CSS 模块

使用模板内部的 CSS 模块

在 Vue JSX 中使用

import CSSModules from 'vue-css-modules'
import styles from './button.css'
export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean },
 render() {
 return (
  点我
 )
 }
}

在 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'
 }, '点我')
 }
}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎样使用vue-cli扩展多模块打包

拍客piikee竞拍系统

拍客竞拍系统是一款免费竞拍网站建设软件，任何个人可以下载使用，但未经商业授权不能进行商业活动，程序源代码开源，任何个人和企业可以进行二次开发，但不能以出售和盈利为目的。安装方法，将www文件夹里面的所有文件上传至虚拟主机，在浏览器执行http://你的域名/install.php或者直接导入数据库文件执行。本次升级优化了一下内容1，程序和模板完美分离。2，优化了安装文件。3，后台增加模板切换功能。

下载

怎样使用Vue打包优化code spliting

立即学习“前端免费学习笔记（深入）”；