| 提交 | 用户 | age | ||
| 5fb069 | 1 | <template> |
| 9edc28 | 2 | <div ref="wrapRef"></div> |
| 5fb069 | 3 | </template> |
| V | 4 | <script lang="ts"> |
| e15b4f | 5 | import type { Ref } from 'vue'; |
| 9edc28 | 6 | import { |
| V | 7 | defineComponent, |
| 8 | ref, | |
| 9 | unref, | |
| 10 | nextTick, | |
| 11 | computed, | |
| 5b8eb4 | 12 | watch, |
| d95815 | 13 | onBeforeUnmount, |
| 无 | 14 | onDeactivated, |
| 9edc28 | 15 | } from 'vue'; |
| 5fb069 | 16 | import Vditor from 'vditor'; |
| V | 17 | import 'vditor/dist/index.css'; |
| 99ac30 | 18 | import { useLocale } from '/@/locales/useLocale'; |
| 144ab5 | 19 | import { useModalContext } from '../../Modal'; |
| 5b8eb4 | 20 | import { useRootSetting } from '/@/hooks/setting/useRootSetting'; |
| d95815 | 21 | import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated'; |
| 73c8e0 | 22 | |
| 7db0c5 | 23 | type Lang = 'zh_CN' | 'en_US' | 'ja_JP' | 'ko_KR' | undefined; |
| 3b2c40 | 24 | |
| 5fb069 | 25 | export default defineComponent({ |
| 144ab5 | 26 | inheritAttrs: false, |
| 5fb069 | 27 | props: { |
| 3b2c40 | 28 | height: { type: Number, default: 360 }, |
| V | 29 | value: { type: String, default: '' }, |
| 5fb069 | 30 | }, |
| d95815 | 31 | emits: ['change', 'get', 'update:value'], |
| 5fb069 | 32 | setup(props, { attrs, emit }) { |
| 73c8e0 | 33 | const wrapRef = ref<ElRef>(null); |
| e15b4f | 34 | const vditorRef = ref(null) as Ref<Nullable<Vditor>>; |
| 5fb069 | 35 | const initedRef = ref(false); |
| 144ab5 | 36 | |
| V | 37 | const modalFn = useModalContext(); |
| 5fb069 | 38 | |
| f6cef1 | 39 | const { getLocale } = useLocale(); |
| 5b8eb4 | 40 | const { getDarkMode } = useRootSetting(); |
| d95815 | 41 | const valueRef = ref(''); |
| 7db0c5 | 42 | |
| 5b8eb4 | 43 | watch( |
| V | 44 | [() => getDarkMode.value, () => initedRef.value], |
| d95815 | 45 | ([val, inited]) => { |
| 无 | 46 | if (!inited) { |
| 5b8eb4 | 47 | return; |
| V | 48 | } |
| d95815 | 49 | const theme = val === 'dark' ? 'dark' : 'classic'; |
| 无 | 50 | instance.getVditor()?.setTheme(theme); |
| 5b8eb4 | 51 | }, |
| V | 52 | { |
| 53 | immediate: true, | |
| 54 | flush: 'post', | |
| 56a966 | 55 | }, |
| d95815 | 56 | ); |
| 无 | 57 | |
| 58 | watch( | |
| 59 | () => props.value, | |
| 60 | (v) => { | |
| 61 | if (v !== valueRef.value) { | |
| 62 | instance.getVditor()?.setValue(v); | |
| 63 | } | |
| 35e134 | 64 | valueRef.value = v; |
| 56a966 | 65 | }, |
| 5b8eb4 | 66 | ); |
| 9edc28 | 67 | |
| 7db0c5 | 68 | const getCurrentLang = computed((): 'zh_CN' | 'en_US' | 'ja_JP' | 'ko_KR' => { |
| 9edc28 | 69 | let lang: Lang; |
| f6cef1 | 70 | switch (unref(getLocale)) { |
| 7db0c5 | 71 | case 'en': |
| 9edc28 | 72 | lang = 'en_US'; |
| 7db0c5 | 73 | break; |
| V | 74 | case 'ja': |
| 9edc28 | 75 | lang = 'ja_JP'; |
| 7db0c5 | 76 | break; |
| V | 77 | case 'ko': |
| 9edc28 | 78 | lang = 'ko_KR'; |
| 7db0c5 | 79 | break; |
| V | 80 | default: |
| 9edc28 | 81 | lang = 'zh_CN'; |
| 7db0c5 | 82 | } |
| 9edc28 | 83 | return lang; |
| 7db0c5 | 84 | }); |
| 5fb069 | 85 | function init() { |
| d95815 | 86 | const wrapEl = unref(wrapRef) as HTMLElement; |
| 5fb069 | 87 | if (!wrapEl) return; |
| 73c8e0 | 88 | const bindValue = { ...attrs, ...props }; |
| 35e134 | 89 | const insEditor = new Vditor(wrapEl, { |
| d95815 | 90 | theme: getDarkMode.value === 'dark' ? 'dark' : 'classic', |
| 7db0c5 | 91 | lang: unref(getCurrentLang), |
| 5fb069 | 92 | mode: 'sv', |
| V | 93 | preview: { |
| 94 | actions: [], | |
| 95 | }, | |
| 96 | input: (v) => { | |
| d95815 | 97 | valueRef.value = v; |
| 无 | 98 | emit('update:value', v); |
| 7db0c5 | 99 | emit('change', v); |
| V | 100 | }, |
| d95815 | 101 | after: () => { |
| 无 | 102 | nextTick(() => { |
| 103 | modalFn?.redoModalHeight?.(); | |
| 35e134 | 104 | insEditor.setValue(valueRef.value); |
| 无 | 105 | vditorRef.value = insEditor; |
| d95815 | 106 | initedRef.value = true; |
| 35e134 | 107 | emit('get', instance); |
| d95815 | 108 | }); |
| 无 | 109 | }, |
| 7db0c5 | 110 | blur: () => { |
| d95815 | 111 | //unref(vditorRef)?.setValue(props.value); |
| 5fb069 | 112 | }, |
| 73c8e0 | 113 | ...bindValue, |
| 5fb069 | 114 | cache: { |
| V | 115 | enable: false, |
| 116 | }, | |
| 117 | }); | |
| 118 | } | |
| 119 | ||
| 144ab5 | 120 | const instance = { |
| V | 121 | getVditor: (): Vditor => vditorRef.value!, |
| 122 | }; | |
| 123 | ||
| d95815 | 124 | function destroy() { |
| 5fb069 | 125 | const vditorInstance = unref(vditorRef); |
| V | 126 | if (!vditorInstance) return; |
| 08df19 | 127 | try { |
| V | 128 | vditorInstance?.destroy?.(); |
| 129 | } catch (error) {} | |
| d95815 | 130 | vditorRef.value = null; |
| 35e134 | 131 | initedRef.value = false; |
| d95815 | 132 | } |
| 无 | 133 | |
| 35e134 | 134 | onMountedOrActivated(init); |
| 5fb069 | 135 | |
| d95815 | 136 | onBeforeUnmount(destroy); |
| 无 | 137 | onDeactivated(destroy); |
| 5fb069 | 138 | return { |
| V | 139 | wrapRef, |
| 144ab5 | 140 | ...instance, |
| 5fb069 | 141 | }; |
| V | 142 | }, |
| 143 | }); | |
| 144 | </script> | |
