| 提交 | 用户 | age | ||
| 5fb069 | 1 | <template> |
| 31ff05 | 2 | <PageWrapper title="MarkDown组件示例"> |
| 73dc49 | 3 | <div> |
| 无 | 4 | <a-button @click="toggleTheme" class="mb-2" type="primary"> 黑暗主题 </a-button> |
| 5 | <a-button @click="clearValue" class="mb-2" type="default"> 清空内容 </a-button> | |
| 6 | <MarkDown | |
| 7 | v-model:value="value" | |
| 8 | @change="handleChange" | |
| 9 | ref="markDownRef" | |
| 10 | placeholder="这是占位文本" | |
| 11 | /> | |
| 12 | </div> | |
| 13 | <div class="mt-2"> | |
| 14 | <a-card title="Markdown Viewer 组件演示"> | |
| 15 | <MarkdownViewer :value="value" /> | |
| 16 | </a-card> | |
| 17 | </div> | |
| 31ff05 | 18 | </PageWrapper> |
| 5fb069 | 19 | </template> |
| V | 20 | <script lang="ts"> |
| 21 | import { defineComponent, ref, unref } from 'vue'; | |
| 73dc49 | 22 | import { MarkDown, MarkDownActionType, MarkdownViewer } from '/@/components/Markdown'; |
| 31ff05 | 23 | import { PageWrapper } from '/@/components/Page'; |
| 73dc49 | 24 | import { Card } from 'ant-design-vue'; |
| 31ff05 | 25 | |
| 5fb069 | 26 | export default defineComponent({ |
| 73dc49 | 27 | components: { MarkDown, PageWrapper, MarkdownViewer, ACard: Card }, |
| 5fb069 | 28 | setup() { |
| V | 29 | const markDownRef = ref<Nullable<MarkDownActionType>>(null); |
| 30 | const valueRef = ref(` | |
| 31 | # title | |
| 32 | ||
| 33 | # content | |
| 34 | `); | |
| 35 | ||
| 36 | function toggleTheme() { | |
| 37 | const markDown = unref(markDownRef); | |
| 38 | if (!markDown) return; | |
| 39 | const vditor = markDown.getVditor(); | |
| 40 | vditor.setTheme('dark'); | |
| 41 | } | |
| 7db0c5 | 42 | |
| V | 43 | function handleChange(v: string) { |
| 44 | valueRef.value = v; | |
| 45 | } | |
| 46 | ||
| d95815 | 47 | function clearValue() { |
| 无 | 48 | valueRef.value = ''; |
| 49 | } | |
| 50 | ||
| 5fb069 | 51 | return { |
| V | 52 | value: valueRef, |
| 53 | toggleTheme, | |
| 54 | markDownRef, | |
| 7db0c5 | 55 | handleChange, |
| d95815 | 56 | clearValue, |
| 5fb069 | 57 | }; |
| V | 58 | }, |
| 59 | }); | |
| 60 | </script> | |
