chore: fix type:check error (#3139)

bowen

2023-10-12 f87e07840217af1bb059200eba04100e44c5d783

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<template>
  <div ref="viewerRef" id="markdownViewer" :class="$props.class"></div>
</template>
 
<script lang="ts" setup>
  import { onBeforeUnmount, onDeactivated, Ref, ref, unref, watch } from 'vue';
  import VditorPreview from 'vditor/dist/method.min';
  import { onMountedOrActivated } from '@vben/hooks';
  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
  import { getTheme } from './getTheme';
 
  const props = defineProps({
    value: { type: String },
    class: { type: String },
  });
  const viewerRef = ref(null);
  const vditorPreviewRef = ref(null) as Ref<VditorPreview | null>;
  const { getDarkMode } = useRootSetting();
 
  function init() {
    const viewerEl = unref(viewerRef);
    vditorPreviewRef.value = VditorPreview.preview(viewerEl, props.value, {
      mode: getTheme(getDarkMode.value, 'content'),
      theme: {
        // 设置内容主题
        current: getTheme(getDarkMode.value, 'content'),
      },
      hljs: {
        // 设置代码块主题
        style: getTheme(getDarkMode.value, 'code'),
      },
    });
  }
  watch(
    () => getDarkMode.value,
    (val) => {
      VditorPreview.setContentTheme(getTheme(val, 'content'));
      VditorPreview.setCodeTheme(getTheme(val, 'code'));
      init();
    },
  );
 
  watch(
    () => props.value,
    (v, oldValue) => {
      v !== oldValue && init();
    },
  );
 
  function destroy() {
    const vditorInstance = unref(vditorPreviewRef);
    if (!vditorInstance) return;
    try {
      vditorInstance?.destroy?.();
    } catch (error) {
      //
    }
    vditorPreviewRef.value = null;
  }
 
  onMountedOrActivated(init);
 
  onBeforeUnmount(destroy);
  onDeactivated(destroy);
</script>