@pluginarch/create-parch
Version:
this is way to create a ui project
193 lines (178 loc) • 6.74 kB
JavaScript
// const customElements = globalThis.customElements || class {
// static define=(a,b)=>{}
// };
class TestButton extends BaseElement {
constructor(opts) {
super();
this.opts = opts
this._initTemplate();
// 调用父方法进行模板解析
// this.parseTemplate();
this._initEvent();
this._updateRendering();
// this.createWorker()
// 注册沙箱环境
this.sandBoxType = "0"; // 走默认设置
this.sandBoxOptions = {
sandboxName: "",
sandBoxActive: true,
sandBoxType: "0",
};
this.initComponent();
}
// createWorker(){
//
// // 创建一个Worker对象，并指定其脚本路径
// this.worker = new Worker('pages/Graph_1.0.0/face/worker.mjs');
// // 监听worker的消息，并处理
// this.worker.onmessage = (event) => {
// // 处理来自worker的消息，例如更新UI等
// console.log('Received message from worker:', event.data);
// if (event.data.type === 'update') {
// this.updateComponent(event.data.data);
// }
// };
// this.worker.postMessage({ shadow: this.shadow });
// }
// connectedCallback() {
//
// // 在此处取对象
// this.sandBoxType = this.getAttribute('sandBoxType');
// this.sandBoxOptions = this.convertToJSON(this.getAttribute('sandBoxOptions'));
// // if (this.sandBoxOptions.sandBoxActive) {
// // // this.sandBox = this.installSandbox(this.sandBoxOptions.sandboxName);
// // }
// }
_initEvent() {
this.shadow.querySelector("#hd_button1").onclick = () => {
console.log("hd_button1_click");
console.log(this);
this.$eventbus.$emit("usrInfo", "nari_nusp");
};
}
// createInnerElements(elementsConfig) {
// this.elements = {};
// for (let key in elementsConfig) {
// this.elements[key] = document.createElement(elementsConfig[key].tag);
// if (elementsConfig[key].textContent) {
// this.elements[key].textContent = elementsConfig[key].textContent;
// }
// }
// }
_initTemplate() {
this.template = document.createElement("template");
const templateStr = `
<div style="margin: 10px ">
<div style="margin: 30px 0;">
<hd-button>按钮</hd-button>
<hd-button id='hd_button1' type="primary">按钮</hd-button>
<hd-button type="success">按钮</hd-button>
<hd-button type="warning">按钮</hd-button>
<hd-button type="danger">按钮</hd-button>
<hd-button type="info">按钮</hd-button>
</div>
<div style="margin-bottom: 30px;">
<hd-button round="true">圆角按钮</hd-button>
<hd-button type="primary" round="true">圆角按钮</hd-button>
<hd-button type="success" round="true">圆角按钮</hd-button>
<hd-button type="warning" round="true">圆角按钮</hd-button>
<hd-button type="danger" round="true">圆角按钮</hd-button>
<hd-button type="info" round="true">圆角按钮</hd-button>
</div>
<div style="margin-bottom: 30px;">
<hd-button >默认按钮</hd-button>
<hd-button size="medium">中等按钮</hd-button>
<hd-button size="small">小型按钮</hd-button>
<hd-button size="mini">超小按钮</hd-button>
<hd-button round="true">默认按钮</hd-button>
<hd-button size="medium" round="true">中等按钮</hd-button>
<hd-button size="small" round="true">小型按钮</hd-button>
<hd-button size="mini" round="true">超小按钮</hd-button>
</div>
</div>
<script type="text/javascript" src="pages/PButton/loggerTool.js"></script>
<script type="text/javascript" src="pages/PButton/button.js"></script>
<script type="text/javascript" src="pages/PButton/iframesandbox.js"></script>
<script type="text/javascript">
window.loggerTool(0,'aa')
</script>
`;
// this.template.innerHTML += cssStr + scriptStr
// this.shadow.appendChild(this.template.content.cloneNode(true));
this.parseTemplate(templateStr, `window.loggerTool(0,'testButton Loaded')`);
}
_updateRendering() {}
// initScript() {
//
// const template = document.createElement('template');
// template.innerHTML = ` `;
// const content = template.content.cloneNode(true);
// shadow.appendChild(content);
// 监听<script>元素加载
// const observer = new MutationObserver((mutations, observer) => {
// Array.from(shadow.querySelectorAll('script')).forEach(script => {
// if (script.readyState === 'complete' || script.readyState === 'loaded') {
// // 调用脚本中的函数
// myFunction();
// observer.disconnect(); // 停止监听
// }
// });
// });
// observer.observe(shadow, { childList: true, subtree: true });
// }
dynamicStyle(path, callback) {
fetch(path)
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.text();
})
.then((css) => {
callback(css);
})
.catch((error) => {
console.error(
"There has been a problem with your fetch operation:",
error
);
});
}
// convertToJSON(input) {
// const result = {};
// const pairs = input
// .split(";")
// .map((pair) => pair.trim())
// .filter((pair) => pair.length > 0);
// pairs.forEach((pair) => {
// const [key, value] = pair.split(":").map((part) => part.trim());
// if (key && value !== undefined) {
// // 尝试将值转换为数字
// const numValue = parseFloat(value);
// result[key] = isNaN(numValue) ? value : numValue;
// }
// });
// return result;
// }
initComponent() {
this.$eventbus.$on('template_drag_complete',(nodeName,attrs,opts)=>{
console.log('事件发几次')
const node = this.shadow.querySelector('#'+attrs.id)
const optsJson = this.strConvertToJson(opts)
if(node) {
node.style.left = optsJson.left
node.style.top = optsJson.top
}else{
this.createWrapper(nodeName,attrs,opts,this.shadow)
}
})
this.$eventbus.$on('template_drag_cancel',(attrs)=>{
const node = this.shadow.querySelector('#'+attrs.id)
if(node) {
this.shadow.removeChild(node)
}
})
}
}
// 定义该组件的标签名
customElements.define("pe-testbutton", TestButton);