Vue3新特性之在Composition API中使用CSS Modules


Posted in Javascript onJuly 13, 2020

在 Vue 3 Composition API 最近的一次 beta 升级中,无论是 Vue 3 本 3 库 vue-next,还是面向 Vue 2 过渡用的 @vue/composition-api 库中,都同步更新了一个 useCSSModule 函数 -- 用来在使用了 Composition API 的 Vue 实例中,支持 CSS Modules 语法。

首先来看看什么是 CSS Modules:

CSS Modules

CSS Modules 是一种 CSS 的模块化和组合系统。vue-loader 集成 CSS Modules,可以作为模拟 scoped CSS 的替代方案。

启用 CSS Modules

如果是使用 vue cli 创建的项目,应该已经默认开启了这一特性;如果项目中需要手动开启,按如下设置:

// webpack.config.js
{
 module: {
  rules: [
   // ... 其它规则省略
   {
    test: /\.css$/,
    use: [
     'vue-style-loader',
     {
      loader: 'css-loader',
      options: {
       // 开启 CSS Modules
       modules: true,
       // 自定义生成的类名
       localIdentName: '[local]_[hash:base64:8]'
      }
     }
    ]
   }
  ]
 }
}

或者与其它预处理器一起使用:

// webpack.config.js -> module.rules
{
 test: /\.scss$/,
 use: [
  'vue-style-loader',
  {
   loader: 'css-loader',
   options: { modules: true }
  },
  'sass-loader'
 ]
}

然后在组件中的 <style> 上添加 module 特性:

<style module>
.red {
 color: red;
}
.bold {
 font-weight: bold;
}
</style>

在组件中访问 CSS Modules

在 <style> 上添加 module 后,一个叫做 $style 的计算属性就会被自动注入组件。

<template>
 <div>
  <p :class="$style.red">
   hello red!
  </p>
 </div>
</template>

因为这是一个计算属性,所以也支持 :class 的对象/数组语法:

<template>
 <div>
  <p :class="{ [$style.red]: isRed }">
   Am I red?
  </p>
  <p :class="[$style.red, $style.bold]">
   Red and bold
  </p>
 </div>
</template>

也可以通过 JavaScript 访问:

<script>
export default {
 created () {
  console.log(this.$style.red)
 }
}
</script>

Vue 2.x 传统用法

在 Options API 组件中:

<template>
 <span :class="$style.span1">hello 111 - {{ text }}</span>
</template>

<script>
export default {
 props: {
  text: {
   type: String,
   default: ''
  }
 }
};
</script>

<style lang="scss" module>
.span1 {
 color: red;
 font-size: 50px;
}
</style>

对于 JSX 组件,由于其没办法用 scoped style,所以 CSS Modules 是个很好的选择:

<script>
export default {
 props: {
  text: {
   type: String,
   default: ''
  }
 },
 render(h) {
  return <span class={this.$style.span1}>hello 222 - {this.text}</span>;
 }
};
</script>

<style lang="scss" module>
.span1 {
 color: blue;
 font-size: 40px;
}
</style>

Vue 3.x 中的 useCSSModule

引入 useCSSModule 函数后,在 Composition API 组件中使用 CSS Modules 就有了标准方案:

<template>
 <span :class="$style.span1">hello 333 - {{ text }}</span>
</template>

<script>
import { useCSSModule } from '@vue/composition-api';

export default {
 props: {
  text: {
   type: String,
   default: ''
  }
 },
 setup(props, context) {
  const $style = useCSSModule();
  return {
   $style
  };
 }
};
</script>

<style lang="scss" module>
.span1 {
 color: green;
 font-size: 30px;
}
</style>

其源码实现也是非常之简单,基本就是取出 this.$style 而已:

export const useCSSModule = (name = '$style'): Record<string, string> => {
 const instance = getCurrentInstance()
 if (!instance) {
  __DEV__ && warn(`useCSSModule must be called inside setup()`)
  return EMPTY_OBJ
 }

 const mod = (instance as any)[name]
 if (!mod) {
  __DEV__ &&
   warn(`Current instance does not have CSS module named "${name}".`)
  return EMPTY_OBJ
 }

 return mod as Record<string, string>
}

自定义 CSS Modules 注入名称

通过观察 useCSSModule 的源码发现,CSS Modules 的 name 好像可以不只是 $style;确实,在 .vue 文件中可以定义不止一个 <style module>,这可以通过设置 module 特性的值实现:

<style module="a">
 /* 注入标识符 a */
</style>

<style module="b">
 /* 注入标识符 b */
</style>

到此这篇关于Vue3新特性之在Composition API中使用CSS Modules的文章就介绍到这了,更多相关Vue3新特性之在Composition API中使用CSS Modules内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
js时间戳格式化成日期格式的多种方法
Nov 11 Javascript
浅析node.js中close事件
Nov 26 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
angular+ionic 的app上拉加载更新数据实现方法
Jan 16 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
uni-app之APP和小程序微信授权方法
May 09 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
Threejs实现滴滴官网首页地球动画功能
Jul 13 #Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 #Javascript
浅析JavaScript 函数防抖和节流
Jul 13 #Javascript
详解JavaScript 异步编程
Jul 13 #Javascript
javascript canvas时钟模拟器
Jul 13 #Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 #Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 #Javascript
You might like
ucenter通信原理分析
2015/01/09 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
vuex进阶知识点巩固
2018/05/20 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
js实现简单进度条效果
2020/03/25 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
react antd表格中渲染一张或多张图片的实例
2020/10/28 Javascript
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
Python实现多行注释的另类方法
2014/08/22 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
Python无损压缩图片的示例代码
2020/08/06 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
美国老牌主机服务商:iPage
2016/07/22 全球购物
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
Python实现数据的序列化操作详解
2022/07/07 Python