位置:首页 > web前端 > vue

vue实现拖拽功能并生成h5页面 生成PC页面

dearweb 发布:2021-09-01 15:12:47阅读:

最近接到了一个比较棘手的项目,实现拖拽生成h5或PC页面的功能,之前没有搞过类似的项目,所以顿时感到有点挑战性,不过还好,小编基础知识还比较扎实,在思考片刻后就开始入手了。

基础插件的准备

主要用到了vue的两个插件,draggable和VueDragResize

draggable:主要是实现组件的拖拽功能(用于拖拽页面)。

VueDragResize:主要实现组件的缩放以及在画布上拖拽移动的功能(用于热区)。

初始化项目之后进行组件的安装

安装draggable
npm install draggable --save

安装draggable
npm install VueDragResize --save

效果预览

在这里只给首页大家看了后期再将源码开源出来,这是配置页面。

Dingtalk_20210901154116.jpg生成的预览页面

配置完成后点击保存

Dingtalk_20210901154357.jpg

上面是最终生成的效果,看看是不是比较神奇,网址希望大家收藏,后期我会将源码发布出来。

24人点赞 返回栏目 提问 分享一波

小礼物走一波,支持作者

还没有人赞赏,支持一波吧

留言(问题紧急可添加微信 xxl18963067593) 评论仅代表网友个人 留言列表

暂无留言,快来抢沙发吧!

本刊热文
网友在读
手机扫码查看 手机扫码查看