3
自定义组件开发示例教程
2026-07-24 10:43:17
122 次阅读
3 个评论
最后修改时间：2026-08-14 14:48:36
1. 拖拽一个文字组件放到画布中
2. 选择文字组件的事件--高级事件--编辑
3. 将以下代码粘贴到高级事件中，将domId替换为当前拖拽文字组件的id,将htmlContent替换为自定义的html模板
// 当前文字组件的id
let domId = '296q5p';
// 自定义组件的模板
let htmlContent = `
<html>
<style>
.box296q5p{ height:100% }
.box296q5p img{
width:100%;
height:100%;
}
</style>
<div class="box296q5p"><img src="https://f.picimos.com/dbbba5439aa25ef3b5a55e5fceb7ef13.jpg"/></div>
</html>
`;
// 1. 先通过 ID 获取父级 DOM 节点
let parentDom = document.getElementById(domId);
if (parentDom) {
// 此处获取.el-visual-wrap是兼容编辑模式界面
let targetDom = parentDom.querySelector('.el-visual-wrap');
if (targetDom) {
targetDom.innerHTML = htmlContent;
} else {
parentDom.innerHTML = htmlContent;
}
} else {
console.error('未找到 id 为 296q5p 的父级元素');
}4. 编辑完成后点击保存
5. 保存后即可查看预览效果，自定义组件完成
0 赞
0 收藏
评论
苏打饼干扎眼2026-08-10 15:15:45是任意一个组件都可以吗？赞- 对的，任意组件都可以🤫
未闻花名作者2026-08-10 15:24:04
赞
longling18402026-08-25 09:03:44
赞
共 3 条
- 1
页
请登录后回答。没有帐号？注册一个。