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

最新推荐文章于 2024-06-03 18:30:14 发布

VivreT

最新推荐文章于 2024-06-03 18:30:14 发布

阅读量2.8k

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/baidu_38492843/article/details/129798834

版权

首先安装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;
  }
};