From b19d937fd8f1f0ff8b27b660966e3a4495b1d5ef Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期四, 04 七月 2024 11:29:30 +0800
Subject: [PATCH] 高级表单优化
---
src/views/demo/editor/markdown/index.vue | 58 +++++++++++++++++++++++-----------------------------------
1 files changed, 23 insertions(+), 35 deletions(-)
diff --git a/src/views/demo/editor/markdown/index.vue b/src/views/demo/editor/markdown/index.vue
index d88689c..14e4baf 100644
--- a/src/views/demo/editor/markdown/index.vue
+++ b/src/views/demo/editor/markdown/index.vue
@@ -4,30 +4,28 @@
<a-button @click="toggleTheme" class="mb-2" type="primary"> 榛戞殫涓婚 </a-button>
<a-button @click="clearValue" class="mb-2" type="default"> 娓呯┖鍐呭 </a-button>
<MarkDown
- v-model:value="value"
+ v-model:value="valueRef"
@change="handleChange"
ref="markDownRef"
placeholder="杩欐槸鍗犱綅鏂囨湰"
/>
</div>
<div class="mt-2">
- <a-card title="Markdown Viewer 缁勪欢婕旂ず">
- <MarkdownViewer :value="value" />
- </a-card>
+ <Card title="Markdown Viewer 缁勪欢婕旂ず">
+ <MarkdownViewer :value="valueRef" />
+ </Card>
</div>
</PageWrapper>
</template>
-<script lang="ts">
- import { defineComponent, ref, unref } from 'vue';
- import { MarkDown, MarkDownActionType, MarkdownViewer } from '/@/components/Markdown';
- import { PageWrapper } from '/@/components/Page';
+<script lang="ts" setup>
+ import { ref, unref } from 'vue';
+ import { MarkDown, MarkDownActionType, MarkdownViewer } from '@/components/Markdown';
+ import { PageWrapper } from '@/components/Page';
import { Card } from 'ant-design-vue';
+ import { type Nullable } from '@vben/types';
- export default defineComponent({
- components: { MarkDown, PageWrapper, MarkdownViewer, ACard: Card },
- setup() {
- const markDownRef = ref<Nullable<MarkDownActionType>>(null);
- const valueRef = ref(`
+ const markDownRef = ref<Nullable<MarkDownActionType>>(null);
+ const valueRef = ref(`
# 鏍囬h1
##### 鏍囬h5
@@ -70,28 +68,18 @@
| 4 | 5 | 6 |
`);
- function toggleTheme() {
- const markDown = unref(markDownRef);
- if (!markDown) return;
- const vditor = markDown.getVditor();
- vditor.setTheme('dark', 'dark', 'dracula');
- }
+ function toggleTheme() {
+ const markDown = unref(markDownRef);
+ if (!markDown) return;
+ const vditor = markDown.getVditor();
+ vditor.setTheme('dark', 'dark', 'dracula');
+ }
- function handleChange(v: string) {
- valueRef.value = v;
- }
+ function handleChange(v: string) {
+ valueRef.value = v;
+ }
- function clearValue() {
- valueRef.value = '';
- }
-
- return {
- value: valueRef,
- toggleTheme,
- markDownRef,
- handleChange,
- clearValue,
- };
- },
- });
+ function clearValue() {
+ valueRef.value = '';
+ }
</script>
--
Gitblit v1.9.3