欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue 中使用 CSS Modules优雅方法

程序员文章站 2023-11-11 20:58:10
css modules:局部作用域 & 模块化 css modules 为每一个局部类赋予全局唯一的类名,这样组件样式间就不会相互影响了。如: /* butto...

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优雅方法,希望对大家有所帮助