canrd-outside / order-erp-front · Commits

Commit 83c1683bfdcf4ea33de771895b46e41f276969e8

Authored by 无木
1 parent 044e2e4e

feat(demo): add `JsonPreview` demo 

添加JsonPreview组件的使用演示

close: #1146
Inline Side-by-side
Showing 1 changed file with 10 additions and 3 deletions
src/views/demo/editor/json/index.vue
  View file @83c1683
... ... @@ -14,8 +14,8 @@
14 14 </PageWrapper>
15 15 </template>
16 16 <script lang="ts">
17   - import { defineComponent, ref } from 'vue';
18   - import { CodeEditor } from '/@/components/CodeEditor';
  17 + import { defineComponent, ref, unref, h } from 'vue';
  18 + import { CodeEditor, JsonPreview } from '/@/components/CodeEditor';
19 19 import { PageWrapper } from '/@/components/Page';
20 20 import { Radio, Space, Modal } from 'ant-design-vue';
21 21  
... ... @@ -82,7 +82,14 @@
82 82 }
83 83  
84 84 function showData() {
85   - Modal.info({ title: '编辑器当前值', content: value.value });
  85 + if (unref(modeValue) === 'application/json') {
  86 + Modal.info({
  87 + title: '编辑器当前值',
  88 + content: h(JsonPreview, { data: JSON.parse(value.value) }),
  89 + });
  90 + } else {
  91 + Modal.info({ title: '编辑器当前值', content: value.value });
  92 + }
86 93 }
87 94  
88 95 return { value, modeValue, handleModeChange, showData };
... ...