| 提交 | 用户 | 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'; |
| a89e49 | 22 | import { getTheme } from './getTheme'; |
| 73c8e0 | 23 | |
| 7db0c5 | 24 | type Lang = 'zh_CN' | 'en_US' | 'ja_JP' | 'ko_KR' | undefined; |
| 3b2c40 | 25 | |
| 5fb069 | 26 | export default defineComponent({ |
| 144ab5 | 27 | inheritAttrs: false, |
| 5fb069 | 28 | props: { |
| 3b2c40 | 29 | height: { type: Number, default: 360 }, |
| V | 30 | value: { type: String, default: '' }, |
| 5fb069 | 31 | }, |
| d95815 | 32 | emits: ['change', 'get', 'update:value'], |
| 5fb069 | 33 | setup(props, { attrs, emit }) { |
| 73c8e0 | 34 | const wrapRef = ref<ElRef>(null); |
| e15b4f | 35 | const vditorRef = ref(null) as Ref<Nullable<Vditor>>; |
| 5fb069 | 36 | const initedRef = ref(false); |
| 144ab5 | 37 | |
| V | 38 | const modalFn = useModalContext(); |
| 5fb069 | 39 | |
| f6cef1 | 40 | const { getLocale } = useLocale(); |
| 5b8eb4 | 41 | const { getDarkMode } = useRootSetting(); |
| 0bb9c0 | 42 | const valueRef = ref(props.value || ''); |
| 7db0c5 | 43 | |
| 5b8eb4 | 44 | watch( |
| V | 45 | [() => getDarkMode.value, () => initedRef.value], |
| d95815 | 46 | ([val, inited]) => { |
| 无 | 47 | if (!inited) { |
| 5b8eb4 | 48 | return; |
| V | 49 | } |
| a89e49 | 50 | instance |
| W | 51 | .getVditor() |
| 52 | ?.setTheme(getTheme(val) as any, getTheme(val, 'content'), getTheme(val, 'code')); | |
| 5b8eb4 | 53 | }, |
| V | 54 | { |
| 55 | immediate: true, | |
| 56 | flush: 'post', | |
| 56a966 | 57 | }, |
| d95815 | 58 | ); |
| 无 | 59 | |
| 60 | watch( | |
| 61 | () => props.value, | |
| 62 | (v) => { | |
| 63 | if (v !== valueRef.value) { | |
| 64 | instance.getVditor()?.setValue(v); | |
| 65 | } | |
| 35e134 | 66 | valueRef.value = v; |
| 56a966 | 67 | }, |
| 5b8eb4 | 68 | ); |
| 9edc28 | 69 | |
| 7db0c5 | 70 | const getCurrentLang = computed((): 'zh_CN' | 'en_US' | 'ja_JP' | 'ko_KR' => { |
| 9edc28 | 71 | let lang: Lang; |
| f6cef1 | 72 | switch (unref(getLocale)) { |
| 7db0c5 | 73 | case 'en': |
| 9edc28 | 74 | lang = 'en_US'; |
| 7db0c5 | 75 | break; |
| V | 76 | case 'ja': |
| 9edc28 | 77 | lang = 'ja_JP'; |
| 7db0c5 | 78 | break; |
| V | 79 | case 'ko': |
| 9edc28 | 80 | lang = 'ko_KR'; |
| 7db0c5 | 81 | break; |
| V | 82 | default: |
| 9edc28 | 83 | lang = 'zh_CN'; |
| 7db0c5 | 84 | } |
| 9edc28 | 85 | return lang; |
| 7db0c5 | 86 | }); |
| 5fb069 | 87 | function init() { |
| d95815 | 88 | const wrapEl = unref(wrapRef) as HTMLElement; |
| 5fb069 | 89 | if (!wrapEl) return; |
| 73c8e0 | 90 | const bindValue = { ...attrs, ...props }; |
| 35e134 | 91 | const insEditor = new Vditor(wrapEl, { |
| a89e49 | 92 | // 设置外观主题 |
| W | 93 | theme: getTheme(getDarkMode.value) as any, |
| 7db0c5 | 94 | lang: unref(getCurrentLang), |
| 5fb069 | 95 | mode: 'sv', |
| c8017b | 96 | fullscreen: { |
| V | 97 | index: 520, |
| 98 | }, | |
| 5fb069 | 99 | preview: { |
| a89e49 | 100 | theme: { |
| W | 101 | // 设置内容主题 |
| 102 | current: getTheme(getDarkMode.value, 'content'), | |
| 103 | }, | |
| 104 | hljs: { | |
| 105 | // 设置代码块主题 | |
| 106 | style: getTheme(getDarkMode.value, 'code'), | |
| 107 | }, | |
| 5fb069 | 108 | actions: [], |
| V | 109 | }, |
| 110 | input: (v) => { | |
| d95815 | 111 | valueRef.value = v; |
| 无 | 112 | emit('update:value', v); |
| 7db0c5 | 113 | emit('change', v); |
| V | 114 | }, |
| d95815 | 115 | after: () => { |
| 无 | 116 | nextTick(() => { |
| 117 | modalFn?.redoModalHeight?.(); | |
| 35e134 | 118 | insEditor.setValue(valueRef.value); |
| 无 | 119 | vditorRef.value = insEditor; |
| d95815 | 120 | initedRef.value = true; |
| 35e134 | 121 | emit('get', instance); |
| d95815 | 122 | }); |
| 无 | 123 | }, |
| 7db0c5 | 124 | blur: () => { |
| d95815 | 125 | //unref(vditorRef)?.setValue(props.value); |
| 5fb069 | 126 | }, |
| 73c8e0 | 127 | ...bindValue, |
| 5fb069 | 128 | cache: { |
| V | 129 | enable: false, |
| 130 | }, | |
| 131 | }); | |
| 132 | } | |
| 133 | ||
| 144ab5 | 134 | const instance = { |
| V | 135 | getVditor: (): Vditor => vditorRef.value!, |
| 136 | }; | |
| 137 | ||
| d95815 | 138 | function destroy() { |
| 5fb069 | 139 | const vditorInstance = unref(vditorRef); |
| V | 140 | if (!vditorInstance) return; |
| 08df19 | 141 | try { |
| V | 142 | vditorInstance?.destroy?.(); |
| 143 | } catch (error) {} | |
| d95815 | 144 | vditorRef.value = null; |
| 35e134 | 145 | initedRef.value = false; |
| d95815 | 146 | } |
| 无 | 147 | |
| 35e134 | 148 | onMountedOrActivated(init); |
| 5fb069 | 149 | |
| d95815 | 150 | onBeforeUnmount(destroy); |
| 无 | 151 | onDeactivated(destroy); |
| 5fb069 | 152 | return { |
| V | 153 | wrapRef, |
| 144ab5 | 154 | ...instance, |
| 5fb069 | 155 | }; |
| V | 156 | }, |
| 157 | }); | |
| 158 | </script> | |
