在 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"[$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>
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。