有你在真好 的个人博客
牛X Vue+uniapp 可视化拖拽布局web模板dragUI
阅读:2051 添加日期:3/30/2021 5:53:58 PM

今天给大家分享一个超厉害的Vue Uniapp可视化拖拽编程项目dragUI。

牛X Vue+uniapp 可视化拖拽布局web模板dragUI

drag-ui 基于 vuedraggable.js+vue+uniapp 的可视化拖放布局编程。能自动生成项目,自动生成代码,支持导入第三方组件。

牛X Vue+uniapp 可视化拖拽布局web模板dragUI

效果图

牛X Vue+uniapp 可视化拖拽布局web模板dragUI

dragUI演示视频

一个简单创建 hello world 界面的介绍视频,帮助大家更快了解项目。

播放 暂停
进入全屏 退出全屏
00:00 00:00
重播 刷新试试

技术栈

  • vue ^2.5.17 + uniApp
  • element-ui ^2.12.0 饿了么pc组件库
  • sortablejs 组件拖拽功能
  • file-saver 文件保存
  • ejs ^2.7.1 JavaScript模板引擎
  • jszip ^3.2.2 JS压缩库
  • vue-context-menu 基于vue自定义右键菜单

安装使用

# 克隆项目
git clone https://github.com/wozhishilaonanhai/dragUI.git

# 进入dragUI目录
cd dragUI

# 安装依赖包
npm install

# 用HBuilderX打开项目
运行 > 运行到浏览器 > Chrome

项目目录

牛X Vue+uniapp 可视化拖拽布局web模板dragUI

牛X Vue+uniapp 可视化拖拽布局web模板dragUI

项目目录注释

作者已经将该插件上传到了插件市场,大家可以下载使用。

https://ext.dcloud.net.cn/plugin?id=1035
牛X Vue+uniapp 可视化拖拽布局web模板dragUI

store中 componentsInfo 存贮组件的基本信息。

componentsInfo: { // 组件的基本信息
    // id 0- 999  (约定)会根据id来判断是哪个list
    list: [
        {
            name:'按钮',
            id: 0,
            componentName: 'Ibutton',
            iStyle:{},
            iClass: [],
            propsValue: [
                {   
                    label:'值',
                    key:'text',
                    value:'按钮',
                    toDataOrHtml: 'html',
                    type: 'String'
                },
                {
                    label:'类型',
                    key:'type',
                    value:'default',
                    toDataOrHtml: 'html',
                    type:'select',
                    select: [
                        {label: '红色',value: 'warn'},
                        {label: '蓝色',value: 'primary'},
                        {label: '白色',value: 'default'}
                    ]
                },
            ...
            ]
        },
        ...
    ]
}

项目中用到了 element-ui 组件库及第三方UI库 colorUI

牛X Vue+uniapp 可视化拖拽布局web模板dragUI

创建新项目

牛X Vue+uniapp 可视化拖拽布局web模板dragUI

切换页面模式/组件模式

牛X Vue+uniapp 可视化拖拽布局web模板dragUI

布局预览效果

牛X Vue+uniapp 可视化拖拽布局web模板dragUI

查看uniapp页面代码

最后附上demo及项目地址

# demo地址
https://wozhishilaonanhai.github.io/dragUI/unpackage/dist/build/h5/index.html

# 仓库地址
https://github.com/wozhishilaonanhai/dragUI

ok,这次就分享到这里。如果小伙伴们感兴趣的话可以去看下哈。