![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
BI可视化编辑器
空投在我怀里
这个作者很懒,什么都没留下…
展开
-
5.BI可视化编辑器之“控制面板项“实现
一、布局1.新增组件style-sider.vue2.组件的放置位置,样式第一章有 二、思路1.首先要配置好、组件名称、组件的类型、和组件的样式3.首先要传给子组件的东西,有2个,’获取当前点击的图层‘和’获取当前点击的图层的样式配置‘这边的图层的样式配置数据在第一章有,这边提供一部分config.jsdefault.js style-form-config.js4.因为传的是需要单向数据绑定的,所以这边要使用计算属性去绑5.然后通过遍历"图层的样式配置数据"去原创 2022-06-13 00:00:00 · 396 阅读 · 0 评论 -
4.BI可视化编辑器之右击菜单的“上移、下移、删除“实现
一、思路1.先找到当前选中的项,+1上移动,然后去找数组中上一个,让上一个,往下移,当前的去+12.下移同理3.删除,过滤掉当前选中的项就可以了二、实现代码三、全部代码四、效果展示原创 2022-06-12 21:37:14 · 711 阅读 · 0 评论 -
3.BI可视化编辑器之右击菜单的“置顶、置底“实现
一、思路1.每次push到list数组的时候,新增一个z用来管理图层的叠放,z应该有个默认值0,如果有z值去多个z值中比较获取最大的,这样拖拽的时候,会是最高层级的的2.样式的话z-index因为我们用的依赖,所以直接赋值就可以了二、置顶和置底1.首先右击的时候获取当前图层的焦点传一个item过来,然后设置一个focused状态,遍历list中的id,跟当前点击的id是否一样,一样就true,否则为flase2.先找到数组中被选中的项,通过list中多个z值比较,最大最小,从而实现置底和置顶三、全部代原创 2022-06-12 21:26:37 · 2005 阅读 · 0 评论 -
2.BI可视化编辑器之“右击菜单“实现
一、引入依赖二、使用三、打开于关闭事件1. 写入的ref要有2. this.$refs.contextMenu.close()//关闭右键菜单this.$refs.contextMenu.open(e);//打开右键菜单3.我们封装打开菜单的方法塞给画布中显示的图层,这样右击就可以出现菜单四、代码......原创 2022-06-12 20:48:25 · 301 阅读 · 0 评论 -
1.BI可视化编辑器之“拖动、移动 、放置、图层放大缩小“实现
一、拖拉拽widget-list.vue 1.拖的实现: draggable="true" H5给了一个属性可以拖拽,要配合2.放置的实现@dragover.prevent @drop="onDrop"App.vue 3.放置位置差计算图图解 4.静态资源管理4-1.constants下的config.js-组件列表的配置项 4-2.constants下的default.js-组件列表的配置项的默认样式4-3.constants下的style-form-config.js-组原创 2022-06-12 17:59:14 · 1317 阅读 · 0 评论