最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Vue结合原生js实现自定义组件自动生成示例
时间:2017-02-28 编辑:简简单单 来源:一聚教程网
就目前三大前端主流数据驱动框架(vue,ng,react)而言,均具有创建自定义组件的api,但都是必须先做到事先写好挂载点,这个挂载点可以是原有静态元素标签也可以是自定义模板;对于多种组件通过同一数据流生成的,如果事先在页面上写好挂载点(mounted),然后通过dom操作去动态添加,会遇到类似这样一条错误提示信息:Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.(…)。这又是为何呢,下一步该怎么办?
原因是任何dom操作的对象必须是符合W3C标准的元素,除非如下所述的,改写生成html元素对象的原型(HTMLElement.prototype)并注册自定义元素,从而实现动态生成自定义组件的效果。
不过,大家都明白使用数据驱动框架的初衷就是尽可能避免dom操作,而如下代码中还是有一些dom操作的,就目前认知水平而言,感觉这些必要的dom操作还是避免不了的。其它不多说了,直接看代码。。。
代码如下 | 复制代码 |
varjsonData = [ { "keyname":"姓名鄂然失色而热重重中之重重中之重杂志的热热", "type":"text", "key":"name11" }, { "value":"姓名鄂之重杂志的热热", "key":"name11" }, { "keyname":"姓名鄂然失色而热热热热是重中之重重中之重重中之重杂志的热热", }, { "keyname":"姓名鄂然失色而热热热热是重中之重重中之重重中之重杂志的热热", "type":"textarea", "key":"name" }, { "keyname":"性别", "type":"radio", "key":"sex", "values": [ { "key":"man", "value":"男辅导班" }, { "key":"women", "value":"女" } ] }, { "keyname":"复选", "type":"checkbox", "key":"checkbox", "values": [ { "key":"man", "value":"男" }, { "key":"women", "value":"女" } ] }, { "keyname":"类型", "type":"select", "key":"type1", "values": [ { "key":"type1", "value":"类型1" }, { "key":"type2", "value":"类型2" }, { "key":"type3", "value":"类型3" }, { "key":"type4", "value":"类型4" } ] }, { "keyname":"定位", "type":"gps", "key":"btn", "value":"地图获取定位" }, { "keyname":"拍照", "type":"photo", "key":"btn", "value":"拍照" } ]; (function() { AnalyJson(jsonData); })(); functionAnalyJson(data) { if('id'indata) { arguments.callee(data.values); }else{ if('name'indata) { htmlname = data.name; CreateInputViewer(data.name); arguments.callee(data.values); }else{ if('type'indata) { CreateInputViewer(data); }else{ for(varpindata) { CreateInputViewer(data[p]); } } } } } functionCreateInputViewer(data) { switch(data.type) { case'text': { fh_C(data,'c-input-text'+'-'+ data.key,'fhInputText', textTpl); break; } case'textarea': { fh_C(data,'c-textarea'+'-'+ data.key,'fhInputTextarea', textareaTpl); break; } case'radio': { fh_C(data,'c-input-radio'+'-'+ data.key,'fhInputTextarea', radioTpl); break; } case'checkbox': { fh_C(data,'c-input-checkbox'+'-'+ data.key,'fhInputCheckbox', checkboxTpl); break; } case'select': { fh_C(data,'c-select'+'-'+ data.key,'fhSelect', selectTpl); break; } case'photo': { fh_C(data,'c-photo'+'-'+ data.key,'fhPhoto', photoTpl); break; } case'gps': { fh_C(data,'c-gps'+'-'+ data.key,'fhGPS', gpsTpl); break; } default: { fh_C(data,'c-default'+'-'+ data.key,'fhInputDefault', defaultTpl); break; }
} } functionfh_C(d, c, cn, tpl) { console.log(d); Vue.component(c, { template: tpl, // props:['key','keyname','values','value'], data:function() { returnd } }); newVue({ el:'.mui-content', components: { cn: cn }, }); varMyElementProto = Object.create(HTMLElement.prototype); MyElementProto.createdCallback =function() { this.innerHTML = tpl }; varMyComponent = document.registerElement(c, {prototype: MyElementProto}); document.querySelector('.mui-content').appendChild(newMyComponent()); } |
为了保持代码的可维护性及易读性,我将模板部分单独放在fuhao-components.js的文件里边,如下所示:
代码如下 | 复制代码 |
var textTpl='';
var textareaTpl= '';
var radioTpl= '';
var checkboxTpl= '';
var selectTpl= '';
var photoTpl= '';
var gpsTpl=''; 获取定位
var defaultTpl= '';
|
最终渲染效果如下:
鉴于vue结合dom操作动态生成自定义组件,控制台会报一定的错误这一点bug还在努力修复中,可能需要更加深入地了解vue数据绑定及传递机制与js动态注册自定义组件的深入领会,继续努力中。。。
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31