Commit 83c1683bfdcf4ea33de771895b46e41f276969e8
1 parent
044e2e4e
feat(demo): add `JsonPreview` demo
添加JsonPreview组件的使用演示 close: #1146
Showing
1 changed file
with
10 additions
and
3 deletions
src/views/demo/editor/json/index.vue
| @@ -14,8 +14,8 @@ | @@ -14,8 +14,8 @@ | ||
| 14 | </PageWrapper> | 14 | </PageWrapper> |
| 15 | </template> | 15 | </template> |
| 16 | <script lang="ts"> | 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 | import { PageWrapper } from '/@/components/Page'; | 19 | import { PageWrapper } from '/@/components/Page'; |
| 20 | import { Radio, Space, Modal } from 'ant-design-vue'; | 20 | import { Radio, Space, Modal } from 'ant-design-vue'; |
| 21 | 21 | ||
| @@ -82,7 +82,14 @@ | @@ -82,7 +82,14 @@ | ||
| 82 | } | 82 | } |
| 83 | 83 | ||
| 84 | function showData() { | 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 | return { value, modeValue, handleModeChange, showData }; | 95 | return { value, modeValue, handleModeChange, showData }; |