0.2.6 • Published 5 months ago

panel-designer v0.2.6

Weekly downloads
-
License
ISC
Repository
-
Last release
5 months ago

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

效果图

参数

名称说明回调参数
panelData设计器数据 json当前配置的 json

插槽

名称说明
headerBut顶部工具栏右侧插槽

参与贡献

  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/
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