vue-json-editor?json編輯器如何使用

這篇文章主要講解了“vue-json-editor json編輯器如何使用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“vue-json-editor json編輯器如何使用”吧！

一、概述

現(xiàn)有一個(gè)vue項(xiàng)目，需要一個(gè)json編輯器，能夠格式化json數(shù)據(jù)，同時(shí)也支持編輯功能。

vue-json-editor 插件就可以實(shí)現(xiàn)這個(gè)功能

二、vue-json-editor 使用

安裝插件

npm install vue-json-editor --save

使用

test.vue

<template>
  <div >
    <vue-json-editor
      v-model="resultInfo"
      :showBtns="false"
      :mode="'code'"
     
      @json-change="onJsonChange"
      @json-save="onJsonSave"
      @has-error="onError"
    />
    <br>
    <el-button type="primary" @click="checkJson">確定</el-button>
  </div>
</template>
 
<script>
  // 導(dǎo)入模塊
  import vueJsonEditor from 'vue-json-editor'
 
  export default {
    // 注冊(cè)組件
    components: { vueJsonEditor },
    data() {
      return {
        hasJsonFlag:true,  // json是否驗(yàn)證通過(guò)
        // json數(shù)據(jù)
        resultInfo: {
          'employees': [
            {
            'firstName': 'Bill',
            'lastName': 'Gates'
            },
            {
              'firstName': 'George',
              'lastName': 'Bush'
            },
            {
              'firstName': 'Thomas',
              'lastName': 'Carter'
            }
          ]
        }
      }
    },
    mounted: function() {
    },
    methods: {
      onJsonChange (value) {
        // console.log('更改value:', value);
        // 實(shí)時(shí)保存
        this.onJsonSave(value)
      },
      onJsonSave (value) {
        // console.log('保存value:', value);
        this.resultInfo = value
        this.hasJsonFlag = true
      },
      onError(value) {
        // console.log("json錯(cuò)誤了value:", value);
        this.hasJsonFlag = false
      },
      // 檢查json
      checkJson(){
        if (this.hasJsonFlag == false){
          // console.log("json驗(yàn)證失敗")
          // this.$message.error("json驗(yàn)證失敗")
          alert("json驗(yàn)證失敗")
          return false
        } else {
          // console.log("json驗(yàn)證成功")
          // this.$message.success("json驗(yàn)證成功")
          alert("json驗(yàn)證成功")
          return true
        }
      },
    }
  }
</script>
 
<style>
</style>

插件參數(shù)說(shuō)明：

<vue-json-editor
      v-model="resultInfo"  // 綁定數(shù)據(jù)resultInfo
      :showBtns="false"  // 是否顯示保存按鈕
      :mode="'code'"  // 默認(rèn)編輯模式
       // 顯示中文，默認(rèn)英文
      @json-change="onJsonChange"  // 數(shù)據(jù)改變事件
      @json-save="onJsonSave"  // 數(shù)據(jù)保存事件
      @has-error="onError"  // 數(shù)據(jù)錯(cuò)誤事件
    />

相關(guān)說(shuō)明：

resultInfo  默認(rèn)綁定的變量，這個(gè)變量可以為空，編輯器會(huì)顯示為{}

:showBtns 這里不顯示保存按鈕，為什么呢？原因有2個(gè)。1. 默認(rèn)樣式不好看。2. 只能當(dāng)json數(shù)據(jù)正確，才能點(diǎn)擊保存按鈕，否則禁止點(diǎn)擊。

json-change，json-save，has-error 這3個(gè)事件，是會(huì)實(shí)時(shí)觸發(fā)的。

這里我額外加了一個(gè)檢測(cè)方法，用來(lái)判斷json數(shù)據(jù)是否正確。默認(rèn)標(biāo)記為true，當(dāng)不正確時(shí)，會(huì)改變狀態(tài)為false。

訪問(wèn)

點(diǎn)擊確定，提示成功

 改為錯(cuò)誤的，點(diǎn)擊確定，會(huì)提示失敗。

注意：這個(gè)json編輯會(huì)帶有下來(lái)菜單，實(shí)際項(xiàng)目中，需要去除，比較用戶誤操作。

在實(shí)際使用中發(fā)現(xiàn)幾個(gè)問(wèn)題：

1. 輸入中文時(shí)，傳給后端的值不多

2. 輸入大量json時(shí)，會(huì)有部分?jǐn)?shù)據(jù)丟失。

因此，我們使用下面的編輯器bin-code-editor 

三、bin-code-editor

安裝模塊

npm install bin-code-editor -d

引入

在 main.js 中寫入2行

import CodeEditor from 'bin-code-editor';
Vue.use(CodeEditor);

test.vue

<template>
  <div >
    <b-code-editor v-model="jsonStr" :auto-format="true" :smart-indent="true" theme="dracula" :indent-unit="4" :line-wrap="false" ref="editor"></b-code-editor>
    <br>
    <el-button type="primary" @click="onSubumit">提交</el-button>
  </div>
</template>
 
<script>
  const jsonData =`{
    "employees": [{
      "firstName": "Bill",
      "lastName": "Gates"
    }, {
      "firstName": "George",
      "lastName": "Bush"
    }, {
      "firstName": "Thomas",
      "lastName": "Carter"
    }]
  }`
  export default {
    data() {
      return {
        jsonStr:jsonData
      }
    },
    methods: {
      // 檢測(cè)json格式
      isJSON(str) {
        if (typeof str == 'string') {
          try {
            var obj=JSON.parse(str);
            if(typeof obj == 'object' && obj ){
              return true;
            }else{
              return false;
            }
 
          } catch(e) {
            return false;
          }
        }else if (typeof str == 'object'  && str) {
          return true;
        }
      },
      onSubumit(){
        if (!this.isJSON(this.jsonStr)){
          this.$message.error(`json格式錯(cuò)誤`)
          return false
        }
        this.$message.success('json格式正確')
      }
    }
  }
</script>
 
<style>
 
</style>

訪問(wèn)測(cè)試頁(yè)面，效果如下：

輸入錯(cuò)誤的值，點(diǎn)擊執(zhí)行，會(huì)有提示

感謝各位的閱讀，以上就是“vue-json-editor json編輯器如何使用”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)vue-json-editor json編輯器如何使用這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！