Vue结合原生js实现自定义组件自动生成示例
程序员文章站
2022-04-28 09:40:58
就目前三大前端主流数据驱动框架（vue,ng,react）而言，均具有创建自定义组件的api，但都是必须先做到事先写好挂载点，这个挂载点可以是原有静态元素标签也可以是自定义...
就目前三大前端主流数据驱动框架（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操作还是避免不了的。其它不多说了，直接看代码。。。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html,charset=utf-8"/>
<meta http-equiv="x-ua-compatible" content="ie-edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="css/mui.min.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet">
<script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="main" class="mui-content">
</div>
</body>
<script src="js/fuhao-components.js" type="text/javascript"></script>
<script>
var jsondata = [
{
"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);
})();
function analyjson(data) {
if ('id' in data) {
arguments.callee(data.values);
} else {
if ('name' in data) {
htmlname = data.name;
createinputviewer(data.name);
arguments.callee(data.values);
} else {
if ('type' in data) {
createinputviewer(data);
} else {
for (var p in data) {
createinputviewer(data[p]);
}
}
}
}
}
function createinputviewer(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;
}
}
}
function fh_c(d, c, cn, tpl) {
console.log(d);
vue.component(c, {
template: tpl,
// props:['key','keyname','values','value'],
data: function () {
return d
}
});
new vue({
el: '.mui-content',
components: {
cn: cn
},
});
var myelementproto = object.create(htmlelement.prototype);
myelementproto.createdcallback = function () {
this.innerhtml = tpl
};
var mycomponent = document.registerelement(c, {prototype: myelementproto});
document.queryselector('.mui-content').appendchild(new mycomponent());
}
</script>
</html>
为了保持代码的可维护性及易读性，我将模板部分单独放在fuhao-components.js的文件里边，如下所示：
var texttpl='';
<div class="mui-content-padded">
<input :type="type" :name="key" :placeholder="keyname" >
</div>
var textareatpl= '';
<div class="mui-content-padded ">
<textarea rows="5" :placeholder="keyname">
</textarea>
</div>
var radiotpl= '';
<form class="mui-input-group mui-content-padded">
<div class="mui-input-row mui-radio mui-left"v-for="value in values">
<label>{{value.key}}</label>
<input :name="key" :type="type" :value="key">
</div>
</form>
var checkboxtpl= '';
<form class="mui-input-group mui-content-padded">
<div class="mui-input-row mui-checkbox mui-left"v-for="value in values">
<label>{{value.key}}</label>
<input :name="key" :type="type" :value="key">
</div>
</form>
var selecttpl= '';
<div class="mui-content-padded">
<h5 class="mui-content-padded" v-text="keyname"></h5>
<select class="mui-btn mui-btn-block " :name="key">
<option value="key" v-text="value.key" v-for="value in values">{{value.key}}</option>
</select>
</div>
var phototpl= '';
<div class="mui-content-padded">
<span v-text="keyname"></span>
<button :name="key" onclick="takephoto(this.name)" class="mui-btn mui-btn-primary">拍照</button>
<img :id="key" height="70" width="100" class="img-rounded">
</div>
var gpstpl='';
<div class="mui-content col-xs-12">
<button class="mui-btn mui-btn-primary" :id="key" onclick="takelocation(this.id)">
获取定位
</button>
</div>
var defaulttpl= '';
<div class="mui-content-padded " v-if="key">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<span class="fuhaokey" v-text="key"></span>
<span class="fuhaovalue" v-text="value"></span>
</li>
</ul >
</div>
最终渲染效果如下：
鉴于vue结合dom操作动态生成自定义组件，控制台会报一定的错误这一点bug还在努力修复中，可能需要更加深入地了解vue数据绑定及传递机制与js动态注册自定义组件的深入领会，继续努力中。。。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。