json編輯器- vue-json-edit

安裝方式
npm install vue-json-editor --save

新建vue文件當做組件使用

<!--** * 組件名稱 JsonEditor.vue * @desc 組件描述 json編輯器 * @author 組件作者 midsummer * @date 2020/12/23 18:12:19 -創建時間 * @param {Object} [title] - 參數說明 * @param {String} [columns] - 參數說明 * @example 調用示例 **--> <template><vue-json-editorv-model="modeJson":show-btns="false":mode="mode"lang="zh"@json-change="onJsonChange"@json-save="onJsonSave"@has-error="onError"></vue-json-editor> </template><script> //這里可以導入其他文件（比如：組件，工具js，第三方插件js，json文件，圖片文件等等） //例如：import 《組件名稱》 from '《組件路徑》'; import vueJsonEditor from "vue-json-editor"; export default {name: "",//import引入的組件需要注入到對象中才能使用components: {vueJsonEditor,},props: {mode: String,json: Object,},data() {//這里存放數據return {modeJson: this.json,};},//監聽屬性 類似于data概念computed: {},//監控data中的數據變化watch: {json: {handler(org) {this.modeJson = org;},deep: true,immediate: true,},},beforeCreate() {}, //生命周期 - 創建之前//生命周期 - 創建完成（可以訪問當前this實例）created() {},beforeMount() {}, //生命周期 - 掛載之前//生命周期 - 掛載完成（可以訪問DOM元素）mounted() {},//方法集合methods: {onJsonChange(value) {this.modeJson = value;/* console.log("value:", value);console.log("value:", this.modeJson); */},onJsonSave(value) {console.log("value:", value);console.log("value:", this.modeJson);return this.modeJson;},onError(value) {console.log("value:", value);},},beforeUpdate() {}, //生命周期 - 更新之前updated() {}, //生命周期 - 更新之后beforeDestroy() {}, //生命周期 - 銷毀之前destroyed() {}, //生命周期 - 銷毀完成activated() {}, //如果頁面有keep-alive緩存功能，這個函數會觸發filters: {}, //過濾 }; </script> <style lang="less" scoped> //@import url(); 引入公共css類 /deep/div.jsoneditor-menu a.jsoneditor-poweredBy, /deep/button.jsoneditor-modes.jsoneditor-separator {display: none; } </style>

解釋
組件屬性

v-model：綁定的json

:show-btns: 是否顯示保存按鈕，默認true

:expandedOnStart: 在開始時展開，默認false

:mode: 模式，默認樹模式

:lang: 語言，默認英文，中文為zh

@json-change: json編輯器內容改變時觸發

@json-save: 點擊保存時觸發

@has-error: 發生錯誤時觸發

隱藏部分樣式，自測

/deep/div.jsoneditor-menu a.jsoneditor-poweredBy, /deep/button.jsoneditor-modes.jsoneditor-separator {display: none; }

注意
在作為組件使用時，json如果是父組件傳值過來最好是進行監聽，并且重新賦值

watch: {json: {handler(org) {this.modeJson = org;},deep: true,immediate: true,},},

效果圖，根據自己需求修改功能，如果沒有更好的選擇可以使用，另外輸入中文不友好

總結

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

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