vue-json-editor json编辑器

骑猪看日落 2023-07-17 02:48 26阅读 0赞

### 1.安装插件 ###

npm install vue-json-editor --save

### 2.使用 ###

<template>
      <div>
        <p>vue-json-editor</p>
        <vue-json-editor
        v-model="json" 
        :show-btns="true"  // 是否显示保存按钮
        :mode="'code'" // 默认编辑模式
        lang="zh"  // 显示中文，默认英文
        @json-change="onJsonChange"  // 数据改变事件
        @json-save="onJsonSave" 
        @has-error="onError"></vue-json-editor>
      </div>
    </template>
    
    <script>
      import vueJsonEditor from 'vue-json-editor'
    
      export default {
        data () {
          return {
            json: {
              msg: 'demo of jsoneditor'
            }
          }
        },
    
        components: {
          vueJsonEditor
        },
    
        methods: {
          onJsonChange (value) {
                console.log('value:', value);
            },
          onJsonSave (value) {
                console.log('value:', value);
            },
           onError (value) {
                console.log('value:', value);
            }
        }
      }
    </script>

### 3.效果 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70][]

### 4.参数补充 ###

> model：bind the \[json object\] :show-btns: boolean, show the save button, default: true :expandedOnStart: boolean, expand the JSON editor on start for the modes 'tree', 'view', and 'form', default: false :mode: string, default: tree :lang: string, default: en @json-change: on json changed @json-save: on json save @has-error: on error

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70]: /images/20230528/52aaa559e4904e03bb3b62f1acae958d.png