vue+elementUi开发一个可拖拽的和拉伸编辑的画板

最近几天一直在用vue去实现动态编辑模板的一个小功能，包括自由拖拽div，自由拉伸div，自由设置宽度，颜色文本内容，新增和删除对应的div

当前组件git地址

当前组件封装成npm插件 文章详细解读

下方是具体的画面，比较简陋，望各位大神勿喷

现在开始说一下实现的方式

先使用vue的自定义属性定义一个指令为 v-drag

v-drag自定义

在template 以下方式引用  大部分小组件使用的elementUi  方便快捷 

contain参数 是为了防止div在拖拽过程中超出画布边界

引用v-drag

稍后再继续完善功能，增加一些新功能

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容