v-json-edit

vue json editor components

Usage no npm install needed!

<script type="module">
  import vJsonEdit from 'https://cdn.skypack.dev/v-json-edit';
</script>

README

v-json-edit

Install

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

Usage

import Vue from 'vue'
import vJsonEdit from 'v-json-edit'
Vue.use(vJsonEdit)
<!--开启编辑,拖拽,监听改变, 将on-change修改为change防止与系统冲突-->
<v-json-edit v-model="json" edit drag @change="changeHandle"></v-json-edit>
export default {
  data () {
    return {
       json: {} // 渲染值
    }
  },
  methods: {
    changeHandle (val) {
      // 改变值
    }
  }
}

API

Attributes

参数 说明 类型 默认值 可选值
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 -

Events

事件名称 说明 回调参数
change 当值进行改变时触发 value
on-mode 当模式切换时触发 {newMode, oldMode}
on-error 错误时触发 error
on-select-text 当选中数据时触发(仅适用于mode: code, 'text') {start, end, text}