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