
vue中简单封装自己的json-editor
发布日期:2022-02-17 02:39:47
浏览次数:20
分类:技术文章
本文共 655 字,大约阅读时间需要 2 分钟。
前言
在项目开发中,用到了一个json editor,因为是vue需要用到,于是借鉴了vue-json-editor源码进行编写了一个符合自己业务的json-editor。
接口
name | 含义 | 默认值 |
---|---|---|
width | 组件的宽度 | ‘100%’ |
height | 组件的高度 | ‘500px’ |
mode | 编辑json的格式(tree、view、form) | tree |
modes | 可视化json的格式(tree、code、orm、text、view) | [‘tree’, ‘code’, ‘form’, ‘text’, ‘view’] |
json | 组件展示的json数据 | {} |
schema | json数据的规则 | |
expandedOnStart | json数据是否默认展开 | true |
json-save | 子组件通过验证后的获取到json的方法 |
说明:我的保存按钮会根据schema来决定是否可用,如果验证通过了,那么就会向父组件发送事件。
使用方法
有个小问题是:我之所以加v-if,是因为组件在mounted()的时候,初始化并配置了json-editor,此时修改json数据,就会跟着进行验证了,然后schema从后台获取后,虽然给json-editor更新了值,但是规则不管用。故我并没有设置schema的默认值为{},而是通过v-if异步获取到了jsonSchema再进行渲染。
- 1 npm install jsoneditor -S
// 父组件使用
运行截图
源码下载
源码放在了我的GitHub上----->
转载地址:https://blog.csdn.net/qq_39811414/article/details/110842464 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
路过,博主的博客真漂亮。。
[***.116.15.85]2023年05月19日 01时19分20秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
最新文章
一些基础的面试总结
2020-01-11 03:25:12
log4cpp源码阅读:Appender组件学习
2020-01-11 03:25:11
软件工程:白天开会,加班写代码怎么破
2020-01-11 03:25:11
一笔画:五环,python-turtle。画圆圈
2020-01-11 03:25:11
网络:什么叫做TCP流
2020-01-11 03:25:11
C/C++编程:图床项目部署
2020-01-11 03:25:11
log4cpp源码阅读:PropertyConfigurator解析
2020-01-11 03:25:11
网络:数据包、报文、帧、分组、段
2020-01-11 03:25:11
C/C++编程:FastDFS-Nginx扩展模块分析
2020-01-11 03:25:11
gdb:使用总结
2020-01-11 03:25:10
C/C++编程:FastDFS单机版环境部署
2020-01-11 03:25:10
log4cpp源码阅读:Category组件学习
2020-01-11 03:25:09
log4cpp源码阅读:Layout组件解析
2020-01-11 03:25:09
log4cpp源码阅读:TimeStamp工具类
2020-01-11 03:25:08
log4cpp源码阅读:StringUtil工具类
2020-01-11 03:25:08
log4cpp源码阅读:threading工具类
2020-01-11 03:25:08
log4cpp源码阅读:NDC类学习
2020-01-11 03:25:08
C/C++编程:Protobuf 使用
2020-01-11 03:25:07
C/C++编程:FastDFS入门
2020-01-11 03:25:07
C/C++编程:log4cpp使用学习
2020-01-11 03:25:07