基于 vue 的移动端页面可视化搭建工具思路

栏目: 编程语言 · 发布时间: 5年前

内容简介:首先我承认我标题党了。。。与其说是可视化搭建工具,不如说是可视化生成页面配置工具,即用拖拽的方式生成页面配置,再通过框架的动态组件的方式,基于配置,生成页面。现在的公司,一个个都开始整自己的组件库,组件库搭建好以后,通过业务积累、聚合基础组件及抽象部分业务代码,又会产出复用性比较高的区块库,而可视化搭建,就是基于区块库来实现的。先说个缺点,比较难应对逻辑复杂的场景以及多变的产品需求。。。

首先我承认我标题党了。。。与其说是可视化搭建工具,不如说是可视化生成页面配置工具,即用拖拽的方式生成页面配置,再通过框架的动态组件的方式,基于配置,生成页面。

现在的公司,一个个都开始整自己的组件库,组件库搭建好以后,通过业务积累、聚合基础组件及抽象部分业务代码,又会产出复用性比较高的区块库,而可视化搭建,就是基于区块库来实现的。

先说个缺点,比较难应对逻辑复杂的场景以及多变的产品需求。。。

背景介绍

日常开发中发现公司很多小的项目长得都差不多,甚至有些页面就是把其他页面的各个模块换个数据,堆在一起就出了一个新页面,且在运营活动页中尤为常见,而这种大同小异的活动页,如果能让运营自己拖拖拽拽就搭出来,岂不美吱吱。

方案设计

首先想了一下,页面应该是这个结构的

基于 vue 的移动端页面可视化搭建 <a href='https://www.codercto.com/tool.html'>工具</a> 思路

整个逻辑应该是这样的

  • 左边列表点一下,组件会出现在中间的位置
  • 中间多个组件可以拖拽进行排序
  • 可能有些组件需要嵌套,需要实现通过拖拽,可以把子组件塞到容器组件里的功能
  • 从中间点击单个组件,可以在右侧展开该组件的配置项
  • 右侧修改后,中间实时呈现效果

页面效果

简单页面撸完如下

基于 vue 的移动端页面可视化搭建工具思路

左侧是基于一个配置文件,生成的组件列表。

中间是嵌套了一个 iframe,与外部通过 postMessage 通信。(本来想画个 iphone6 长相的手机,结果画了半天还是有点像 5s)

右侧是配置组件的位置,效果后面贴图。

拖拽部分使用 vuedraggable 实现,好用到爆炸。

再来个动态图

基于 vue 的移动端页面可视化搭建工具思路

可以看到基本功能都已经实现了,右侧的配置位置可以处理 String、Number、Boolean、Array、Object 类型的数据


以上所述就是小编给大家介绍的《基于 vue 的移动端页面可视化搭建工具思路》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

点石成金

点石成金

[美] 史蒂夫·克鲁克 / De Dream' / 机械工业出版社 / 2006-8 / 39.00元

可用性设计是Web设计中最重要也是最困难的一项任务。《点石成金》的作者根据自己多年从业的经验,剖析用户的心理,在用户使用的模式、为浏览进行设计、导航设计、主页布局、可用性测试等方面提出了许多独特的观点,并给出了大量简单、易行的可用性设计的建议。这本书短小精悍,语言轻松诙谐,书中穿插大量色彩丰富的屏幕截图、趣味丛生的卡通插图以及包含大量信息的图表,使枯燥的设计原理变得平易近人。 此书适合从事W......一起来看看 《点石成金》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

html转js在线工具
html转js在线工具

html转js在线工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具