0.2.6 • Published 5 months ago
panel-designer v0.2.6
panel-design
介绍
Vue3.0 版本,基于 element-plus 仪表盘设计器
软件架构
软件架构说明
安装教程
- npm install vue-grid-layout@next 必须应用:vue-grid-layout": "^3.0.0-beta1" main.ts 必须引用 import VueGridLayout from "vue-grid-layout" app.use(VueGridLayout)
使用说明
设计器: 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 }
预览: import { PanelPreview } from "panel-designer" import "panel-designer/dist/designer.style.css" //引入样式
<PanelPreview ref="panelViewRef" :panelData="panelData" />
交流
QQ 群:780382507
效果图
参数
名称 | 说明 | 回调参数 |
---|---|---|
panelData | 设计器数据 json | 当前配置的 json |
插槽
名称 | 说明 |
---|---|
headerBut | 顶部工具栏右侧插槽 |
参与贡献
- Fork 本仓库
- 新建 Feat_xxx 分支
- 提交代码
- 新建 Pull Request
特技
- 使用 Readme_XXX.md 来支持不同的语言,例如 Readme_en.md, Readme_zh.md
- Gitee 官方博客 blog.gitee.com
- 你可以 https://gitee.com/explore 这个地址来了解 Gitee 上的优秀开源项目
- GVP 全称是 Gitee 最有价值开源项目,是综合评定出的优秀开源项目
- Gitee 官方提供的使用手册 https://gitee.com/help
- Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 https://gitee.com/gitee-stars/
0.2.1
7 months ago
0.2.0
7 months ago
0.1.8
7 months ago
0.2.6
5 months ago
0.1.9
7 months ago
0.2.3
6 months ago
0.2.2
7 months ago
0.2.5
6 months ago
0.2.4
6 months ago
0.1.7
1 year ago
0.1.6
1 year ago
0.1.5
1 year ago
0.1.4
2 years ago
0.1.3
2 years ago
0.1.2
2 years ago
0.1.1
2 years ago
0.1.0
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago