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() || ''; |