1. 安装 vue-json-editor
npm install vue-json-editor --save
2. 可配置说明
v-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;
3. 在 vue 中使用 vue-json-editor
<template>
<div class = "routeManagement">
<vue-json-editor
v-model="routeJson" :showBtns="true" lang="zh"
@json-change="onJsonChange" @json-save = "onJsonSave"/>
</div>
</template>
<script>
// 引入vue-json-editor模块
import vueJsonEditor from 'vue-json-editor'
export default {
data () {
return{
// 可使用 JSON.parse() JSON.stringify() 转化 json 数据
json: {
msg: 'demo of jsoneditor'
}
}
},
components: {
vueJsonEditor
},
methods: {
onJsonChange () { // 数据改变时触发
},
onJsonSave(){ // 点击保存触发
}
},
}
</script>
<style lang="scss" scoped>
.routeManagement{
width:98%;
margin:16px auto;
/deep/.jsoneditor-vue{
height:700px;
}
/deep/.json-save-btn{
cursor: pointer;
}
}
</style>
3. 效果图
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/141468.html
