功能操作流程

  1. 从左侧拖入组件到中间容器内。左侧组件不变,只是clone节点到中间容器。
  2. 中间容器不可再拖入左侧。中间容器各个部件可以在容器内上下拖动进行排序。
  3. 支持同类型多组件。从左侧拖入相同组件的时候,会先从中间容器拷贝同类型的部件。重用样式。每个部件id值唯一。
  4. 中间容器 选中某个部件,在选中的部件右上角显示删除按钮。右边显示对应的部件属性。
  5. 修改右边对应的部件属性,中间容器对应的部件可实时显示效果。
  6. 右边部件的属性根据 每个部件的类型不同而决定。
  7. 中间容器下方底部可设置大容器的页面背景颜色。
  8. 最后提交保存全部部件的属性。这样就完成了一个页面模板。 下次页面模板编辑的时候,页面进入直接显示实时效果。
    图片

Echart

数据看板首要问题,就是我们要解决数据分组的问题。你可以存储到浏览器的websql中通过sql语句groupBy来进行分组统计,或者你自己用js对数据进行分组。由于数据量有限,也就几百个吧,这里采取js方式对数据进行内存分组统计。

1
2
3
4
5
6
7
8
9
export const groupBy = (list, fn) => {
const groups = {};
list.forEach(function(o) {
const group = JSON.stringify(fn(o));
groups[group] = groups[group] || [];
groups[group].push(o);
});
return groups;
}

上一篇文章快速搭建前端网络请求有跟大家介绍Vue快速搭建一个H5页面,以及怎样实现H5和Native原生事件交互。基于此基础,我们今天来用WeUI.js实现手机图片的上传。

Package.json配置

1
2
3
4
5
6
7
8
9
"dependencies": {
"jquery": "^3.5.0",
"moment": "^2.24.0",
"vue-datetime": "^1.0.0-beta.11",
"weui.js": "^1.2.1"
},
"devDependencies": {
"weui": "^2.1.3"
}