| 提交 | 用户 | 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(` | |
| a89e49 | 31 | # 标题h1 |
| 5fb069 | 32 | |
| a89e49 | 33 | ##### 标题h5 |
| W | 34 | |
| 35 | **加粗** | |
| 36 | *斜体* | |
| 37 | ~~删除线~~ | |
| 38 | [链接](https://github.com/vbenjs/vue-vben-admin) | |
| 39 | ↓分割线↓ | |
| 40 | ||
| 41 | --- | |
| 42 | ||
| 43 | ||
| 44 | * 无序列表1 | |
| 45 | * 无序列表1.1 | |
| 46 | ||
| 47 | 1. 有序列表1 | |
| 48 | 2. 有序列表2 | |
| 49 | ||
| 50 | * [ ] 任务列表1 | |
| 51 | * [x] 任务列表2 | |
| 52 | ||
| 53 | > 引用示例 | |
| 54 | ||
| 55 | \`\`\`js | |
| 56 | // 代码块: | |
| 57 | (() => { | |
| 58 | var htmlRoot = document.getElementById('htmlRoot'); | |
| 59 | var theme = window.localStorage.getItem('__APP__DARK__MODE__'); | |
| 60 | if (htmlRoot && theme) { | |
| 61 | htmlRoot.setAttribute('data-theme', theme); | |
| 62 | theme = htmlRoot = null; | |
| 63 | } | |
| 64 | })(); | |
| 65 | \`\`\` | |
| 66 | ||
| 67 | | 表格 | 示例 | 🎉️ | | |
| 68 | | --- | --- | --- | | |
| 69 | | 1 | 2 | 3 | | |
| 70 | | 4 | 5 | 6 | | |
| 5fb069 | 71 | `); |
| V | 72 | |
| 73 | function toggleTheme() { | |
| 74 | const markDown = unref(markDownRef); | |
| 75 | if (!markDown) return; | |
| 76 | const vditor = markDown.getVditor(); | |
| a89e49 | 77 | vditor.setTheme('dark', 'dark', 'dracula'); |
| 5fb069 | 78 | } |
| 7db0c5 | 79 | |
| V | 80 | function handleChange(v: string) { |
| 81 | valueRef.value = v; | |
| 82 | } | |
| 83 | ||
| d95815 | 84 | function clearValue() { |
| 无 | 85 | valueRef.value = ''; |
| 86 | } | |
| 87 | ||
| 5fb069 | 88 | return { |
| V | 89 | value: valueRef, |
| 90 | toggleTheme, | |
| 91 | markDownRef, | |
| 7db0c5 | 92 | handleChange, |
| d95815 | 93 | clearValue, |
| 5fb069 | 94 | }; |
| V | 95 | }, |
| 96 | }); | |
| 97 | </script> | |
