<template>
  <div>
    <el-form
      :label-width="labelWidth"
      :label-position="labelPosition"
      :rules="rules"
      :ref="ref"  
    >
      <el-form-item
        v-for="item in formList"
        :key="item.id"
        :label="item.lable"
        :prop="item.prop"
      >
        <!-- 插入元素方法2：插槽 -->
        <slot :name="item.beforeSlot"></slot>
        <component
          :is="item.name"
          :options="item.options"
          :model="model"
        ></component>
        <slot :name="item.afterSlot"></slot>
      </el-form-item>
    </el-form>
    <Button></Button>
  </div>
</template>
<script>
import InputText from "./forms/Input.vue";
import Button from "./forms/button.vue";
import Slider from "./forms/slider.vue";
import radio from "./forms/radio.vue";
import inputNumber from "./forms/inputNumber.vue";
export default {
  name:"ingForm",
  components: {
    InputText,
    Button,
    Slider,
    radio,
    inputNumber
  },
  props:{
    config:Object,
    model:Object
  },
  created(){
    const { labelWidth, labelPosition, rules, ref,formList } = this.config
    this.labelWidth = labelWidth,
    this.labelPosition = labelPosition
    this.formList = formList
    // this.model = model
    this.rules = rules
    this.ref = ref
    // const { formList } = this.model
    
  }
};
</script>
<script setup>
import { reactive, ref } from "vue";
</script>
<style lang="scss" scoped>
:deep(.el-form--default.el-form--label-top .el-form-item .el-form-item__label) {
  font-size: 12px;
}
:deep(.el-button--primary) {
  width: 100%;
}
</style>
