From e26d8605f213baac120568e5e4a7e7c72abfba51 Mon Sep 17 00:00:00 2001 From: hdx <hdx@dcloud.io> Date: Wed, 10 Apr 2024 14:13:30 +0800 Subject: [PATCH] =?UTF-8?q?fix(v-bind-style):=20=E4=BF=AE=E6=AD=A3?= =?UTF-8?q?=E7=A4=BA=E4=BE=8B=E6=A8=A1=E7=89=88=E4=B8=AD=E7=9A=84=E6=A0=87?= =?UTF-8?q?=E7=AD=BE=E4=B8=BAtext?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/vue/README.md | 24 +++++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/docs/vue/README.md b/docs/vue/README.md index 31f00789..5509a259 100644 --- a/docs/vue/README.md +++ b/docs/vue/README.md @@ -179,6 +179,24 @@ const doubleCount = computed<number>(() : number => { </style> ``` +### CSS Modules + +|App|Web| +|:-:|:-:| +|x |4.0| + +一个 `<style module>` æ ‡ç¾ä¼šè¢«ç¼–译为 `CSS Modules` 并且将生æˆçš„ CSS class 作为 `$style` 对象暴露给组件: + +<template> + <view :class="$style.red">This should be red</view> +</template> + +<style module> +.red { + color: red; +} +</style> + ### CSS ä¸çš„ v-bind() |App|Web| @@ -189,7 +207,7 @@ const doubleCount = computed<number>(() : number => { ```html <template> - <div class="text">hello</div> + <text class="text">hello</text> </template> <script> @@ -219,11 +237,11 @@ const theme = { </script> <template> - <p>hello</p> + <text class="view">hello</text> </template> <style scoped> -p { +.text { color: v-bind('theme.color'); } </style> -- GitLab