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" 支持一下謝謝！本專案可繼續完善,如有任何建議或問題請在這里提出

demo1

引入

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/551121.html

標籤：其他

上一篇：CSS 設定文字間距

下一篇：返回列表

form-create-designer-naiveui

引入

使用

設定多語言

組件props

組件方法

組件`props`