1 Star 0 Fork 0

寒云阳 / page-design

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

可视化页面装修

Vue Ant-deisgn Vue.Draggable

基于 vue + ant-design + vue-draggable 实现的可视化页面装修功能,基于业务需求和层出不穷的活动营销页面而诞生。
类似的还有:有赞、百度H5、京东等等, 后续会通过 page-design-ssr 服务来生成静态页面,这样就可以支持SSR需求拉

点我点我,查看演示DEMO

截图1.png

操作指引:

  1. 左侧组件区域拖拽至中间布局区域
  2. 中间区域的组件支持上下拖拽排序,删除组件
  3. 点击中间区域的组件,右侧会打开组件支持的配置项
  4. 右侧楼层管理支持组件的排序、复制、删除、定位等

目录

安装

$ npm install

启动

  1. 命令行执行:npm run dev
  2. 浏览器打开链接:localhost:3001

代码目录

├── README.md
├── package.json
├── src
│   ├── html
│   ├── interface // 接口
│   │   ├── core.js
│   │   ├── index.js
│   │   ├── json-data
│   │   │   ├── design_get_page_info.json
│   │   │   ├── get_component_list.json
│   │   │   ├── get_component_template_list.json
│   │   │   ├── get_goods_list.json
│   │   │   ├── material_folder.json
│   │   │   └── material_folder_details.json
│   │   └── material.js
│   ├── layout
│   ├── main.js
│   ├── resource // 图片
│   ├── router // 路由
│   ├── store
│   ├── system-components // 系统公共组件
│   │   ├── dialog
│   │   ├── dialog-goods-manager
│   │   ├── form-unit
│   │   ├── images-manager
│   │   ├── images-sort
│   │   └── ui-component-load
│   ├── ui-component // 业务组件
│   │   ├── U000001
│   │   ├── U000002
│   │   ├── U000003
│   │   ├── common-config.js
│   │   └── component-unit // 业务组件里面公共的元素
│   └── views // 系统页面
│       ├── home // 列表页
│       └── design // 装修页
├── webpack.common.js
├── webpack.dev.js
└── webpack.prod.js

业务组件配置项自定义

查看文档

目前支持组件列表

标题栏

标题栏演示.gif

广告图

广告图演示.gif

商品列表

商品列表演示.gif

更新日志

v1.0.2 [2020-07-07]

  1. 装修页的布局区域增加放大缩小功能
  2. 增加倒计时组件

v1.0.1 [2020-07-02]

  1. 广告图组件:增加动画效果的选择,增加动画效果时间间隔配置
  2. 楼层管理:增加组件定位功能
  3. 楼层管理:增加组件复制功能

v1.0 [2020-06-15]

  1. 广告图组件: 调整图片加载的方法,优化UI,暂时去除其他配置项
  2. 标题栏组件: 增加 margin, padding, text-align 的配置项
  3. 商品列表组件:调整商品数据的增加方式
  4. 装修页:获取页面数据改为json获取
  5. 增加2个演示页面数据

写在最后

如有其他业务组件想增加的可以留言一下,或者搞个PR

MIT License Copyright (c) 2020 wujianeng Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

暂无描述 展开 收起
Vue 等 3 种语言
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/fxkj/page-design.git
git@gitee.com:fxkj/page-design.git
fxkj
page-design
page-design
master

搜索帮助