json-editor-vue3 Vue3 json编辑器使用

首先安装json-editor-vue3

npm install json-editor-vue3 --save

在main.ts中加入，不加会报错

import "jsoneditor";

在需要引入的index.vue文件中

<json-editor-vue class="editor" v-model="dataFrom.remark"  @blur="remarkValidate"/>

import JsonEditorVue from 'json-editor-vue3';
 

// 校验json 编辑器内容格式
const remarkValidate = async (editor) => {
  // if (!editor) return;
  const res = await editor.validate();
 
  // res 是错误列表，如果是空数组，则表示检测没有错误
  if(res.length != 0){
    ElMessage({
      message: '格式错误！',
      type: 'error',
    });
    editorFlag.value = false;
  }else {
    editorFlag.value = true;
  }
};
'
运行
运行