form-create-designer-naiveui

這個是 Vue3 版本

form-create-designer-naiveui 是基於 @form-create/naive-ui vue3版本實現的表單設計器組件。可以通過拖拽的方式快速創建表單，提高開發者對錶單的開發效率，節省開發者的時間。

form-create-designer 是基於 @form-create/element-ui 開發的表單設計器，本項目更換原項目的UI框架為 Naive UI ，做出的更改如下：

• Element Plus v2.0.1 -> Naive UI v2.34.3
• codemirror v5.60.0 -> v6.0.1
• 自定義ColorPicker組件，便於定製組件顏色
• 更新部分組件為Vue 3版本

文檔 | 線上演示 | form-create 文檔

如果對您有幫助，您可以點右上角 "Star" 支持一下 謝謝！本項目可繼續完善,如有任何建議或問題請在這裡提出

引入

NodeJs:

npm i form-designer-naiveui

請自行導入NaiveUI並掛載

import formCreate from '@form-create/naive-ui'
import FcDesigner  from 'form-designer-naiveui'

app.use(formCreate)
app.use(FcDesigner)

使用

<fc-designer ref="designer"/>

設置多語言

通過 locale 配置項設置語言

<template>
  <fc-designer :locale="locale"></fc-designer>
</template>

<script>
import En from "form-designer-naiveui/locale/en.js";
export default {
  data(){
    return {
        locale: En,
    }
  }
}
</script>

組件props

• menuMenuList 重新配置拖拽的組件

• heightint|string 設計器組件高度, 預設100%

• localeobject 設置多語言

• configConfig 設置多語言

• mask boolean 設置拖拽表單中的組件是否可以操作

組件方法

• 獲取當前生成表單的生成規則

  type getRule = () => Rule[]
  

  示例: this.$refs.designer.getRule()

• 獲取當前表單的全局配置

  type getOption = () => Object
  

• 設置當前生成表單的規則

  type setRule = (rules: Rule[]) => void;
  

• 設置當前表單的全局配置

  type setOption = (option: Object) => void;
  

• 增加一組拖拽組件

  type addMenu = (menu: Menu) => void;
  

• 刪除一組拖拽組件

  type removeMenu = (name: string) => void;
  

• 批量覆蓋插入拖拽組件

  type setMenuItem = (name: string, items: MenuItem[]) => void;
  

• 插入一個拖拽組件到分組

  type appendMenuItem = (name:string, item: MenuItem) => void;
  

• 刪除一個拖拽組件

  type removeMenuItem = (item: string | MenuItem) => void;
  

• 新增一個拖拽組件的生成規則

  type addComponent = (item: DragRule) => void;
  

提示! 內置的三個組件分組name分別為: main,aide,layout

本文來自博客園，作者：sw-code，轉載請註明原文鏈接：https://www.cnblogs.com/sw-code/p/17350280.html