工作中有個需求竭沫，做一個動態(tài)組件燥翅，也就是組件代碼由客戶書寫，然后生成頁面蜕提，所以森书，就需要將動態(tài)書寫的組件插入到頁面中，不過谎势，目前我這邊只是做了一個初步版本：需要用戶書寫js文件的組件
<template>
<div class="widgetCustom" ></div>
</template>
<script>
import Vue from "vue";
export default {
watch: {
sourceCode() {
this.generalDynamicComponents(this.sourceCode);
},
},
mounted() {
this.generalDynamicComponents(this.sourceCode);
},
methods: {
//data是動態(tài)組件代碼凛膏，數(shù)據(jù)demo在后面列出
generalDynamicComponents(data) {
let myComponent = data;
//將組件掛載到根節(jié)點
let instance = new Vue({
el: document.createElement("div"),
render: (h) => h(myComponent),
});
this.$nextTick(() => {
let rootdom = document.querySelector(".widgetCustom");
if (rootdom) {
rootdom.innerHTML = "";
rootdom.appendChild(instance.$el);
}
});
},
},
};
</script>
//data的demo 這里的代碼是動態(tài)傳遞給我們自己的組件的
{
data() {
return {
username: "aaa",
};
},
render(createElement) {
return createElement("div", {
style: {
//樣式
width: "300px",
height: "200px",
background: "#01ba8e",
color: "#fff",
textAlign: 'center',
lineHeight: '200px',
fontSize: '30px',
},
class: {
//類名
current: true,
active: false,
},
attrs: {
//正常的html特性
id: 'foo',
},
props: {
//組件的props屬性
myName: 'bar',
},
domProps: {
//dom屬性
innerHTML: this.username,
value: '',
},
on: {
//事件監(jiān)聽
click: () => {
console.log('點擊事件')
},
},
//其他的特殊頂層屬性
ref: 'myRef',
});
},
}
