vue3 vue3-form-element表单生成工具 自定义生成组件步骤

前提： 基于vue3 + element-plus 使用 @lljj/vue3-form-element 表单生成工具自定义组件

自定义组件 需要在全局注册，然后使用

使用步骤：

vue 文件

 

导入：
import VueForm from "@lljj/vue3-form-element";

使用：
　　

   <VueForm ref="vueform" v-model="formData" :schema="schema" :formProps="formProps" @submit="onSubmit"

            @cancel="visible = false">

  </VueForm>

 

 

const schema=ref({

 "type": "object",

    "title": "",

    "required": [

        "A01002",

    ],

    "properties": {

        "A01002": {

            "title": "自定义组件测试",

            "type": "string",

            "ui:widget": "CustomSlider",

            "default": '50',

            "maxLength": 50,

            "minLength": 1,

            "ui:options": {

                "placeholder": "请输入",

                "test": "自定义组件属性",

                "attrs": {},

                "width": "100%"

            },

            "enum": [

                "1",

                "2",

            ],

            "enumNames": [

                "男",

                "女"

            ],

        },

    },

    "ui:order": [

        "A01002",  

    ]

})

 

 

 

全局注册公用组件CustomSlider.vue

 

<!-- components/CustomSlider.vue -->
<template>
  <div class="custom-slider">
    <label>{{ title }}</label>
    <div class="slider-container">
      <input type="range" :min="minLength" :max="maxLength" :value="modelValue"
        @input="$emit('update:modelValue', $event.target.value)" class="slider">
      <span class="value">{{ modelValue }}/{{ test }}</span>
    </div>
  </div>
</template>

<script setup>
// import { defineProps, defineEmits } from 'vue';

// 接收表单库传递的参数
const props = defineProps({
  // 字段值（双向绑定）
  modelValue: {
    type: String,
    default: '',
  },
  // 字段标题（从schema的title获取）
  title: {
    type: String,
    default: '',
  },
  // 自定义属性（可从uiSchema传入）
  minLength: {
    type: Number,
    default: 0,
  },
  maxLength: {
    type: Number,
    default: 100,
  },
  enumOptions: {  // 选项列表
    type: Array,
    default: () => [],
  },
  test: {
    type: String,
    default: '',
  },
});
console.error(props);
// 获取 attrs
const attrs = useAttrs(); // 获attrs取定义的属性
// 触发值更新
const emit = defineEmits(['update:modelValue']);
</script>

<style scoped>
.custom-slider {
  width: 100%;
}

.slider {
  margin: 0 10px;
}

.value {
  display: inline-block;
  /* width: 30px; */
  text-align: center;
}

.slider-container {
  display: flex;
}
</style>

效果图：

 

• UI Schema 中的自定义属性需要以 ui: 前缀开头
• 组件中定义的 props 需要与 uiSchema 中的属性名匹配