vue中使用json编辑器v-json-editnpm地址:v-json-editgithub地址:v-json-edi

v-json-edit

v-json-edit是基于jsoneditor针对vue的二次封装。

github地址: v-json-edit

jsoneditor地址: jsoneditor

$ npm install v-json-edit --save
// or
$ yarn add v-json-edit

// main.js
import VJsonEdit from 'v-json-edit'

Vue.use(VJsonEdit)

<!--开启编辑，拖拽，监听改变-->
<v-json-edit v-model="json" edit drag @on-change="changeHandle"></v-json-edit>

export default {
  data () {
    return {
       json: {} // 渲染值
    }
  },
  methods: {
    changeHandle (val) {
      // 改变值
    }
  }
}

参数	说明	类型	默认值	可选值
v-model	渲染值	String/Object/Array/Number	-	-
mode	默认编辑器模式	string	tree	-
modes	编辑器模式	array	["tree", "code", "form", "text", "view", "preview"]	-
search	右侧是否展示搜索	boolean	false	-
lang	显示语言	string	en	en, pt-BR, zh-CN, tr, ja, fr-FR
drag	是否可拖拽	boolean	false	-
edit	是否可编辑	boolean	false	-
expand	展开所有数据	boolean	true	-
history	启用历史记录操作按钮	boolean	true	-
mainMenuBar	是否显示主功能栏	boolean	true	-
navigationBar	显示树结构上当前位置,适用于: tree/form/view模式	boolean	false	-