diff --git a/CHANGELOG.md b/CHANGELOG.md index 50d80b7f..1fce2e78 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ - 全局表格加上id 方便进行缓存列排序的操作 - 支持菜单名称i18n - 登录页 验证码登录 +- Markdown编辑/预览组件(基于vditor) **BUG FIXES** diff --git a/apps/web-antd/src/views/演示使用自行删除/changelog/index.vue b/apps/web-antd/src/views/演示使用自行删除/changelog/index.vue index 5322a6b4..bd010347 100644 --- a/apps/web-antd/src/views/演示使用自行删除/changelog/index.vue +++ b/apps/web-antd/src/views/演示使用自行删除/changelog/index.vue @@ -1,15 +1,24 @@ diff --git a/packages/effects/common-ui/src/components/markdown/editor.vue b/packages/effects/common-ui/src/components/markdown/editor.vue index c476554c..8a64c67c 100644 --- a/packages/effects/common-ui/src/components/markdown/editor.vue +++ b/packages/effects/common-ui/src/components/markdown/editor.vue @@ -21,15 +21,38 @@ const props = defineProps({ type: [String, Number], default: 500, }, - // 编辑器唯一ID 缓存使用 + /** + * 编辑模式。默认值: 'wysiwyg' + * wysiwyg: 所见即所得 + * ir: 即时渲染 + * sv: 分屏预览 + */ + mode: { + type: String as PropType<'ir' | 'sv' | 'wysiwyg'>, + default: 'wysiwyg', + }, + // 编辑器唯一ID 缓存使用 可记录上次输入 id: { type: String, - required: true, + required: false, + default: '', + validator(value, props) { + if (!value && props.enableCache) { + console.warn('The id is required when enableCache is true'); + return false; + } + return true; + }, }, enableCache: { type: Boolean, default: false, }, + // 禁用编辑器 + disabled: { + type: Boolean, + default: false, + }, // 其他配置项 options: { type: Object as PropType, @@ -60,8 +83,19 @@ const content = defineModel('value', { default: '', }); +// 监听禁用 +function changeDisabled(disabled: boolean) { + if (disabled) { + vditorInstance.value?.disabled(); + } else { + vditorInstance.value?.enable(); + } +} +watch(() => props.disabled, changeDisabled); + onMounted(() => { vditorInstance.value = new Vditor(vditorRef.value!, { + mode: props.mode, value: content.value, height: props.height, lang: locale.value.replace('-', '_') as any, @@ -76,6 +110,8 @@ onMounted(() => { }, // 加载完成的事件 after() { + // 需要初始化就禁用的情况 + changeDisabled(props.disabled); emit('mounted'); }, ...props.options, diff --git a/packages/effects/common-ui/src/components/markdown/index.ts b/packages/effects/common-ui/src/components/markdown/index.ts index 76e8f668..dfea14d6 100644 --- a/packages/effects/common-ui/src/components/markdown/index.ts +++ b/packages/effects/common-ui/src/components/markdown/index.ts @@ -1,2 +1,2 @@ export { default as MarkdownEditor } from './editor.vue'; -export { default as MarkdownPreview } from './preview.vue'; +export { default as MarkdownPreviewer } from './preview.vue'; diff --git a/packages/effects/common-ui/src/components/markdown/preview.vue b/packages/effects/common-ui/src/components/markdown/preview.vue index 52abd2b6..a0c5cabb 100644 --- a/packages/effects/common-ui/src/components/markdown/preview.vue +++ b/packages/effects/common-ui/src/components/markdown/preview.vue @@ -17,18 +17,10 @@ import 'vditor/dist/index.css'; const props = defineProps({ // 编辑器高度 height: { - type: Number, + // string或者number类型 + type: [String, Number], default: 500, }, - // 编辑器唯一ID 缓存使用 - id: { - type: String, - required: true, - }, - enableCache: { - type: Boolean, - default: false, - }, // 其他配置项 options: { type: Object as PropType, @@ -65,10 +57,11 @@ onMounted(() => { height: props.height, lang: locale.value.replace('-', '_') as any, cache: { - enable: props.enableCache, - id: props.id, + enable: false, }, theme: isDark.value ? 'dark' : 'classic', + // 预览(只读模式) 不显示工具栏 + toolbar: [], // 手动响应式 input(value) { content.value = value; @@ -76,6 +69,8 @@ onMounted(() => { // 加载完成的事件 after() { emit('mounted'); + // 禁用编辑器 + vditorInstance.value?.disabled(); }, ...props.options, }); @@ -90,3 +85,10 @@ onBeforeUnmount(() => { + +