溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹Vue結合原生js如何實現自定義組件自動生成，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
就目前三大前端主流數據驅動框架（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">
<h6 class="mui-content-padded" v-text="keyname"></h6>
<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動態注冊自定義組件的深入領會，繼續努力中。。。
以上是“Vue結合原生js如何實現自定義組件自動生成”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
