Showing
1 changed file
with
21 additions
and
12 deletions
1 | 1 | <script lang="ts" setup> |
2 | - import { ref } from 'vue'; | |
2 | + import { ref, watch } from 'vue'; | |
3 | 3 | import JSONEditor, { JSONEditorOptions } from 'jsoneditor'; |
4 | 4 | import 'jsoneditor/dist/jsoneditor.min.css'; |
5 | 5 | import { unref } from 'vue'; |
... | ... | @@ -40,6 +40,8 @@ |
40 | 40 | |
41 | 41 | const editoreRef = ref<JSONEditor>(); |
42 | 42 | |
43 | + const isFocus = ref(false); | |
44 | + | |
43 | 45 | const handleChange = (value: any) => { |
44 | 46 | emit(EventEnum.UPDATE_VALUE, value, unref(editoreRef)); |
45 | 47 | emit(EventEnum.CHANGE, value, unref(editoreRef)); |
... | ... | @@ -54,8 +56,14 @@ |
54 | 56 | return { |
55 | 57 | ...options, |
56 | 58 | onChangeText: handleChange, |
57 | - onBlur: (event: Event) => handleEmit(event, EventEnum.BLUR), | |
58 | - onFocus: (event: Event) => handleEmit(event, EventEnum.FOCUS), | |
59 | + onBlur: (event: Event) => { | |
60 | + isFocus.value = false; | |
61 | + handleEmit(event, EventEnum.BLUR); | |
62 | + }, | |
63 | + onFocus: (event: Event) => { | |
64 | + isFocus.value = true; | |
65 | + handleEmit(event, EventEnum.FOCUS); | |
66 | + }, | |
59 | 67 | } as JSONEditorOptions; |
60 | 68 | }); |
61 | 69 | |
... | ... | @@ -63,15 +71,16 @@ |
63 | 71 | editoreRef.value = new JSONEditor(unref(jsonEditorElRef), unref(getOptions)); |
64 | 72 | }; |
65 | 73 | |
66 | - // watch( | |
67 | - // () => props.value, | |
68 | - // (target) => { | |
69 | - // unref(editoreRef)?.setText(target || ''); | |
70 | - // }, | |
71 | - // { | |
72 | - // immediate: true, | |
73 | - // } | |
74 | - // ); | |
74 | + watch( | |
75 | + () => props.value, | |
76 | + (target) => { | |
77 | + if (unref(isFocus)) return; | |
78 | + unref(editoreRef)?.setText(target || ''); | |
79 | + }, | |
80 | + { | |
81 | + immediate: true, | |
82 | + } | |
83 | + ); | |
75 | 84 | |
76 | 85 | const get = (): string => { |
77 | 86 | return unref(editoreRef)?.getText() || ''; | ... | ... |