Showing
1 changed file
with
21 additions
and
12 deletions
1 | <script lang="ts" setup> | 1 | <script lang="ts" setup> |
2 | - import { ref } from 'vue'; | 2 | + import { ref, watch } from 'vue'; |
3 | import JSONEditor, { JSONEditorOptions } from 'jsoneditor'; | 3 | import JSONEditor, { JSONEditorOptions } from 'jsoneditor'; |
4 | import 'jsoneditor/dist/jsoneditor.min.css'; | 4 | import 'jsoneditor/dist/jsoneditor.min.css'; |
5 | import { unref } from 'vue'; | 5 | import { unref } from 'vue'; |
@@ -40,6 +40,8 @@ | @@ -40,6 +40,8 @@ | ||
40 | 40 | ||
41 | const editoreRef = ref<JSONEditor>(); | 41 | const editoreRef = ref<JSONEditor>(); |
42 | 42 | ||
43 | + const isFocus = ref(false); | ||
44 | + | ||
43 | const handleChange = (value: any) => { | 45 | const handleChange = (value: any) => { |
44 | emit(EventEnum.UPDATE_VALUE, value, unref(editoreRef)); | 46 | emit(EventEnum.UPDATE_VALUE, value, unref(editoreRef)); |
45 | emit(EventEnum.CHANGE, value, unref(editoreRef)); | 47 | emit(EventEnum.CHANGE, value, unref(editoreRef)); |
@@ -54,8 +56,14 @@ | @@ -54,8 +56,14 @@ | ||
54 | return { | 56 | return { |
55 | ...options, | 57 | ...options, |
56 | onChangeText: handleChange, | 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 | } as JSONEditorOptions; | 67 | } as JSONEditorOptions; |
60 | }); | 68 | }); |
61 | 69 | ||
@@ -63,15 +71,16 @@ | @@ -63,15 +71,16 @@ | ||
63 | editoreRef.value = new JSONEditor(unref(jsonEditorElRef), unref(getOptions)); | 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 | const get = (): string => { | 85 | const get = (): string => { |
77 | return unref(editoreRef)?.getText() || ''; | 86 | return unref(editoreRef)?.getText() || ''; |