zoukankan      html  css  js  c++  java
  • 基于vuedraggable的表单生成组件和基于paperjs的流程图组件

      前一阵子(em。。。这个前挺长了)做了一个表单生成组件和流程图组件。分别使用的是vuedraggable和paperjs。看了一些官方的介绍和源码,然后就直接上手了。

    1.vuedraggable

      比较简单,主要就是将数据和拖动及拖出和拖入事件绑定好就可以了。拖动的时候,会自动生成ghost,移动中换位动画也是动态的。效果图:

      此外做了预览、数据保存、校验。每个组件都可以自定义限制条件。关键逻辑是,左侧和中间是两个拖拽部分,右侧是form表单。左侧拖动到中间,new拖动的组件对应的模型添加到data里,然后通过右侧的插槽,使修改右侧配置时能双向同步到数据中。整个是用Vue基于Element组件做的。

    2.paperjs

      paperjs是基于canvas做的,所以风格和canvas也有一定的相似性。并引入了组、视图、项目、工具、路径等概念。官方目前的资料大部分是英文的,官方api也有一些实例不过不够详细。效果如下:

      设计思路与上边类似,操作控制也很繁杂,需要比较有耐心。

       官方示例:http://paperjs.org/tutorials/

  • 相关阅读:
    Linux的目录结构
    python爬虫系列序
    Ant批量处理jmeter脚本
    SoapUI测试webservice接口
    Jmeter分布式部署
    基础知识回顾:闭包
    Jmeter简单应用
    postman安装与使用
    python2.7编码与解码
    Markdown及MarkdownPad使用规则
  • 原文地址:https://www.cnblogs.com/ljwsyt/p/12177268.html
Copyright © 2011-2022 走看看