| 提交 | 用户 | age | ||
| a81268 | 1 | <template> |
| V | 2 | <div class="h-full"> |
| 55e9d9 | 3 | <CodeMirrorEditor |
| V | 4 | :value="getValue" |
| 5 | @change="handleValueChange" | |
| 6 | :mode="mode" | |
| 7 | :readonly="readonly" | |
| 8 | /> | |
| a81268 | 9 | </div> |
| V | 10 | </template> |
| 11 | ||
| 8fa601 | 12 | <script lang="ts"> |
| 6cadcf | 13 | export const MODE = { |
| a81268 | 14 | JSON: 'application/json', |
| V | 15 | html: 'htmlmixed', |
| 16 | js: 'javascript', | |
| 17 | }; | |
| 8fa601 | 18 | </script> |
| V | 19 | <script lang="ts" setup> |
| 20 | import { computed } from 'vue'; | |
| 21 | import CodeMirrorEditor from './codemirror/CodeMirror.vue'; | |
| 22 | import { isString } from '/@/utils/is'; | |
| 55e9d9 | 23 | |
| 8fa601 | 24 | const props = defineProps({ |
| 55e9d9 | 25 | value: { type: [Object, String] as PropType<Record<string, any> | string> }, |
| V | 26 | mode: { type: String, default: MODE.JSON }, |
| 27 | readonly: { type: Boolean }, | |
| e7c963 | 28 | autoFormat: { type: Boolean, default: true }, |
| a81268 | 29 | }); |
| 8fa601 | 30 | |
| e7c963 | 31 | const emit = defineEmits(['change', 'update:value', 'format-error']); |
| 8fa601 | 32 | |
| V | 33 | const getValue = computed(() => { |
| e7c963 | 34 | const { value, mode, autoFormat } = props; |
| 无 | 35 | if (!autoFormat || mode !== MODE.JSON) { |
| 8fa601 | 36 | return value as string; |
| V | 37 | } |
| e7c963 | 38 | let result = value; |
| 无 | 39 | if (isString(value)) { |
| 40 | try { | |
| 41 | result = JSON.parse(value); | |
| 42 | } catch (e) { | |
| 43 | emit('format-error', value); | |
| 44 | return value as string; | |
| 45 | } | |
| 46 | } | |
| 47 | return JSON.stringify(result, null, 2); | |
| 8fa601 | 48 | }); |
| V | 49 | |
| 50 | function handleValueChange(v) { | |
| 51 | emit('update:value', v); | |
| 52 | emit('change', v); | |
| 53 | } | |
| a81268 | 54 | </script> |
