From 25757ca7add15ba3fff844164bd59b8a53385741 Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Wed, 10 Apr 2024 14:20:46 +0800
Subject: [PATCH] =?UTF-8?q?feat(css):=20=E8=A1=A5=E5=85=85=20CSS=20Modules?=
 =?UTF-8?q?=20=E5=B9=B3=E5=8F=B0=E5=85=BC=E5=AE=B9=E6=80=A7=E5=8F=8A?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/vue/README.md | 38 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/docs/vue/README.md b/docs/vue/README.md
index 5509a259..7123c3cb 100644
--- a/docs/vue/README.md
+++ b/docs/vue/README.md
@@ -187,8 +187,9 @@ const doubleCount = computed<number>(() : number => {
 
 一个 `<style module>` 标签会被编译为 `CSS Modules` 并且将生成的 CSS class 作为 `$style` 对象暴露给组件：
 
+```html
 <template>
-  <view :class="$style.red">This should be red</view>
+  <text :class="$style.red">This should be red</text>
 </template>
 
 <style module>
@@ -196,6 +197,41 @@ const doubleCount = computed<number>(() : number => {
   color: red;
 }
 </style>
+```
+
+得出的 class 将被哈希化以避免冲突，实现了同样的将 CSS 仅作用于当前组件的效果。
+
+**自定义注入名称**
+
+你可以通过给 `module` attribute 一个值来自定义注入 class 对象的属性名：
+
+```html
+<template>
+  <text :class="classes.red">red</text>
+</template>
+
+<style module="classes">
+.red {
+  color: red;
+}
+</style>
+```
+
+**与组合式 API 一同使用**
+
+可以通过 `useCssModule` API 在 `setup()` 和 `<script setup>` 中访问注入的 class。对于使用了自定义注入名称的 `<style module>` 块，useCssModule 接收一个匹配的 module attribute 值作为第一个参数：
+
+```html
+import { useCssModule } from 'vue'
+
+// 在 setup() 作用域中...
+// 默认情况下, 返回 <style module> 的 class
+useCssModule()
+
+// 具名情况下, 返回 <style module="classes"> 的 class
+useCssModule('classes')
+```
+
 
 ### CSS 中的 v-bind()
 
-- 
GitLab