From 213f60c23d1f684ecc66353bbf08775f7b85a121 Mon Sep 17 00:00:00 2001
From: ymwang <wangyanming602@gmail.com>
Date: Thu, 22 May 2025 09:27:00 +0000
Subject: [PATCH] =?UTF-8?q?update=20docs/zh/integration/vue.md.=201.=20vue?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=B8=AD=E4=B8=80=E8=88=AC=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?class=EF=BC=8Creact=E4=B8=AD=E6=89=8D=E4=BD=BF=E7=94=A8classNam?=
 =?UTF-8?q?e=EF=BC=8C=E6=88=91=E7=9C=8B=E4=BD=BF=E7=94=A8=E4=B8=ADclass?=
 =?UTF-8?q?=E4=B9=9F=E6=98=AF=E6=94=AF=E6=8C=81=E7=9A=84=EF=BC=8C=E5=AE=98?=
 =?UTF-8?q?=E6=96=B9=E7=A4=BA=E4=BE=8B=E5=BA=94=E8=AF=A5=E6=A0=87=E5=87=86?=
 =?UTF-8?q?=E5=8C=96=E4=B8=80=E7=82=B9=202.=20=E5=8A=A0=E4=BA=86css?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=A0=B7=E5=BC=8F=EF=BC=8C=E7=9C=8B=E8=B5=B7?=
 =?UTF-8?q?=E6=9D=A5=E5=83=8F=E6=98=AF=E4=B8=B4=E6=97=B6=E5=8A=A0=E7=9A=84?=
 =?UTF-8?q?=EF=BC=8C=E4=B8=8D=E4=B8=93=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: ymwang <wangyanming602@gmail.com>
---
 docs/zh/integration/vue.md | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/docs/zh/integration/vue.md b/docs/zh/integration/vue.md
index 4a55151..b38b727 100644
--- a/docs/zh/integration/vue.md
+++ b/docs/zh/integration/vue.md
@@ -17,7 +17,7 @@ npm install @tinyflow-ai/vue
 <template>
     <div style="width: 100%; height: calc(100vh - 16px)">
         <Tinyflow
-            :className="'custom-class'"
+            class="custom-class"
             :style="{ width: '100%', height: '100%' }"
             :data="initialData"
         />
@@ -39,7 +39,7 @@ npm install @tinyflow-ai/vue
 ## 属性说明
 | 属性名 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
-| className | string | '' | 自定义类名，用于为组件添加额外的样式类。 |
+| class | string | '' | 自定义类名，用于为组件添加额外的样式类。 |
 | style | Record<string, string> | {} | 自定义内联样式，用于动态设置组件的宽度、高度等样式属性。 |
 | data | Record<string, any> | {} | 初始化数据，包含流程图的节点 (nodes) 和边 (edges) 等信息。 |
 
@@ -91,7 +91,7 @@ const fetchData = () => {
     <h1>Tinyflow 示例</h1>
     <Tinyflow
       ref="tinyflowRef"
-      :className="'custom-tinyflow'"
+      class="custom-tinyflow"
       :style="{ width: '100%', height: '500px', border: '1px solid #ccc' }"
       :data="initialData"
     />
@@ -126,6 +126,7 @@ const fetchData = () => {
 
 
 使用Antd Vue时，出现checkBox 无法显示的问题可以在使用页面增加一下样式
+```css
 /* 添加样式覆盖 */
 /deep/ .custom-tinyflow {
 	select {
@@ -141,6 +142,8 @@ const fetchData = () => {
 		border: 1px solid #ccc;
 	}
 }
+```
+```css
 /* 添加checkbox交互样式 */
 /deep/ .custom-tinyflow {
 	input[type="checkbox"] {
@@ -176,4 +179,4 @@ const fetchData = () => {
 		}
 	}
 }
-
+```
-- 
Gitee