vue中简单封装自己的json-editor
发布日期:2022-02-17 02:39:47
浏览次数:29
分类:技术文章
本文共 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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
感谢大佬
[***.8.128.20]2024年03月21日 01时18分41秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
实训中学到的HTML基础知识(6)
2019-04-26
cv基础组队学习
2019-04-26
cv基础组队学习
2019-04-26
cv基础组队学习
2019-04-26
cv基础组队学习(下)- Task04 HOG特征描述算⼦-行人检测
2019-04-26
Android: NDK编程入门笔记
2019-04-26
JAVA SE之面向对象7:Scanner与String类
2019-04-26
JAVA SE之面向对象8:String类以及数组和包装类
2019-04-26
JAVA SE之面向对象9:正则表达式以及一些常用类
2019-04-26
JAVA SE之面向对象10:集合1
2019-04-26
排序算法整理1:冒泡排序及其时间与空间复杂度的计算
2019-04-26
排序算法整理2:选择排序及其时间与空间复杂度的计算
2019-04-26
JAVA SE之面向对象11:泛型与集合
2019-04-26
JAVA SE之面向对象14:IO流的基础
2019-04-26
Handler+Looper+MessageQueue+Message机制分析
2019-04-26
Android窗口机制
2019-04-26
Java并发编程之线程、多线程和线程池专题
2019-04-26
购买了新域名后怎么办?域名有哪些方向?
2019-04-26
哪类数字域名更优秀?数字域名价值高吗?
2019-04-26