🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
一、基本操作 拖拽功能须知:在编辑器的设计模式进行 1、我们在页面中添加一个表单组件的版块来做为例子进行说明,如图,这个表单的左右两侧是有间距组件,所以距离页面两边会有一定距离 ![](http://bk.image.styleweb.com.cn/2018/7/30/_jk7qv0ch.png?imageView2/2/q/100)![](http://bk.image.styleweb.com.cn/2018/7/30/_jk7qv977.png?imageView2/2/q/100) 2、设置版块中不同组件的页面比例 (1)在版块空白处点击鼠标 (2)再把鼠标移动到间距组件和表单组件的边缘,左右拖动出现的边缘线,便可以调整组件大小 ![](http://bk.image.styleweb.com.cn/2018/7/30/_jk7qwclf.png?imageView2/2/q/100) ![](http://bk.image.styleweb.com.cn/2018/7/30/_jk7qwmtt.png?imageView2/2/q/100) 3、当我们删除间距组件,左边的间距便会消失,这时我们可以通过组件拖拽,在表单组件的上下左右添加组件 ![](http://bk.image.styleweb.com.cn/2018/7/30/_jk7qx7v0.png?imageView2/2/q/100) ![](http://bk.image.styleweb.com.cn/2018/7/30/_jk7qxgc6.png?imageView2/2/q/100) 4、比如我们要将图中(下图1)上方的地图组件,拖动到表单组件的左边,我们可以点击地图组件,选中移动,将地图组件拖拽到表单组件的左边,当表单组件的左边出现灰色长条即可释放鼠标(下图2),释放后的效果如同(下图3),拉动图中(下图3)黑色小黑方块可以改变组件长度 ![](http://bk.image.styleweb.com.cn/2018/7/30/_jk7qxzco.png?imageView2/2/q/100)图1 ![](http://bk.image.styleweb.com.cn/2018/7/30/_jk7qyckp.png?imageView2/2/q/100)图2 ![](http://bk.image.styleweb.com.cn/2018/7/30/_jk7qyuic.png?imageView2/2/q/100) 图3 5、拖拽组件时,当表单下方出现灰色长条表示组件将排列在表单下方,其它方向同理 ![](http://bk.image.styleweb.com.cn/2018/7/30/_jk7qzhs4.png?imageView2/2/q/100) 提示:组件拖拽时请细心一点哦,这样才能快速找到准确的位置