Vue中 引入使用 vue-json-editor
json
适用于现代 C++ 的 JSON。
项目地址:https://gitcode.com/gh_mirrors/js/json

·
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. 效果图




适用于现代 C++ 的 JSON。
最近提交(Master分支:4 个月前 )
f06604fc
* :page_facing_up: bump the copyright years
Signed-off-by: Niels Lohmann <mail@nlohmann.me>
* :page_facing_up: bump the copyright years
Signed-off-by: Niels Lohmann <mail@nlohmann.me>
* :page_facing_up: bump the copyright years
Signed-off-by: Niels Lohmann <niels.lohmann@gmail.com>
---------
Signed-off-by: Niels Lohmann <mail@nlohmann.me>
Signed-off-by: Niels Lohmann <niels.lohmann@gmail.com> 1 个月前
d23291ba
* add a ci step for Json_Diagnostic_Positions
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* Update ci.cmake to address review comments
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* address review comment
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* fix typo in the comment
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* fix typos in ci.cmake
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* invoke the new ci step from ubuntu.yml
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* issue4561 - use diagnostic positions for exceptions
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* fix ci_test_documentation check
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* address review comments
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* fix ci check failures for unit-diagnostic-postions.cpp
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* improvements based on review comments
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* fix const correctness string
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* further refinements based on reviews
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* add one more test case for full coverage
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* ci check fix - add const
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* add unit tests for json_diagnostic_postions only
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* fix ci_test_diagnostics
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
* fix ci_test_build_documentation check
Signed-off-by: Harinath Nampally <harinath922@gmail.com>
---------
Signed-off-by: Harinath Nampally <harinath922@gmail.com> 1 个月前
更多推荐
所有评论(0)