脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue 使用css modules

Vue 中使用 CSS Modules优雅方法

 更新时间：2018年04月09日 11:11:16   作者：fjc0k  
这篇文章主要介绍了Vue 中使用 CSS Modules优雅方法,本文文字结合实例代码的形式给大家介绍的非常详细，需要的朋友可以参考下

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

您可能感兴趣的文章:

相关文章

  • petite vue 基本使用指南示例小结

    petite vue 基本使用指南示例小结

    petite-vue 是为渐进增强而优化的另一种 Vue 发行版,它提供与标准 Vue 相同的模板语法和反应性心智模型,这篇文章主要介绍了petite vue 基本使用指南,需要的朋友可以参考下
    2024-07-07
  • VUE获取Promise对象中PromiseResult中的数据(最新推荐)

    VUE获取Promise对象中PromiseResult中的数据(最新推荐)

    如果想要在接口请求方法的外面拿到请求的结果,再做相关数据处理,往往我们拿到的却是一个Promise对象,那么遇到这样的问题如何解决呢,下面小编给大家带来了VUE 项目中 如何获取Promise对象中的PromiseResult中的数据 ,感兴趣的朋友一起看看吧
    2023-10-10
  • vue2.0项目集成Cesium的实现方法

    vue2.0项目集成Cesium的实现方法

    这篇文章主要介绍了vue2.0项目集成Cesium的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • vue3.0关闭eslint校验的3种方法详解

    vue3.0关闭eslint校验的3种方法详解

    这篇文章主要给大家介绍了关于vue3.0关闭eslint校验的3种方法,在实际开发过程中,eslint的作用不可估量,文中将关闭的方法介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • vue3+vite兼容低版本的白屏问题详解(安卓7/ios11)

    vue3+vite兼容低版本的白屏问题详解(安卓7/ios11)

    这篇文章主要给大家介绍了关于vue3+vite兼容低版本的白屏问题的相关资料,还给大家介绍了vue打包项目以后白屏和图片加载不出来问题的解决方法,需要的朋友可以参考下
    2022-12-12
  • 深入理解Vue 的条件渲染和列表渲染

    深入理解Vue 的条件渲染和列表渲染

    本篇文章主要介绍了深入理解Vue 的条件渲染和列表渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • elementUI实现下拉选项加多选框的示例代码

    elementUI实现下拉选项加多选框的示例代码

    因产品需求和UI样式调整，本文主要实现elementUI下拉选项加多选框的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • vue3无法使用jsx的问题及解决

    vue3无法使用jsx的问题及解决

    这篇文章主要介绍了vue3无法使用jsx的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • vue中get和post请求的区别点总结

    vue中get和post请求的区别点总结

    在本篇文章里小编给大家分享的是一篇关于vue中get和post请求的区别点总结内容，对此有兴趣的朋友们可以跟着学习下。
    2021-12-12
  • vue-router判断页面未登录自动跳转到登录页的方法示例

    vue-router判断页面未登录自动跳转到登录页的方法示例

    这篇文章主要介绍了vue-router判断页面未登录自动跳转到登录页的方法示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11

最新评论