init

wangrong

2026-08-30 761e5c5fa871959f60e15c971c8d83f2b53d0af5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<script lang="ts" setup>
import { ref, PropType, watch, onMounted } from 'vue'
import { propTypes } from '@/utils/propTypes'
import { VAceEditor } from 'vue3-ace-editor'
import { formatJson, formatXml } from './format-utils'
import './ace-config'
 
const props = defineProps({
  height: [String, Number],
  data: propTypes.string.def(''),
  theme: propTypes.string.def('chrome'),
  init: Function,
  enableFormat: propTypes.bool.def(true),
  readOnly: propTypes.bool.def(true),
  modes: {
    type: Array as PropType<string[]>,
    default: () => ['text', 'json', 'xml']
  },
  mode: propTypes.string.def('text')
})
 
const formatData = ref('')
watch(formatData, () => {
  emits('update:modelValue', formatData.value)
})
 
watch([props.theme], () => {
  format()
})
onMounted(() => {
  format()
})
const editorInit = editor => {
  if (props.readOnly) {
    editor.setReadOnly(true)
  }
  if (props.init) {
    props.init(editor)
  }
}
const format = () => {
  if (props.enableFormat) {
    if (props.data) {
      switch (props.mode) {
        case 'json':
          formatData.value = formatJson(props.data)
          break
        case 'xml':
          formatData.value = formatXml(props.data)
          break
        default:
          formatData.value = props.data
      }
    }
  } else {
    formatData.value = props.data
  }
}
const emits = defineEmits(['update:modelValue'])
</script>
 
<template>
  <v-ace-editor
    v-model:value="formatData"
    :lang="mode"
    :theme="theme"
    :style="{ height }"
    @init="editorInit"
  />
</template>