https://github.com/warriorbrian/v-json-edit

vue json editor
https://github.com/warriorbrian/v-json-edit

javascript json jsoneditor v-json-edit vue

Last synced: about 2 months ago
JSON representation

vue json editor

• Host: GitHub
• URL: https://github.com/warriorbrian/v-json-edit
• Owner: warriorBrian
• Created: 2020-07-09T10:48:18.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-03-05T05:39:53.000Z (almost 4 years ago)
• Last Synced: 2024-10-14T00:50:11.204Z (2 months ago)
• Topics: javascript, json, jsoneditor, v-json-edit, vue
• Language: Vue
• Homepage:
• Size: 9.77 KB
• Stars: 8
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## v-json-edit

### Install

```bash

$ npm install --save v-json-edit

# or

$ yarn add v-json-edit

```

### Usage

```js

import Vue from 'vue'

import vJsonEdit from 'v-json-edit'

Vue.use(vJsonEdit)

```

```html

```

```js

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}