vue-json-view-editor

A vue component that format json

Install

npm i -S vue-json-view-editor

Example

Usage

// main.js
// ...
import JsonViewEditor from 'vue-json-view-editor';
Vue.use(JsonViewEditor);

// view.vue
export default {
  name: 'View',

  data () {
    return {
      testSrc: {
        dq: 'dgv',
        gbiowarr: [
          1,
          2.42,
          'btiuer',
          true,
          false,
          null,
          undefined,
          NaN
        ],
        inerr: {
          foiwe: {
            goriej: 'frj',
            vvwi: false,
            nupoy: {
              gnpoxdv: 321,
              tgoisnbv3: true,
              lasgtr: null
            },
            ieonv: new Date()
          }
        }
      },
      viewExpanded: true
    }
  },

  async mounted () {
    // test
    setTimeout(() => {
      this.testSrc = {
        ...this.testSrc,
        bvs: {
          gtis: 'gtrj'
        }
      }
    }, 2000)
  },

  methods: {
    addJsonRow (data) {

    },

    deleteJsonRow (data) {

    },

    editJsonRow (data) {

    }
  },
}

<!-- view.vue -->
<template>
  <json-view-editor
    :src="testSrc"
    :viewExpanded="viewExpanded"
    :indentWidth="4"
    :add="addJsonRow"
    :delete="deleteJsonRow"
    :edit="editJsonRow">
  </json-view-editor>
</template>

JsonViewEditor Attributes

参数	说明	类型	可选值	默认值
src	数据源	Object, Array, Number, String, Boolean, Date, null, undefined, NaN	-	{}
viewExpanded	是否展开视图	Boolean	-	true
collapseString	省略这个长度以外的字符，-1表示不省略	Number	-	-1
indentWidth	缩进的长度	Number	-	4
add	添加属性后的回调	Function/Boolean	-	false
delete	删除属性后的回调	Function/Boolean	-	false
edit	修改属性后的回调	Function/Boolean	-	false

RoadMap

1. 完善添加、修改、删除功能

Preview Demo

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run demo

Build Setup

# install dependencies
npm install

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

使用方法

具体请查看 /demo/App.vue