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