Vue3+formcreate表单设计器自定义组件实现

基于element-ui，官网form-create.com/v3/guide/

1.安装插件

npm i @form-create/element-ui@next
npm i @form-create/utils // ^3.1.15npm i @form-create/designer // ^3.0.2
npm i @form-create/component-wangeditor // ^3.1npm i vuedraggable // 4.1.0

2.引入项目

main.ts
// 引入element-plus

import 'element-plus/dist/index.css'import ElementUI from 'element-plus/es/index'

// 挂载app.use(ElementUI)

3.页面中使用

<script lang="ts" setup>import { onMounted } from 'vue'// 引入设计器import FcDesigner from '@/from-create-js/index.js'const designer = ref()onMounted(() => { })const options = []</script><template>  <div class="form">    <fc-designer ref="designer" :optons="options" />  </div></template><style lang="scss" scoped>.form {  width: 100%;  height: 800px;  margin: 0;}</style>

4.编写自定义组件

1.先编写一个组件

<template>  <div>    <div style="height: 400px">      <el-input v-model.trim="name" placeholder="请输入" clearable></el-input>    </div>  </div></template><script lang="ts">// 测试自定义组件export default defineComponent({  name: 'SignBoard',  props: {    modelValue: {      type: String,      default: ''    }  },  setup(props, { emit }) {    const name = ref(props.modelValue)    const handleSave = () => {      emit('update:modelValue', name.value)    }    return {      name,      handleSave    }  }})</script>

2.在rule文件夹下新增一个js文件，编写组件规则

import SignBoard from '../../components/lookAndSee.vue'import uniqueId from '@form-create/utils/lib/unique'import { makeRequiredRule } from '../../utils'const label = '自定义组件'const name = 'SignBoard'export default {  icon: 'icon-input',  label,  name,  rule() {    return {      type: name,      field: uniqueId(),      title: label,      info: '',      props: {}    }  },  props() {    return [      makeRequiredRule(),      {        type: 'select',        field: 'type',        title: '类型',        options: [          { label: 'text', value: 'text' },          {            label: 'textarea',            value: 'textarea'          },          { label: 'number', value: 'number' },          { label: 'password', value: 'password' }        ]      },      { type: 'switch', field: 'autofocus', title: '自动获取焦点' }    ]  }}

3.在rule文件夹下index.js下面注册组件名称

import SignBoard from './rankForm'
const ruleList = {
...
[SignBoard.name]: SignBoard

}

4.在menu.js下引入组件，放在合适的位置

PS：此时就可以在表单设计器的左侧看到你新增的组件了！

import rankForm from './rule/rankForm'
export default function createMenu() {  return [    {      name: 'aide',      title: '高级组件',      list: [rankForm]    }
  ]
}

5.在from-create-js（最外层index.js下面注册它）

....
import SignBoard from './components/lookAndSee.vue'

....
designerForm.component('SignBoard', SignBoard)formCreate.component('SignBoard', SignBoard)

此时你的自定义组件就可以跟内置组件一样被拖拽，预览了！是不是超简单~~

ps:本人因为没有在rule文件夹下index.js下注册组件名称,导致报错，卡了很久

 Cannot read properties of undefined (reading 'rule')