| 提交 | 用户 | age | ||
| 5fb069 | 1 | <template> |
| 31ff05 | 2 | <PageWrapper title="MarkDown组件示例"> |
| 5fb069 | 3 | <a-button @click="toggleTheme" class="mb-2" type="primary">黑暗主题</a-button> |
| 7db0c5 | 4 | <MarkDown :value="value" @change="handleChange" ref="markDownRef" /> |
| 31ff05 | 5 | </PageWrapper> |
| 5fb069 | 6 | </template> |
| V | 7 | <script lang="ts"> |
| 8 | import { defineComponent, ref, unref } from 'vue'; | |
| 9 | import { MarkDown, MarkDownActionType } from '/@/components/Markdown'; | |
| 31ff05 | 10 | import { PageWrapper } from '/@/components/Page'; |
| V | 11 | |
| 5fb069 | 12 | export default defineComponent({ |
| 31ff05 | 13 | components: { MarkDown, PageWrapper }, |
| 5fb069 | 14 | setup() { |
| V | 15 | const markDownRef = ref<Nullable<MarkDownActionType>>(null); |
| 16 | const valueRef = ref(` | |
| 17 | # title | |
| 18 | ||
| 19 | # content | |
| 20 | `); | |
| 21 | ||
| 22 | function toggleTheme() { | |
| 23 | const markDown = unref(markDownRef); | |
| 24 | if (!markDown) return; | |
| 25 | const vditor = markDown.getVditor(); | |
| 26 | vditor.setTheme('dark'); | |
| 27 | } | |
| 7db0c5 | 28 | |
| V | 29 | function handleChange(v: string) { |
| 30 | valueRef.value = v; | |
| 31 | } | |
| 32 | ||
| 5fb069 | 33 | return { |
| V | 34 | value: valueRef, |
| 35 | toggleTheme, | |
| 36 | markDownRef, | |
| 7db0c5 | 37 | handleChange, |
| 5fb069 | 38 | }; |
| V | 39 | }, |
| 40 | }); | |
| 41 | </script> | |
