--- theme: fancy --- ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/42790afa8a0140b6ab639846bdc706b6~tplv-k3u1fbpfcp-watermark.image) > 前言：这是一篇迟到的下集，上次分享了如何从0到1搭建一个可视化数据大屏，介绍了数据搭配的前期调研、控件区域的开发、画布模块的开发等等。上篇的链接点我👉 [从0到1开发可视化数据大屏（上）](https://juejin.cn/post/6931708519976534029#heading-17) 而下集主要围绕.控件管理模块、数据管理模块、图层管理模块这几个模块来介绍。 ## 1.控件管理区域 > 控制配置区域分为两个模块，控件属性配置模块是用来管理画布中控件的属性，其中包括高度、宽度、大小、字体大小、字体类型等等这些基础属性，像其他控件，文本有对齐方式、图片有图片上传模块、填充模式，时钟有时间格式选择等等，其次是数据管理模块，主要用来配置控件诸如图表的数据，一般支持json静态数据、csv表格数据导入、api接口动态配置等 ### 1.1 控件属性配置模块 > 基于内部源码不开源的缘故，我们通过开源案例来进行分析，👇 下图为开源的表单生成器解决方案 [form-generator 🔗](https://github.com/JakHuang/form-generator) ，红色边框区域本质上就是配置区域，只不过是表单属性配置 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fc427eb2c8644285a265d10785afd6f6~tplv-k3u1fbpfcp-watermark.image) 而数据大屏的控件属性配置模块同理，本质上都是组件属性可视化修改，是实现将json配置展现出来，实现自定义的表单设置，我们知道每个控件都有自己的一个默认配置，然后再进行自定义修改。下面我们通过解析这个开源项目，来介绍如何搭建控件属性配置模块 ![carbon.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3119691c82d34f18a52f9af294d922e2~tplv-k3u1fbpfcp-watermark.image) 上图是属性配置中按钮类型的属性配置，通过类型属性区分来展示不同的配置模块。更多属性配置参考可点击👉 [链接🔗](https://github.com/JakHuang/form-generator/blob/dev/src/views/index/RightPanel.vue) > 👨‍🎓：啊乐同学：那属性配置区域和画布区域的控件、以及图层区域是如何联动的？主要是包含以下几个方面： ### 1.2.1 控件区域带动的图层区域、画布区域的联动 > 当从控件区域拖拽控件到画布，通过拷贝控件一份默认的配置，我们上节提到拖拽库使用的是`vuedraggable`，其中有个`clone`的api，当对控件进行拖拽时，我们可以对控件区域属性进行拷贝（默认属性）. 至于画布区域、配置区域、图层区域的联动，主要是监听控件区域`vuedraggable`的`onEnd`事件来跟其他模块进行联动，比如创建一个新的图层，大致流程实现如下👇 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aedf566a0fbd40f2840c03e8ab703149~tplv-k3u1fbpfcp-watermark.image) ### 1.2.2 画布区域带动的图层区域、属性配置区域的联动 > 点击画布其中的一个控件，right-panel区域展示为该控件的属性配置模块，通过上文提到的`activeDate`来传递，与该开源表单生成器不同，我在上集也提到画布的拖拽使用的是`vue-draggable-resizable`, 基于需要支持大小自由拖拽，通过监听其`activated`事件，来捕获画布中选中控件事件，以此来变更属性配置区域 ![carbon (7).png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5f1b73498af9478baa5720aaa2d8f1b0~tplv-k3u1fbpfcp-watermark.image) 当修改属性配置区域，画布中控件视图发生变更，再或者手动改变画布区域，同步属性配置区域的修改，本质上画布区域跟属性配置区域是双向数据流，无论其中哪个区域数据修改，都会同步到另一个区域 > 👨‍🎓：啊乐同学：你通过activated作为props让画布区域和控件区域做数据流通，我记得props是单向流向，而且如果子组件控件区域修改了activated这个prop, Vue会在浏览器的控制台中发出警告吧？答：是的，vue官网中介绍：prop 使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。但是当父组件的传值是数组或者对象时，子组件中不仅能够直接修改，还不会报错，在子组件中改变这个对象或数组本身将会影响到父组件的状态。原因是：父组件传递给子组件的，实际上只是一个引用地址，当子组件修改这个对象时，是真的修改了在堆空间中保存的数值，当然父组件中的值也会发生变化，但是引用地址没有进行修改 ## 1.2 数据源配置模块 > 通常我们数据管理是用来配置控件诸如图表的数据，一般支持json静态数据、csv表格数据导入、api接口动态配置，而对于一些常见模块，文本、图片等，该tab是不展示。视图参考如下👇。重点聊聊api数据源 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/767dd076b7a2499d8158480942eb8f63~tplv-k3u1fbpfcp-watermark.image) ### 1.2.1 关于api数据源 > 通过定义请求方式、访问的api、请求头header等，维护好不同的数据源之后，通过在控件属性配置区域绑定数据源`dataSourceUrl`，然后绑定过程中发出请求，同步到数据响应结果面板，最终展示到控件在画布区域视图的变更。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b287ccf4f7634006a3fed525d5b3992c~tplv-k3u1fbpfcp-watermark.image) > 👨‍🎓：啊乐同学：那你这样，数据还是静态的，最终数据大屏也是静态的数据展示？答：我们是通过将数据源的dataSourceUrl以及轮训时间间隔等配置绑定到控件属性中，然后当用户从编辑模式切换到全屏预览模式下，再发出请求，大致原理参考如下👇 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c2b59c5e5b7d4a93b6cc15443ab15e9c~tplv-k3u1fbpfcp-watermark.image) 🤔思考：如果请求很多的情况，如何优化？ ## 2.图层管理模块 > 上文我们提及了图层受控件区域的联动，但它本质影响的最多的是画布区域，比如复制图层、删除图层等，会对画布区域进行视图更新，下面是图层区域的缩略展示👇 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4c5c481e160249428ca2aff87ecaa90f~tplv-k3u1fbpfcp-watermark.image) > 👨‍🎓：啊乐同学：图层是怎么去影响画布区域的堆叠顺序？答：图层本质上也是支持上下拖拽移动的，同样也是基于`vuedraggable`, 但是不同的是，当拖动上下层级的时，会影响到`z-index`的改变，也就是设置元素的堆叠顺序（来调整画布中控件的堆叠顺序）实现如下👇 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fc1a7d62be2547dc977e232c30e3e32d~tplv-k3u1fbpfcp-watermark.image) > 👨‍🎓：啊乐同学：图层右击出现的那个操作面板是如何实现的？答：可以通过监听vue的`@contextmenu.prevent`事件，是h5的新特征，不过兼容性比较差

🌲酱往期文章：

请你喝杯🍵 记得三连哦～ 1.阅读完记得给🌲 酱点个赞哦，有👍 有动力 2.关注公众号前端那些趣事，陪你聊聊前端的趣事 3.文章收录在Github frontendThings 感谢Star✨