# vform-designer

**Repository Path**: ConBoHo/vform-designer

## Basic Information

- **Project Name**: vform-designer
- **Description**: Vue3.0版本,基于element-plus 表单设计器
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 7
- **Created**: 2023-12-11
- **Last Updated**: 2023-12-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vform-designer

#### 介绍

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

#### 软件架构

软件架构说明

#### 安装教程

pnpm i
<br>
pnpm run dev

#### 使用说明

import { pringSchema, SchemaForm, FormDesign } from "eform-designer"
<br>
import "eform-designer/dist/designer.style.css" //引入样式
<br>
可以在 main 中全局引用
app.use(SchemaForm).use(FormDesign)

### 效果图

<br>
<img  src="./doc/img1.png" height="300" >
<br>
<br>
<br>
<img  src="./doc/img2.png" height="300" >
<br>

### 仪表盘效果图

1.  设计器：
    import { PanelDesign } from "panel-designer"
    <br>
    import "panel-designer/dist/designer.style.css" //引入样式
    <br>
    ```
    <PanelDesign ref="panelRef">
      <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>
    ```
2.  预览：
    import { PanelPreview } from "panel-designer"
    <br>
    import "panel-designer/dist/designer.style.css" //引入样式
    <br>
    `   <PanelPreview ref="panelViewRef" :panelData="panelData" />`
    <br>
    <img  src="./doc/p1.png" height="300" >
    <br>
    <br>
    <br>
    <img  src="./doc/p2.png" height="300" >
    <br>

### 大屏效果图

1.  设计器：
    import { ScreenDesign } from "large-screen-designer"
    <br>
    import "large-screen-designer/dist/designer.style.css" //引入样式
    <br>

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

2.  预览：
    import { ScreenPreview } from "large-screen-designer"
    <br>
    import "large-screen-designer/dist/designer.style.css" //引入样式
    <br>
    ```
      <ScreenPreview ref="screenViewRef" :screenData="screenData" />
    ```
    <br>
    <img  src="./doc/s1.png" height="300" >
    <br>
    <br>
    <br>
    <img  src="./doc/s2.png" height="300" >
    <br>

#### 交流

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](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)