fix(modal): height calc error #161

vben

2021-01-06 144ab577da06ff0bd1f258d1901b87864f232e45

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<template>
  <div ref="wrapRef" />
</template>
<script lang="ts">
  import { defineComponent, ref, onMounted, unref, onUnmounted, nextTick, computed } from 'vue';
  import Vditor from 'vditor';
  import 'vditor/dist/index.css';
 
  import { propTypes } from '/@/utils/propTypes';
  import { useLocale } from '/@/hooks/web/useLocale';
  import { useModalContext } from '../../Modal';
 
  type Lang = 'zh_CN' | 'en_US' | 'ja_JP' | 'ko_KR' | undefined;
  export default defineComponent({
    inheritAttrs: false,
    props: {
      height: propTypes.number.def(360),
      value: propTypes.string.def(''),
    },
    emits: ['change', 'get'],
    setup(props, { attrs, emit }) {
      const wrapRef = ref<ElRef>(null);
      const vditorRef = ref<Nullable<Vditor>>(null);
      const initedRef = ref(false);
 
      const modalFn = useModalContext();
 
      const lang = ref<Lang>();
 
      const { getLang } = useLocale();
 
      const getCurrentLang = computed((): 'zh_CN' | 'en_US' | 'ja_JP' | 'ko_KR' => {
        switch (unref(getLang)) {
          case 'en':
            lang.value = 'en_US';
            break;
          case 'ja':
            lang.value = 'ja_JP';
            break;
          case 'ko':
            lang.value = 'ko_KR';
            break;
          default:
            lang.value = 'zh_CN';
        }
        return lang.value;
      });
      function init() {
        const wrapEl = unref(wrapRef);
        if (!wrapEl) return;
        const bindValue = { ...attrs, ...props };
        vditorRef.value = new Vditor(wrapEl, {
          lang: unref(getCurrentLang),
          mode: 'sv',
          preview: {
            actions: [],
          },
          input: (v) => {
            // emit('update:value', v);
            emit('change', v);
          },
          blur: () => {
            unref(vditorRef)?.setValue(props.value);
          },
          ...bindValue,
          cache: {
            enable: false,
          },
        });
        initedRef.value = true;
      }
 
      const instance = {
        getVditor: (): Vditor => vditorRef.value!,
      };
 
      onMounted(() => {
        nextTick(() => {
          init();
          setTimeout(() => {
            modalFn?.redoModalHeight?.();
          }, 200);
        });
 
        emit('get', instance);
      });
 
      onUnmounted(() => {
        const vditorInstance = unref(vditorRef);
        if (!vditorInstance) return;
        try {
          vditorInstance?.destroy?.();
        } catch (error) {}
      });
 
      return {
        wrapRef,
        ...instance,
      };
    },
  });
</script>