json-editor-vue

Optionated json editor & json viewer powered by svelte-jsoneditor & vue-json-viewer

Features

√ json编辑 + json预览
√ v-model双绑
√ 适配 element-ui 的el-form组件支持el-form的全局disabled
√ 全局或局部引入参数支持全局或局部配置

Installation

NPM

Dependencies：vue

// 全局引入

import 'json-editor-vue/dist/style.css'
import JsonEditorVue from 'json-editor-vue'

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

<!-- 局部引入 -->

<template>
  <JsonEditorVue v-bind="config"/>
</template>

<script>
import 'json-editor-vue/dist/style.css'
import JsonEditorVue from 'json-editor-vue'

export default {
  components: { JsonEditorVue },
  data () {
    return {
      config: {
        // 局部配置
      }
    }
  }
}
</script>

Props

Attribute	Description	Type	Accepted Values	Default
value / v-model	数据对象	object / array / undefined / null /
readonly	是否只读	boolean		false
vueJsonViewerProps	vue-json-viewer props	object	vue-json-viewer	see below
...	svelte-jsoneditor props	object	svelte-jsoneditor	see below

Default props for svelte-jsoneditor

{ 
  mainMenuBar: false,
  mode: 'code',
}

Default props for vue-json-viewer

{
  copyable: { copyText: '复制', copiedText: '已复制', timeout: 2000 },
  boxed: true,
  previewMode: true,
}

Config rules

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

权重：

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