json-editor-vue

json-editor-vue

JSON editor & viewer for Vue 2 and 3 powered by svelte-jsoneditor & vue-json-viewer

svelte-jsoneditor是 jsoneditor 作者带来的全新JSON编辑器。 作者开这个新坑的原因是老库已难以维护、架构需要大改、体验亟待提升。json-editor-vue是svelte-jsoneditor的Vue版本。

Features

• 同时支持Vue3 & Vue2
• JSON编辑 + JSON预览
• 双向绑定输入值
• 自动修复格式错误的JSON字符串
• 适配 element-plus & element-ui（禁用状态默认跟随 el-form）
• 全局或局部引入，参数支持全局或局部配置

Installation

Vue3

pnpm add json-editor-vue svelte-jsoneditor

// 全局引入

import JsonEditorVue from 'json-editor-vue'

createApp(App)
.use(JsonEditorVue, {
  // 全局配置
})

<!-- 局部引入 -->

<template>
  <JsonEditorVue v-model="value" v-bind="{/* 局部配置 */}"/>
</template>

<script setup>
import JsonEditorVue from 'json-editor-vue'
</script>

Vue2

pnpm add json-editor-vue svelte-jsoneditor @vue/composition-api

// 全局引入

import JsonEditorVue from 'json-editor-vue'

Vue.use(JsonEditorVue, {
  // 全局配置
})

<!-- 局部引入 -->

<template>
  <JsonEditorVue :modelValue.sync="value" v-bind="{/* 局部配置 */}"/>
</template>

<script>
import JsonEditorVue from 'json-editor-vue'

export default {
  components: { JsonEditorVue },
}
</script>

Props

Attribute	Description	Type	Accepted Values	Default
v-model / modelValue	绑定值	any
readonly	是否只读	boolean		false
readonlyOptions	props of vue-json-viewer	object
...	props of svelte-jsoneditor

Config rules

• 双向绑定参数（v-model / modelValue）仅支持局部配置
• 其余参数均支持全局或局部配置

权重：

• 局部配置高于全局配置
• 对于对象类型的参数，局部配置会与全局配置进行合并，同名属性会被局部配置覆盖