From 83c1683bfdcf4ea33de771895b46e41f276969e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E6=9C=A8?= <netfan@foxmail.com>
Date: Mon, 6 Sep 2021 20:36:19 +0800
Subject: [PATCH] feat(demo): add `JsonPreview` demo
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加JsonPreview组件的使用演示

close: #1146
---
 src/views/demo/editor/json/index.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/views/demo/editor/json/index.vue b/src/views/demo/editor/json/index.vue
index 622da81bd75..ada1d5b38a2 100644
--- a/src/views/demo/editor/json/index.vue
+++ b/src/views/demo/editor/json/index.vue
@@ -14,8 +14,8 @@
   </PageWrapper>
 </template>
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { CodeEditor } from '/@/components/CodeEditor';
+  import { defineComponent, ref, unref, h } from 'vue';
+  import { CodeEditor, JsonPreview } from '/@/components/CodeEditor';
   import { PageWrapper } from '/@/components/Page';
   import { Radio, Space, Modal } from 'ant-design-vue';
 
@@ -82,7 +82,14 @@
       }
 
       function showData() {
-        Modal.info({ title: '编辑器当前值', content: value.value });
+        if (unref(modeValue) === 'application/json') {
+          Modal.info({
+            title: '编辑器当前值',
+            content: h(JsonPreview, { data: JSON.parse(value.value) }),
+          });
+        } else {
+          Modal.info({ title: '编辑器当前值', content: value.value });
+        }
       }
 
       return { value, modeValue, handleModeChange, showData };