您的位置:首页 > 产品设计 > UI/UE

浅谈使用element ui + vuedraggable + sortablejs实现多种版式布局及托拽(1)

2017-09-08 23:20 3507 查看
前言:在当前主流的PC界面实现方案中,为了给客户更好的体验,我们需要实现多种布局方式

一列布局(100%)

两列布局(50%,50%)

三列布局(33%,33%,33%)

左右布局(3 7分布,7 3分布)



图片(1)


图片(2)



图片(3)

图片1,2是其中的两种布局效果图,3版式布局样式


使用element UI实现布局方案

js布局数据





vue渲染布局



在layTable选择不同的布局方式后,,查找beforeblocks对应布局,赋blocks,在vue文件渲染blocks,使用element ,通过控制布局。

这样就可以通过不同选择实现版式布局了。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐