搜索结果列表页面开发

src/components/renderer-yaml/example.vue

@@ -0,0 +1,36 @@
+<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>