Vue 中使用 CSS Modules优雅方法

2019-11-19 14:02:34

字体：大中小

来源：转载

供稿：网友

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

上一篇：vue写一个组件

下一篇：JS中双击和单击事件冲突的解决方法