vue-json-editor json編輯器

發(fā)布時(shí)間：2021-02-20 09:08:21編輯：admin閱讀(106)

一、概述

現(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

v-model="resultInfo"

:showBtns="false"

:mode="'code'"

@json-change="onJsonChange"

@json-save="onJsonSave"

@has-error="onError"

/>

確定

//?導(dǎo)入模塊

import?vueJsonEditor?from?'vue-json-editor'

export?default?{

//?注冊組件

components:?{?vueJsonEditor?},

data()?{

return?{

hasJsonFlag:true,??//?json是否驗(yàn)證通過

//?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

}

},

}

}

插件參數(shù)說明：

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)說明：

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è)檢測方法，用來判斷json數(shù)據(jù)是否正確。默認(rèn)標(biāo)記為true，當(dāng)不正確時(shí)，會(huì)改變狀態(tài)為false。

訪問

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

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

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

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

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

提交

const?jsonData?=`{

"employees":?[{

"firstName":?"Bill",

"lastName":?"Gates"

},?{

"firstName":?"George",

"lastName":?"Bush"

},?{

"firstName":?"Thomas",

"lastName":?"Carter"

}]

}`

export?default?{

data()?{

return?{

jsonStr:jsonData

}

},

methods:?{

//?檢測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格式正確')

}

}

}

訪問測試頁面，效果如下：

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

本文參考鏈接：

關(guān)鍵字：

總結(jié)

以上是生活随笔為你收集整理的json编辑器插件 vue_vue-json-editor json编辑器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。