精华内容
下载资源
问答
  • vue.js json v-jsoneditor (v-jsoneditor) Vue JSONEditor. Vue JSONEditor。 View Demo 查看演示 Download Source 下载源 安装 (Installation) npm install v-jsoneditor 使用 (Using) 全球进口 (Import ...

    vue.js json

    v-jsoneditor (v-jsoneditor)

    Vue JSONEditor.

    Vue JSONEditor。

    v-jsoneditor

    安装 (Installation)

    npm install v-jsoneditor

    使用 (Using)

    全球进口 (Import globally)

    import Vue from 'vue'
    import VJsoneditor from 'v-jsoneditor/src/index'
    
    Vue.use(VJsoneditor)

    进口 (Import)

    import VJsoneditor from 'v-jsoneditor/src/index'
    
    export default {
        name: 'app',
        components: {
            VJsoneditor
        },
        data() {
            return {
                json: {
                    "hello": "vue"
                }
            }
        },
        methods: {
            onError() {
                console.log('error')
            }
        }
    }

    浏览器 (Browser)

    <script src='https://unpkg.com/[email protected]'></script>
    <script src="./dist/v-jsoneditor.min.js"></script>
    

    在模板中使用 (Use in template)

    <v-jsoneditor v-model="json" :options="options" :plus="false" :height="400px" @error="onError">

    选件 (Options)

    Name Description type default
    options Jsoneditor params, You can look at the detailed configuration Object { mode: 'code' }
    value(v-model) Object value Object { }
    plus Whether full screen switching is added Boolean true
    height Default height String -
    名称 描述 类型 默认
    选项 Jsoneditor的参数,可以看看详细的配置 目的 {模式:“代码”}
    值(v模型) 对象值 目的 {}
    是否添加全屏切换 布尔型 真正
    高度 默认高度 --

    大事记 (Events)

    Name Description
    error Error callback
    名称 描述
    错误 错误回调

    构建设置 (Build Setup)

    # install dependencies
    npm install
    
    # serve with hot reload at localhost:8080
    npm run dev
    
    # build for production with minification
    npm run build

    翻译自: https://vuejsexamples.com/json-editor-with-vue-js/

    vue.js json

    展开全文
  • 51jsjson编辑器

    2017-11-26 22:38:00
    无忧JSON编辑器【辅助工具】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3....

    无忧JSON编辑器【辅助工具】


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <base href="http://imgqun.qq.com/cgi-bin/"> <title> ldh_JSON_Editor </title> <style> body,html{ margin:0px;padding:10px;overflow:hidden;font-size:12px; background:#FFCC66 url(img?uuid=20b6767c202cdabf6049e98539e8df0de6);color:#333;font-family:tahoma; } .title{font-size:14px;background:url(img?uuid=2069cf3fd1e53a2bb365f771eac65b50a2) no-repeat;padding-left:30px;} #ldh_ui_window{ width:840px;height:520px; position:absolute; background:#fff url(img?uuid=209ef12ed3496ca2e94cf1a8041de28cc2) repeat-x 0 32px; border:2px solid #4A84C4;border-top:none; left:50%;margin-left:-420px; top:50%;margin-top:-260px; } #ldh_ui_caption{ height:32px;line-height:32px;text-indent:1em; background:url(img?uuid=203fe9e79d8933c63af9866344a990e5ee) repeat-x; text-align:center; } #ldh_ui_body_left{ width:300px;height:450px;overflow:auto; position:absolute;left:10px;top:55px; border:1px solid #4A84C4; } #editWindow{width:500px;position:absolute;left:325px;top:55px; border:1px solid #4A84C4;} #tree_cap{height:18px;line-height:18px;text-align:center;background:url(img?uuid=203fe9e79d8933c63af9866344a990e5ee) repeat-x;} /* toolbar */ #subToolbar{ height:29px;background:url(img?uuid=2089a60bdc587e2b2b895c3cb32608c06f) repeat-x 50% 50%;line-height:29px; position:relative;width:100%;text-indent:10px; } #subToolbar a{ color:#000;background:url(img?uuid=2023acf6c478a05549e3cdf0de3696ca7d) no-repeat 0% 50%; padding-left:20px;text-decoration:none; } #subToolbar span{position:absolute; right:10px;bottom:4px;} #subToolbar a:hover{color:#fff;background-image:url(format.gif);text-decoration:underline;} #subToolbar a#save_as{background-image:url(img?uuid=2083fbd06db4030248c60ab536af05def2); } #subToolbar a#format_indent{background-image:url(img?uuid=2060be6af87eae7a41f7de458b271cdfdc); } #subToolbar a#update{background-image:url(img?uuid=209d82f0afde195855dca5a2b516fdcc11); } #subToolbar a#format_compress{background-image:url(img?uuid=20e66dfd444ae20969e4bfcc0d33809850); } #subToolbar a#clear_txt{background-image:url(img?uuid=2069999c20b5d5f9fa36439831690cbea1); } /* end */ #json_eidit{ width:497px; border:none;margin:0px;color:#000; height:340px;font-size:14px; } .json_editInfo{ line-height:160%; border:1px solid #4A84C4; width:483px;+width:500px; height:65px; color:#003300; position:absolute;left:325px;bottom:12px; } #json_editInfo{ height:48px; padding-left:60px;padding-top:10px; background:url(img?uuid=2097679a52658b38bc858e8274a2293451) no-repeat 28px 12px; } #json_editInfo b{color:red} #ldh_ui_window .err{color:red;background-image:url(img?uuid=20bded9fd31a0fea0465715c35f1d59c45);} #ldh_ui_window .busy{color:#333;background-image:url(img?uuid=20c121f445de7a8874541ef58b4147c0e4);} #ldh_ui_window .info{color:#006600;background-image:url(img?uuid=20775d53781369b7d2a02b6faeb1693a5c);} #json_editInfo input{width:50px;border:1px solid #4A84C4;height:14px;} #json_editInfo button{ background:url(img?uuid=200913d75fd547b62c50e13d8884bc1d98) no-repeat; width:70px;height:20px;line-height:20px;text-align:center; border:none;color:#114060;letter-spacing:5px;margin-left:10px; } /* for tree */ img,input,select{vertical-align:middle} #ldh_ui_window #tree{white-space:nowrap;font-size:12px;line-height:24px;} #tree a{text-decoration:none;color:#333;} #tree a:hover,#tree a.hot{color:#000;background:#0B92FF;} dd,dl,dt{padding:0;margin:0;border:none;font-size:12px;} dt img{vertical-align:middle;} dt{height:20px;white-space:nowrap;} </style> </head> <body> <div id="ldh_ui_window"> <div id="ldh_ui_caption"><strong class="title">JSON-Editor</strong></div> <div id="ldh_ui_body_left"> <div id="tree_cap">树视图</div> <div id="tree"></div> </div> <div id="editWindow"> <div id="subToolbar"> <a href="javascript:void(0)" title="" id="format_indent">缩进</a> | <a href="javascript:void(0)" title="" id="format_compress">紧凑</a> | <a href="javascript:void(0)" title="" id="update">刷新视图</a> | <a href="javascript:void(0)" title="" id="clear_txt">清空</a> | <a href="javascript:void(0)" title="" id="save_as">另存为</a> <span> <label for="autoUpdate"><input type="checkbox" id="autoUpdate" checked /> 同步更新树视图</label> </span> </div> <div id="edit"> <textarea id="json_eidit" >[{"中国食谱":["上海醉蟹","北京锅烧鸡","川式凉拌豇豆","清真酱牛肉"],"国外食谱":["泰式柠檬肉片","鸡柳汉堡","蒸桂鱼卷 "],"更多":{"中式":["南","北",{"地方":["小吃","大餐"]},"更多选择"]}},{"菜谱分类":["上海菜","贵州菜","潮汕菜","云南菜","东北菜","安徽菜","广东菜","浙江菜","湖南菜"]},"其它"]</textarea> </div> </div> <fieldset class="json_editInfo"> <legend>系统消息</legend> <div id="json_editInfo" class="busy">正在加载图片,请稍候...</div> </fieldset> </div> </body> <script> /* main Object */ JE={ data:{},/* 关联数据 */ code:false,/* 格式化后的代码 */ oldCode:[],/* 历史代码 */ editUI:null,/* 关联编辑框 */ msgUI:null,/* 信息显示窗口 */ treeUI:null,/* 树窗口 */ name:'JE',/* 实例名 */ root:'<b>JSON无忧</b>',/* 根节点标题 */ checkbox:0,/* 是否添加复框 */ hot:null,/* 选中节点 */ indent:' ',/*缩进符'\t'或者4个' '*/ firstUp:true,/*第一次自动刷新*/ onclick:Array,/*树点击通知*/ countInfo:'',/*统计信息*/ formating:false,/* 格式化中(禁止重构树) */ ico:{/* 树图标 */ //文件夹结构线 r0:'img?uuid=20166b3094daba4bc6e18817b8301b093a', r0c:'img?uuid=208018827ed877e31810e838d33e4ac2b0', r1:'img?uuid=2094c793496278bde84be80bb6cb2117f5', r1c:'img?uuid=205f2329c537dcfd32b5f33bf642f76fa6', r2:'img?uuid=20af62be7c197cae64d3e533f7aaf28c25', r2c:'img?uuid=20a005983863e5bc8544cecd8b7f82fcdb', //前缀图片 nl:'img?uuid=20f508bdc9bb8d98f4529e0fa2475b91bb', vl:'img?uuid=20d5de63f4e6927bbb23c377bd1073d26f', //文件结构线 f1:'img?uuid=202ccc639afd44130a3946e9837672479c', f2:'img?uuid=20900ceb0053a2f7bd07a22337c4e4c72c', root:'img?uuid=2069cf3fd1e53a2bb365f771eac65b50a2', //文件夹 arr:'img?uuid=20b7d6e86f4f288ea097c10b1c0d7f4b6b', arrc:'img?uuid=20b7d6e86f4f288ea097c10b1c0d7f4b6b', obj:'img?uuid=20c34d1d5d5a4639061e08165c61a97e63', objc:'img?uuid=20c34d1d5d5a4639061e08165c61a97e63', //文件 arr2:'img?uuid=20327500502b71ed0278a0cc1bf8f8bb41', obj2:'img?uuid=203346cafeedac1fb7628bc886b9b7fb47' }, toTree:function(){/* JSON转换为树HTML,同时格式化代码 */ var draw=[],This=this,ico=this.ico; JE.firstUp=false;/*完成首次自动构造*/ var notify=function(prefix/*前缀HTML*/,lastParent/*父是否是尾节点(确定图标是空白|结构线)*/,name/*节点名*/,value/*节点值*/,formObj/* 父是否是对象(确定子图标) */){/* 构造子节点 */ var rl=prefix==''?ico.r0:lastParent?ico.r1:ico.r2;/* 配置根节点图标 */ if(value&&value.constructor==Array){/* 处理数组节点 */ draw.push('<dl><dt>',This.draw(prefix,rl,ico.arr,name,''),'</dt><dd>');/* 绘制文件夹 */ for (var i=0;i<value.length;i++) notify(prefix+This.img(lastParent?ico.nl:ico.vl),i==value.length-1,i,value[i]); draw.push('</dd></dl>'); }else if(value&&typeof value=='object'){/* 处理对象节点 */ draw.push('<dl><dt>',This.draw(prefix,rl,ico.obj,name,''),'</dt><dd>');/* 绘制文件夹 */ var len=0,i=0; for(var key in value)len++;/* 获取对象成员总数 */ for(var key in value)notify(prefix+This.img(lastParent?ico.nl:ico.vl),++i==len,key,value[key],true); draw.push('</dd></dl>'); }else{/* 处理叶节点(绘制文件) */ draw.push('<dl><dt>',This.draw(prefix,lastParent?ico.f1:ico.f2,formObj?ico.obj2:ico.arr2,name,value),'</dt></dl>'); }; };/* 不是[]或者{}不绘制 */ if(typeof this.data=='object'){notify('',true,this.root,this.data);}; if(this.treeUI)this.treeUI.innerHTML=draw.join('');/* 显示在树窗口 */ this.msg('成功构造树视图!'); }, draw:function(prevfix,line,ico,name,value){/* 子项HTML构造器 */ var cmd=false,J=this.ico,imgName=false; switch (line) {//传递切换图标 case J.r0:imgName='r0';break; case J.r1:imgName='r1';break; case J.r2:imgName='r2'; } if(imgName)cmd=' οnclick="'+this.name+'.show(this,\''+imgName+'\')" ';/* 加入折叠命令 */ var type=typeof name=='string'?'(对象成员)':'(数组索引)'; return prevfix+this.img(line,cmd) +(this.checkbox?'<input type="checkbox" οnclick="'+this.name+'.select(this)" />':'') +this.img(ico)+' <a href="javascript:void(0)" οnclick="'+this.name+'.click(this);" ' +'key="'+name+'" val="'+value+'" >' +name+type+(value==''?'':' = ')+value+'</a>' }, img:function(src,attr){/* img HTML构造 */ return '<img src="'+src+'" '+(attr||'')+' />'; }, click:function(item){/* 子项点击统一回调 */ if(this.hot)this.hot.className=''; this.hot=item; this.hot.className='hot';/* 切换选中项 */ this.onclick(item); }, format:function(txt,compress/*是否为压缩模式*/){/* 格式化JSON源码(对象转换为JSON文本) */ if(/^\s*$/.test(txt))return this.msg('数据为空,无法格式化! '); try{var data=eval('('+txt+')');} catch(e){ JE.editUI.style.color='red'; return this.msg('数据源语法错误,格式化失败! 错误信息: '+e.description,'err'); }; JE.editUI.style.color='#000'; var draw=[],last=false,This=this,line=compress?'':'\n',nodeCount=0,maxDepth=0; var notify=function(name,value,isLast,indent/*缩进*/,formObj){ nodeCount++;/*节点计数*/ for (var i=0,tab='';i<indent;i++ )tab+=This.indent;/* 缩进HTML */ tab=compress?'':tab;/*压缩模式忽略缩进*/ maxDepth=++indent;/*缩进递增并记录*/ if(value&&value.constructor==Array){/*处理数组*/ draw.push(tab+(formObj?('"'+name+'":'):'')+'['+line);/*缩进'[' 然后换行*/ for (var i=0;i<value.length;i++) notify(i,value[i],i==value.length-1,indent,false); draw.push(tab+']'+(isLast?line:(','+line)));/*缩进']'换行,若非尾元素则添加逗号*/ }else if(value&&typeof value=='object'){/*处理对象*/ draw.push(tab+(formObj?('"'+name+'":'):'')+'{'+line);/*缩进'{' 然后换行*/ var len=0,i=0; for(var key in value)len++; for(var key in value)notify(key,value[key],++i==len,indent,true); draw.push(tab+'}'+(isLast?line:(','+line)));/*缩进'}'换行,若非尾元素则添加逗号*/ }else{ if(typeof value=='string')value='"'+value+'"'; draw.push(tab+(formObj?('"'+name+'":'):'')+value+(isLast?'':',')+line); }; }; var isLast=true,indent=0; notify('',data,isLast,indent,false); this.countInfo='共处理节点<b>'+nodeCount+'</b>个,最大树深为<b>'+maxDepth+'</b>'; return draw.join(''); }, msg:function(text,type){/* 编辑状态或者错误通知 */ if(!this.msgUI)return alert(text); with(new Date)var now=([getHours(),getMinutes(),getSeconds()].join(':')).replace(/\b\d\b/g,'0$&'); this.msgUI.innerHTML='<div>['+now+'] &nbsp;&nbsp;'+text.replace(/\n/g,'<br/>')+'</div>'; this.msgUI.className=type; }, show:function (ico,id){/* 显隐树节点 */ var subView=ico.parentNode.parentNode.childNodes[1].style,J=this.ico; if(subView.display=='none'){ subView.display=''; ico.src=J[id]; }else{ subView.display='none'; ico.src=J[id+'c']; }; }, select:function (sender){ var sub=sender.parentNode.parentNode.getElementsByTagName("INPUT"); for (var i=0;i<sub.length;i++ ) {sub[i].checked=sender.checked;} } }; JE.add=function(){ this.msg('功能添加中...*_^'); } JE.editItem=function(){ this.msg('功能添加中...*_^'); } JE.begin=function(){/* 设置UI控件关联响应 */ var $=function (id){return document.getElementById(id)}; /* 关联UI */ JE.editUI=$("json_eidit"); JE.msgUI=$("json_editInfo"); JE.treeUI=$("tree"); var updateUI=$("update"); var auto=$("autoUpdate"); var fontSize=$("fontSize"); /* 单击树子项 */ JE.οnclick=function(item){ var key='键名: <input value="'+item.getAttribute('key')+'" />', val=' 键值: '+(item.getAttribute('val')==''?'成员列表':'<input value="'+item.getAttribute('val')+'" />'), add='<button οnclick="'+this.name+'.add(this)">新增</button>', edit='<button οnclick="'+this.name+'.editItem(this)">修改</button>'; JE.msg(key+val+add+edit,'info'); } /* 监听代码变化事件 */ JE.editUI.οninput=JE.editUI.onpropertychange=function (){ if(JE.formating)return;/* 格式化不刷新树 */ if(/^\s*$/.test(this.value))return JE.msg('请输入JSON格式的代码!');; clearTimeout(JE.update); try{JE.data=eval('('+this.value+')'); }catch(e){ JE.editUI.style.color='red'; return JE.msg("源代码有错误: "+e.description+' , 如果正在编辑中, 请忽略此消息!','err'); }; JE.editUI.style.color='#000'; if(auto.checked||JE.firstUp){/*若同步*/ JE.msg('语法正确,正在重新构造树,请稍候...','busy'); JE.update=setTimeout(function(){ JE.toTree(); },450); }else{ JE.msg('语法正确,请点击刷新,或者打开视图同步开关,或者继续编辑!') } return true; }; if(window.ActiveXObject) document.execCommand("BackgroundImageCache", false, true); /* 拦截Tab,自动格式化 */ JE.editUI.οnkeydοwn=function (){ if(event.keyCode==9){$('format_indent').onclick();event.returnValue=false;}; JE.code=this.value; } /* 格式化 */ var format=function(compress){ var code=JE.format(JE.editUI.value,compress); JE.formating=true; if(code)JE.editUI.value=code; JE.editUI.focus(); setTimeout(function(){JE.formating=false;},1000); return code; } /* 工具栏按钮 */ $('format_indent').οnclick=function (){if(format())JE.msg('完成缩进风格转换,'+JE.countInfo)} $('format_compress').οnclick=function (){if(format(true)!=undefined)JE.msg('完成紧凑风格转换,'+JE.countInfo);} updateUI.οnclick=function (){ JE.firstUp=true; JE.editUI.onpropertychange()?JE.msg('成功刷新视图!'):JE.msg('数据有误,刷新失败!','err') JE.firstUp=false; }; $('clear_txt').οnclick=function (){JE.editUI.value=JE.treeUI.innerHTML='';JE.editUI.focus();} auto.οnclick=function (){JE.msg('自动同步视图功能'+(this.checked?'开启':'关闭!'));}; /* 另存为 */ if(/*@cc_on !@*/true){$('save_as').style.display='none'}; $('save_as').οnclick=function (){ var d=document,w=d.createElement('IFRAME'); w.style.display="none"; d.body.appendChild(w); setTimeout(function(){ var g=w.contentWindow.document; g.charset = 'utf-8'; g.body.innerHTML=JE.editUI.value; g.execCommand("saveas",'', "json.txt") ; },1); } }; /* 从这里开始 */ window.οnlοad=function (){ JE.begin(); } </script> </html>
    提示:您可以先修改部分代码再运行


    • 用来简单的查看、辅助修改繁杂的JSON数据,格式化或者压缩JJSON,当然也可以自由即时编辑一些简单的JSON数据。
    • 大家可以输入或者粘贴一些JSON数据来校验是否正确。
    • Tab键自动全文缩进格式化。



    • 本文转自suifei博客园博客,原文链接:http://www.cnblogs.com/Chinasf/archive/2010/05/09/1731160.html,如需转载请自行联系原作者
    展开全文
  • 使用vue.js和element-ui实现的网页版的JSON编辑器,使用之前需要安装NODE.js和npm
  • Jos de Jong的JSON编辑器的Angular.js指令。 网站: : 要求 jQuery的 AngularJS 用法 将脚本文件加载到您的应用程序中: <!DOCTYPE html > < html lang =" en " > < head > ... < title &...
  • json编辑器-源码

    2021-02-13 02:38:18
    json编辑器 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # lint all *.js and *...
  • 如今的web应用很少有不使用ajax技术的,而ajax与服务端数据交互大都用的json。刚发现一个在线json编辑器,保存下来分享给大家
  • JSON编辑器 JSON编辑器采用JSON模式,并使用它来生成HTML表单。 它完全支持JSON Schema版本3和版本4,并且可以与几种流行CSS框架(引导程序,基础和jQueryUI)集成。 查看交互式演示(demo.html): 下载(压缩后为...
  • json-schema-editor一个用于JSON模式的直观编辑器,它提供一个树视图来显示模式结构,并提供一个属性检查器来编辑json-schema-editor一个用于JSON模式的直观编辑器,它提供一个树状视图来显示模式结构和属性检查器以...
  • 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view...
  • #JSON M Edit一个简约的JSON编辑器。 #Building&Include将存储库克隆到公共可访问目录(在下面的代码中标记为{$PATH} )。 ## include包含在网页中JSONMEdit是使用构建的,用于创建可以包含的单个代码文件。 cd到...
  • 如果你的项目中有一个 jsconfig.json文件的话,这个文件的配置可以对你的文件所在目录下的所有js代码做出...如果想要编辑器的性能有一个提升的话,我们应该排除这个文件夹。 { "exclude": [ "node_modules" ] } in

    如果你的项目中有一个 jsconfig.json文件的话,这个文件的配置可以对你的文件所在目录下的所有js代码做出个性化支持。

    jsconfig.json的配置是tsconfig.json的子集。

    jsconfig.json的配置

    • exclude属性
      当vscode扫描项目代码的时候,如果遇到了node_module的话是会变得很慢的。如果想要编辑器的性能有一个提升的话,我们应该排除这个文件夹。
    {
        "exclude": [
            "node_modules"
        ]
    }
    
    • include属性
      当然还有相对的include属性
    {
        "include": [
            "src/**/*"
        ]
    }
    
    • compilerOptions
      webpack aliases的支持。如果我们在我们的webpack里面配置的路径的别名,心细的小朋友就发现了. 我们的vscode不能根据别名路径导入的包跳转文件了.所以我们还需要jsconfig.json的支持。
    {
      "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "@component": ["./src/component"]
        }
      }
    }
    

    jsconfig.json的配置

    {
      "compilerOptions": {
        "baseUrl": "./",
        "paths": {
          "@/*": ["src/*"]
        }
      },
      "exclude": ["node_modules", "dist"]
    }
    
    展开全文
  • json schema json编辑器 (json-editor) Edit JSON in UI form with JSON Schema and Vue.js json-editor component. 使用JSON Schema和Vue.js json-editor组件以UI形式编辑JSON。 安装 (Install) npm install vue...

    json schema

    json编辑器 (json-editor)

    Edit JSON in UI form with JSON Schema and Vue.js json-editor component.

    使用JSON Schema和Vue.js json-editor组件以UI形式编辑JSON。

    安装 (Install)

    npm install vue-json-ui-editor --save

    (Use)

    <template>
    <json-editor ref="JsonEditor" :schema="schema" v-model="model">
        <button @click="submit">submit</button>
        <button @click="reset">Reset</button>
    </json-editor>
    </template>
    
    <script>
    const SCHEMA = {
      type: 'object',
      title: 'vue-json-editor demo',
      properties: {
        name: {
          type: 'string',
        },
        email: {
          type: 'string',
        },
      },
    };
    // import vue-json-ui-editor
    import JsonEditor from '../../src/JsonEditor.vue';
    export default {
      components: { JsonEditor },
      data: () => ({
        // init json schma file ( require('@/schema/newsletter') )
        schema: SCHEMA,
        // data
        model: {
          name: 'Yourtion',
        },
      }),
    
      methods: {
        submit(_e) {
          alert(JSON.stringify(this.model));
        },
        reset() {
          this.$refs.JsonEditor.reset();
        },
      },
    };
    </script>

    More info on: Example-Subscription Schema: newsletter.json

    有关更多信息: 示例订阅模式: newsletter.json

    道具 (props)

    • schema Object (required) The JSON Schema object. Use the v-if directive to load asynchronous schema.

      schema Object ( 必需 )JSON Schema对象。 使用v-if指令加载异步模式。

    • v-model Object (optional) default: [object Object] Use this directive to create two-way data bindings with the component. It automatically picks the correct way to update the element based on the input type.

      v-model Object ( 可选 ) default: [object Object]使用此伪指令可与组件创建双向数据绑定。 它会根据输入类型自动选择更新元素的正确方法。

    • auto-complete String (optional) This property indicates whether the value of the control can be automatically completed by the browser. Possible values are: off and on.

      auto-complete String ( 可选 )此属性指示浏览器是否可以自动完成控件的值。 可能的值为: offon

    • no-validate Boolean (optional) This Boolean attribute indicates that the form is not to be validated when submitted.

      no-validate 布尔值 ( 可选 )此布尔值属性指示在提交表单时不对其进行验证。

    • input-wrapping-class String (optional) Define the inputs wrapping class. Leave undefined to disable input wrapping.

      input-wrapping-class 字符串 ( 可选 )定义输入包装类。 保留undefined以禁用输入换行。

    数据 (data)

    • default initial value: [object Object]

      default 初始值: [object Object]

    • fields initial value: [object Object]

      fields 初始值: [object Object]

    • error initial value: null

      error 初始值: null

    • data initial value: [object Object]

      data 初始值: [object Object]

    大事记 (events)

    • input Fired synchronously when the value of an element is changed.

      input当元素的值更改时同步触发。

    • change Fired when a change to the element's value is committed by the user.

      当用户提交对元素值的change触发。

    • invalid Fired when a submittable element has been checked and doesn't satisfy its constraints. The validity of submittable elements is checked before submitting their owner form, or after the checkValidity() of the element or its owner form is called.

      invalid在检查了可提交元素并且不满足其约束条件时触发。 在提交其所有者表单之前,或者在checkValidity()元素或其所有者表单的checkValidity()之后,检查可提交元素的有效性。

    • submit Fired when a form is submitted

      submit表单时触发

    方法 (methods)

    • input(name) Get a form input reference

      input(name)获取表单输入参考

    • form() Get the form reference

      form()获取表单参考

    • checkValidity() Checks whether the form has any constraints and whether it satisfies them. If the form fails its constraints, the browser fires a cancelable invalid event at the element, and then returns false.

      checkValidity()检查表单是否具有任何约束以及是否满足约束。 如果表单无法满足其约束条件,则浏览器将在该元素上引发可取消的invalid事件,然后返回false。

    • reset() Reset the value of all elements of the parent form.

      reset()重置父窗体的所有元素的值。

    • submit(event) Send the content of the form to the server

      submit(event)将表单内容发送到服务器

    • setErrorMessage(message) Set a message error.

      setErrorMessage(message)设置消息错误。

    • clearErrorMessage() clear the message error.

      clearErrorMessage()清除消息错误。

    翻译自: https://vuejsexamples.com/edit-json-in-ui-form-with-json-schema-and-vue-js/

    json schema

    展开全文
  • vue中使用Json编辑器-------jsoneditor

    万次阅读 2018-11-09 16:41:35
    Install npm install jsoneditor --save ...# main.js import jsoneditor from 'jsoneditor' Vue.prototype.$jsoneditor = jsoneditor let container = document.getElementById('jsoneditor') let json = { ...
  • 一个无限嵌套,无依赖的Angular交互式JSON编辑器。 可以支持无限嵌套的对象,而无需安装jQuery,引导程序或任何ui依赖项。 所有更改都发生在摘要周期内。 100%的测试覆盖。 用法 bower install angular-json-edit ...
  • JSON 在线编辑器

    千次阅读 2018-08-09 15:03:44
    jsoneditor 是 JSON 在线编辑器插件,用法如下 一、插件下载 jsoneditor 官网地址:https://github.com/josdejong/jsoneditor,插件在 dist 目录下(img、jsoneditor.css 和 jsoneditor.js) 二、使用 在 ...
  • matlab更改代码字体JSON编辑器 JSON编辑器采用JSON模式,并使用它来生成HTML表单。 它完全支持JSON Schema版本3和版本4,并且可以与几种流行CSS框架(引导程序,基础和jQueryUI)集成。 查看交互式演示(demo.html)...
  • json模式编辑器 JSON模式的直观编辑器,提供树视图以显示模式结构,并提供属性检查器以编辑模式元素的属性。 使用Vue.js 2和Firebase开发。 请参考了解详细信息。 产品特点 模式元素托盘 JSON模式的所有元素的列表,...
  • JSON编辑器 使用更新的fork 的非活动的前叉。 从原始存储库添加了一些拉取请求。 JSON编辑器采用JSON模式,并使用它来生成HTML表单。 它完全支持JSON Schema版本3和4,并且可以与几种流行CSS框架(引导程序,幽灵...
  • matlab更改代码字体JSON编辑器 使用更新的fork的非活动的fork。 从原始存储库添加了一些拉取请求。 JSON编辑器采用JSON模式,并使用它来生成HTML表单。 它完全支持JSON Schema版本3和版本4,并且可以与几种流行CSS...
  • json编辑器 JSON文档的模式感知编辑器。 它提供了一个树状视图来表示JSON文档的结构,用户可以从上下文菜单中操作JSON。 它也有一个文本视图来显示JSON文档的内容,用户可以在其中编辑JSON。 使用Vue.js进行开发2.请...
  • 如果您喜欢Editor.js,则可以通过向我们的集体捐款来支持项目改进和新功能的开发。 :backhand_index_pointing_right: 赞助商 通过成为赞助者来支持该项目。 您的徽标将显示在此处,并带有指向您网站的链接。 [] ...
  • matlab更改代码字体JSON编辑器 JSON编辑器采用JSON模式,并使用它来生成HTML表单。 它完全支持JSON Schema版本3和版本4,并且可以与几种流行CSS框架(引导程序,基础和jQueryUI)集成。 查看交互式演示(demo.html)...
  • React JSON模式表单编辑器 该存储库包含一个称为FormBuilder的React JS组件的代码,该代码允许用户通过拖放,编辑卡元素来直观地配置。 该工具的一个示例用例可能是构建一个允许用户创建和分发自己的调查的应用程序...
  • JSON编辑器是最小但灵活的表格数据编辑器,您可以在其中将格式附加到每个单元格,并为您提供JSON输出。 建置状态 代码风格 使用标准代码样式。 演示版 截屏 特征 它并不意味着要查看大型电子表格数据。 它旨在...
  • json模式编辑器可视 基于React的高效且易于使用的json模式编辑器。 用法 npm install json-schema-editor-visual const option = { } import 'antd/dist/antd.css' require ( 'json-schema-editor-visual/dist/...
  • 它使用作为代码语法语法,使用作为HTML的Markdown解析,并使用将JSON对象格式化为HTML页面。 关于降价 John Gruber的Markdown语法文档 如何建造 要构建示例,可以使用yarn或npm install 。 怎么跑 要运行示例,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,124
精华内容 449
关键字:

jsjson编辑器