panel-designer

panel-design

介绍

Vue3.0 版本,基于 element-plus 仪表盘设计器

软件架构

软件架构说明

安装教程

1. npm install vue-grid-layout@next
   必须应用：vue-grid-layout": "^3.0.0-beta1"
   main.ts 必须引用
   import VueGridLayout from "vue-grid-layout"
   app.use(VueGridLayout)

使用说明

1. 设计器： import { PanelDesign } from "panel-designer"
   import "panel-designer/dist/designer.style.css" //引入样式
   

   <PanelDesign ref="panelRef" :panelData="panelData">
     <template #headerBut>
       <el-button size="small" @click="preview" style="margin-left: 20px; background: #49586e; color: #fff">
         预览
       </el-button>
       <el-button size="small" type="success" @click="submitDesign" style="margin-left: 20px">保存</el-button>
     </template>
   </PanelDesign>
   // 保存
   async function submitDesign() {
     // 调用子组件方法
     const designData = await panelRef.value.submitDesign()
     // 这个可以获取到PanelDesign对应的数据JSON
   }
   

2. 预览： import { PanelPreview } from "panel-designer"
   import "panel-designer/dist/designer.style.css" //引入样式
   

   <PanelPreview ref="panelViewRef" :panelData="panelData" />
   

交流

QQ 群：780382507

效果图

参数

插槽

参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

特技

1. 使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md
2. Gitee 官方博客 blog.gitee.com
3. 你可以 https://gitee.com/explore 这个地址来了解 Gitee 上的优秀开源项目
4. GVP 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5. Gitee 官方提供的使用手册 https://gitee.com/help
6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 https://gitee.com/gitee-stars/