36 lines
1.6 KiB
Vue
36 lines
1.6 KiB
Vue
<template>
|
|
<div class="p-[50px]">
|
|
<d-radio-group direction="row" v-model="state.current" size="md" style="margin-bottom: 10px;">
|
|
<d-radio-button v-for="item in state.buttons" :key="item.name" :value="item.name">{{ item.label }}</d-radio-button>
|
|
</d-radio-group>
|
|
<div class="mt-32">
|
|
<renderer-preview v-if="state.current === 'preview'" :content="state.content" />
|
|
<renderer-form v-if="state.current === 'form'" :content="state.content" />
|
|
<renderer-md v-if="state.current === 'render'" :content="state.markdown" :delay="false" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { reactive } from 'vue';
|
|
import RendererPreview from './renderer-yaml/preview';
|
|
import RendererForm from './renderer-yaml/form';
|
|
import RendererMd from './renderer-yaml/components/renderer-md/index.vue';
|
|
import { validateSchema } from './renderer-yaml/helper';
|
|
import { mockContent } from './renderer-yaml/mock/data';
|
|
import toMarkdown from './renderer-yaml/helper/toMarkdown';
|
|
interface State {
|
|
content: string,
|
|
markdown: string,
|
|
current: string,
|
|
buttons: Record<string, string>[]
|
|
}
|
|
defineOptions({ name: 'renderMdExample1'})
|
|
const state:State = reactive({
|
|
content: mockContent,
|
|
markdown: '',
|
|
// preview form render
|
|
current: 'form',
|
|
buttons: [{ name: 'preview', label: '预览' }, { name: 'form', label: '提交' }, { name: 'render', label: '渲染'}]
|
|
})
|
|
state.markdown = toMarkdown(validateSchema(mockContent)?.body || []);
|
|
</script> |