目錄

• • 依賴項
  • 安裝
  • 使用

前提：vue項目，需要能方便的管理和編輯json格式的數據。目前我的設計是，有一個名為“配置json”的按鈕，點擊后打開一個el-dialog的彈框，包含著這個json編輯框。點擊“提交”時把數據傳出，點擊“取消”關閉彈框并銷毀彈框。

依賴項

JSON Editor GitHub 英文文檔：https://github.com/jdorn/json-editor

2022年4月19日，安裝的依賴包是9.7.4的版本

安裝

cnpm install jsoneditor -S

使用

index.vue

<template><el-button plain @click="configJson(jsonItems)">配置{{jsonItems[0].title}}</el-button> </template><script> import ConfigJSON from '../components/ConfigJSON.vue' // 這里的exprot default寫法是復制了項目里的，我就沒改。其中的內容可以參考 export default { data() {return {jsonItems: [],}},methods: {configJson(json) {//這里傳進來的json是這樣的，{"a": "111", "b": "222"}const configModel = new Vue(ConfigJSON)configModel.open(json).then((result) => {console.log(result)})} } } </script>

ConfigJSON.vue

<template><el-dialog :visible.sync="dialogVisible" :destroy-on-close="destroyOnClose" :close-on-click-modal="closeOnClickModal" v-if="dialogVisible"><div id="jsonEditor" style="height:100%"></div><div slot="footer" class="dialog-footer"><el-button type="primary" @click="onSubmit">提交</el-button><el-button @click="dialogVisible = false">取消</el-button></div></el-dialog> </template><script> import JSONEditor from 'jsoneditor' import 'jsoneditor/dist/jsoneditor.css'let editor = null export default {name: 'ConfigJSON',components: {JSONEditor,},props: {dialogVisible: { type: Boolean, default: true },jsonData: { type: Object },},data() {return {destroyOnClose: true,closeOnClickModal: false,options: {mode: 'code',search: false,transform: false,},}},mounted() {this.$nextTick(() => {const container = document.getElementById('jsonEditor')editor = new JSONEditor(container, this.options)editor.set(this.jsonData)})},methods: {onSubmit() {this.jsonData = editor.get()this.$emit('submit', this.jsonData)},open(data) {this.jsonData = JSON.parse(JSON.stringify(data))this.$mount()document.body.appendChild(this.$el)return new Promise((resolve) => {this.$on('submit', (newValue) => {this.dialogVisible = falseresolve(newValue)})})},}, } </script><style> .jsoneditor .jsoneditor-transform, .jsoneditor .jsoneditor-repair, .jsoneditor .jsoneditor-poweredBy {display: none; } </style>

總結

以上是生活随笔為你收集整理的vue2.x使用jsoneditor编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。