vue3中json编辑器_vue json 编辑器

vue3的第三方插件 实现json编辑器

• 安装依赖

npm i vue3-ace-editor
1

• 引入

  import {reactive,defineComponent} from 'vue'  
  import {VAceEditor} from 'vue3-ace-editor';
  import "ace-builds/webpack-resolver";
  import 'ace-builds/src-noconflict/mode-json';
  import 'ace-builds/src-noconflict/theme-chrome';
  import 'ace-builds/src-noconflict/ext-language_tools';
1
2
3
4
5
6

• 使用 要设置高度，本身没有高度

<v-ace-editor
  v-model:value="dataForm.textareashow"
  @init="initFail"
  lang="json"
  :theme="aceConfig.theme"
  :options="aceConfig.options"
  :readonly="aceConfig.readOnly"
  style="height:300px"
  class="ace-editor"/>
1
2
3
4
5
6
7
8
9

• 初始化

注意 ： JSON.stringify(dataForm.Example,null,2)，将json数据格式化，不然显示在一行

<script lang='ts'>
import { ref,reactive,defineComponent} from 'vue'
import {VAceEditor} from 'vue3-ace-editor';
import "ace-builds/webpack-resolver";
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/theme-chrome';
import 'ace-builds/src-noconflict/ext-language_tools';
export default defineComponent({
  components: {VAceEditor},
  setup(props, context) {
    //ace编辑器配置
    const aceConfig = reactive({
      lang: 'json', //解析json
      theme: 'chrome', //主题
      readOnly: false, //是否只读
      options: {
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true,
        tabSize: 2,
        showPrintMargin: false,
        fontSize: 13
      }
    });
    
    //form
    const dataForm = reactive({
      Example: {
        abc:'123',
        def:'345',
        ghi:{
          abc:'123',
          def:'345',
        },
        jkl:[
          {
            abc:'123',
            def:'345',
          },{
            abc:'123',
            def:'345',
          }
        ]
      },
      textareashow:''
    });
    //init
    const initFail = () => {
     dataForm.textareashow = JSON.stringify(dataForm.Example,null,2)
    };
    
    // 返回值
    return {
       aceConfig,dataForm, initFail
    }
  } 
})
</script>
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

• 结果展示

• 若报错如图
  
  解决方法
  

参考文章链接 ——————>