提交 83c1683b 作者: 无木

feat(demo): add `JsonPreview` demo

添加JsonPreview组件的使用演示

close: #1146
上级 044e2e4e
...@@ -14,8 +14,8 @@ ...@@ -14,8 +14,8 @@
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref } from 'vue'; import { defineComponent, ref, unref, h } from 'vue';
import { CodeEditor } from '/@/components/CodeEditor'; import { CodeEditor, JsonPreview } from '/@/components/CodeEditor';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '/@/components/Page';
import { Radio, Space, Modal } from 'ant-design-vue'; import { Radio, Space, Modal } from 'ant-design-vue';
...@@ -82,7 +82,14 @@ ...@@ -82,7 +82,14 @@
} }
function showData() { 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 }; return { value, modeValue, handleModeChange, showData };
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论