Vue3中使用JSON 编辑器：vue-json-editor

介绍

需要快速编辑json数据以及json校验

安装

npm install vue-json-editor --save

使用

<template>
    <vue-json-editor
        v-model="jsonContent"        <!--绑定的JSON数据-->
        :show-btns="true"            <!--是否显示按钮-->
        mode="tree"                  <!--模式：tree  text  form code 等-->
        lang="zh"                    <!--语言-->
        :expandedOnStart="false"     <!--初始化时，是否自动展开-->
        @json-change="jsonChange"    <!--json改变时，触发的事件-->
        @json-save="jsonSave"        <!--json保存事件-->
        @has-error="hasError" />     <!--出现错误时，触发的事件-->
        
    <el-button type="primary" @click="checkJson">确定</el-button>
    
</template>


<script lang="ts" setup>
// 引入vue-json-editor模块
import vueJsonEditor from 'vue-json-editor'

let jsonContent = ref()  // json数据
const hasJsonFlag = ref(true)  // json是否验证通过

const jsonChange = (value)=>{
    console.log(value)
    // 实时保存
    jsonSave(value)
}
// 保存
const jsonSave = (value)=>{
    jsonContent.value = value
    hasJsonFlag.value = true
}
// 出错
const hasError = (value)=>{
    console.log("出现错误")
    hasJsonFlag.value = false
}
// 检查json
const checkJson = ()=>{
    if(hasJsonFlag.value === false){
        console.log("json校验失败")
        return false
    }else {
        console.log("json校验成功")
        return true
    }
}
</script>

地址

https://github.com/dirkliu/vue-json-editor