vue 可視化表單設計器 vxe-form-design 創建自定義控件的詳細用法，vxe-design 是 vxe 下的一個開源的可視化設計器，在使用表單設計器時，通常需要將業務的的每一個控件進行封裝，以適應業務的需求，接下來介紹一下如果來定義一個自定義的控件。

https://design.vxeui.com

定義控件分組

支持任意分組和自定義左側控件分組名稱

<template>
  <div>
    <vxe-form-design :widgets="formDesignWidgets" :height="800"></vxe-form-design>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const formDesignWidgets = ref([
  {
    customGroup: '輸入控件',
    children: [
      'VxeInput'
    ]
  },
  {
    customGroup: '下拉控件',
    children: [
      'VxeSelect'
    ]
  },
  {
    customGroup: '開關控件',
    children: [
      'VxeSwitch'
    ]
  },
  {
    customGroup: '其他控件',
    children: [
      'VxeRadioGroup'
    ]
  }
])
</script>

定義控件

創建了一個自定義的輸入框控件，説明，一個控件包含幾個步驟：定義控件數據，定義控件表單項模板，定義控件右側參數配置模板
具體自行命名，該控件示例目錄：

步驟1，定義控件數據

目錄：src/form-design/inputWidget/demoFormDesignInputWidget.js
這裏是定義該控件的字段參數

export const getFormDesignWidgetInputConfig = () => {
  return {
    // 控件名稱
    title: '單行輸入',
    // 控件圖標
    icon: 'vxe-icon-input',
    // 控件參數，用於在右側配置
    options: {
      placeholder: '請輸入',
      maxLength: '',
      showWordCount: false,
      clearable: true,
      align: ''
    }
  }
}

步驟2，定義控件表單項模板

目錄：src/form-design/inputWidget/DemoFormDesignInputWidgetView.vue
這裏是定義該控件的渲染時的表單模板

<template>
  <vxe-form-item :field="currWidget.field" :title="currWidget.title">
    <vxe-input
      v-model="widgetModel"
      :placeholder="currWidget.options.placeholder"
      :maxLength="currWidget.options.maxLength"
      :show-word-count="currWidget.options.showWordCount"
      :align="currWidget.options.align">
    </vxe-input>
  </vxe-form-item>
</template>

<script setup>
import { VxeUI } from 'vxe-pc-ui'

const { useWidgetView } = VxeUI.formDesignHandle

const props = defineProps({
  renderOpts: {
    type: Object,
    default: () => ({})
  },
  renderParams: {
    type: Object,
    default: () => ({})
  }
})

const { currWidget, widgetModel } = useWidgetView(props)
</script>

步驟3，定義控件右側參數配置模板

目錄：src/form-design/inputWidget/DemoFormDesignInputWidgetProps.vue
這裏是定義控件拖拽到視圖後，右側顯示的字段配置模板

<template>
  <vxe-form
    vertical
    title-bold
    title-overflow
    span="24"
    :data="currWidget.options">
    <vxe-form-item title="控件字段名" :title-prefix="{icon: 'vxe-icon-question-circle-fill', content: '唯一字段名，默認自動生成'}">
      <vxe-input v-model="currWidget.field" placeholder="唯一，默認自動生成"></vxe-input>
    </vxe-form-item>
    <vxe-form-item title="控件名稱">
      <vxe-input v-model="currWidget.title"></vxe-input>
    </vxe-form-item>
    <vxe-form-item title="是否必填">
      <vxe-switch v-model="currWidget.required"></vxe-switch>
    </vxe-form-item>
    <vxe-form-item title="空值佔位提示">
      <vxe-input v-model="currWidget.options.placeholder"></vxe-input>
    </vxe-form-item>
    <vxe-form-item title="顯示清除按鈕">
      <vxe-switch v-model="currWidget.options.clearable"></vxe-switch>
    </vxe-form-item>
    <vxe-form-item title="限制字符長度">
      <vxe-number-input v-model="currWidget.options.maxLength" type="integer" min="0" max="3000"></vxe-number-input>
    </vxe-form-item>
    <vxe-form-item title="是否顯示字數統計">
      <vxe-switch v-model="currWidget.options.showWordCount"></vxe-switch>
    </vxe-form-item>
    <vxe-form-item title="對齊方式">
      <vxe-radio-group v-model="currWidget.options.align">
        <vxe-radio label="" content="居左"></vxe-radio>
        <vxe-radio label="center" content="居中"></vxe-radio>
        <vxe-radio label="right" content="居右"></vxe-radio>
      </vxe-radio-group>
    </vxe-form-item>
  </vxe-form>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  renderOpts: {
    type: Object,
    default: () => ({})
  },
  renderParams: {
    type: Object,
    default: () => ({})
  }
})

const currWidget = computed(() => {
  const { renderParams } = props
  return renderParams.widget
})
</script>

註冊控件

目錄：src/form-design/inputWidget/index.jsx

import { VxeUI } from 'vxe-pc-ui'
import { getFormDesignWidgetInputConfig } from './demoFormDesignInputWidget'
import DemoFormDesignInputWidgetView from './DemoFormDesignInputWidgetView.vue'
import DemoFormDesignInputWidgetProps from './DemoFormDesignInputWidgetProps.vue'

// 創建表單設計器控件 - 單行輸入
VxeUI.renderer.add('MyFormDesignInputWidget', {
  // 定義左側控件
  createFormDesignWidgetConfig: getFormDesignWidgetInputConfig,
  // 渲染控件的表單視圖
  renderFormDesignWidgetView (renderOpts, renderParams) {
    return <DemoFormDesignInputWidgetView renderOpts={renderOpts} renderParams={renderParams}/>
  },
  // 渲染控件右側的屬性配置視圖
  renderFormDesignWidgetFormView (renderOpts, renderParams) {
    return <DemoFormDesignInputWidgetProps renderOpts={renderOpts} renderParams={renderParams}/>
  }
})

在 main.js 引入

// ...
import './form-design/inputWidget'
// ...

使用效果

以上就創建了一個控件，對於業務開發就可以繼續創建控件了，最終就可以實現一個低代碼或零代碼平台，可視化拖拽就可以生成業務系統

https://gitee.com/x-extends/vxe-design