form-create生成自定义组件

<template>
<span>
 <el-image
      style="width: 100px; height: 100px;margin-right:10px;" 
      v-for="(item,index) in url" :key="index"
      :src="item"
></el-image>
</span>


</template>
<script>

export default {
    name: 'myImage',
    props: {
      url:Array
    },
    data(){
      return {

        // url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      }
    },
    mounted(){
        console.log(this.url)
    },
    methods:{
     
    }
}
</script>

  mounted() {
    this.rule = [
    {
    type:'myImage',
    field: "myImage",
    title: "图片",
     props: {
          url:["https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg","https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"]
        }
      }]

<template>
  <div
    v-loading="loadingArr.dialogLoading"
    element-loading-text="保存中"
    element-loading-background="rgba(255,255,255,0.8)"
    element-loading-spinner="el-icon-loading"
  >
    <ElButton @click="append1">追加组件</ElButton>
    <ElButton @click="disabled3">禁用方式3</ElButton>
    <!-- <form-create v-model="fApi" :rule="rule" :option="option" :value.sync="value"></form-create> -->
    <!-- 通过emit监听事件 -->
    <form-create
      v-model="fApi"
      :rule="rule"
      :option="option"
      :value.sync="value"
      @goods_name3-change="change"
    ></form-create>
    <div class="text-center">
      <ElButton aligen="center" @click="close">关闭</ElButton>
      <ElButton type="primary" @click="submit">提交</ElButton>
    </div>
  </div>
</template>

<script>
import myImage from '@/components/myImage.vue'
console.log(myImage.name)
formCreate.component(myImage.name, myImage)
export default {
  name: "barChart",
  props: {
    leftStyle: {
      type: Object,
      default: () => {
        return { background: "red" };
      }
    }
  },
  data() {
    return {
      i: 0,
      loadingArr: { dialogLoading: false },
      // 实例对象
      fApi: {},
      //表单数据
      value: {},
      //表单生成规则
      rule: [],
      // rule: [
      //   {
      //     type: "input",
      //     field: "goods_name",
      //     title: "商品名称",
      //      validate: [{required: true, message:'请输入名称'}]
      //   },
      //   {
      //     type: "datePicker",
      //     field: "create_time",
      //     title: "创建时间"
      //   },
      //   {
      //     type: "select",
      //     field: "cate_id",
      //     title: "产品分类",
      //     value: "",
      //     options: [
      //       { value: "104", label: "生态蔬菜", disabled: false },
      //       { value: "105", label: "新鲜水果", disabled: false }
      //     ]
      //   }
      // ],
      // 组件参数配置
      option: {
        // onSubmit: formData => {
        //   alert(JSON.stringify(formData));

        //   for (let key in this.value) {
        //     if (this.value[key] == undefined) {
        //       this.value[key] = "";
        //     }
        //   }
        //   console.log(this.value);
        // },
        submitBtn: false
        // resetBtn: true
      }
    };
  },

  mounted() {
    this.rule = [
    {
    type:'myImage',
    field: "myImage",
    title: "图片",
     props: {
          url:["https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg","https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"]
        }
      } ,     
      // 通过on监听事件
      {
        type: "input",
        field: "goods_num",
        title: "商品数字",
        col: {
          // span: 12
        },
        props: {
          // disabled:false
        },
        validate: [
          {
            required: true,
            message: "输入数字，不能为空",
            pattern: new RegExp("^\\d+$")
          }
        ],
        on: {
          input: () => {
            console.log(this.fApi.getValue("goods_num"));
          }
        }
      },
      // 通过emit监听事件
      {
        type: "input",
        field: "goods_name3",
        title: "商品名称13",
        col: {
          span: 12
        },
        on: {
          input: () => {
            const goods_numrule = this.fApi.getRule("goods_num");
            if (this.fApi.getValue("goods_name3")) {
              this.fApi.set(goods_numrule.props, "disabled", false);
            } else {
              this.fApi.set(goods_numrule.props, "disabled", true);
            }
          }
        },
        validate: [{ required: false, message: "请输入名称" }],
        emit: ["change"]
      },
      {
        type: "input",
        field: "goods_name11",
        title: "商品名称12",
        value: "jinyong",
        col: {
          span: 12
        },
        props: { disabled: true },
        validate: [{ required: false, message: "请输入名称" }]
      },
      {
        type: "datePicker",
        field: "create_time",
        title: "创建时间",
        col: {
          span: 12
        }
      },
      {
        type: "select",
        field: "cate_id",
        title: "产品分类",
        value: "",
        options: [
          { value: "104", label: "生态蔬菜", disabled: false },
          { value: "105", label: "新鲜水果", disabled: false }
        ]
      },
      {
        type: "datePicker",
        field: "date",
        title: "日期+时间",
        props: {
          type: "datetime"
        }
      }
    ];
    this.$nextTick(() => {
      const goods_numrule = this.fApi.getRule("goods_num");
      console.log(goods_numrule);
      this.fApi.set(goods_numrule.props, "disabled", true);
      this.fApi.set(goods_numrule.col, "span", 6);
      // goods_numrule.props.disabled = true
      // goods_numrule.props.disabled  = true
    });
  },
  methods: {
    disabled3() {
      const goods_numrule = this.fApi.getRule("goods_num");
      console.log(goods_numrule);
      goods_numrule.props.disabled = true;
    },
    append1() {
      this.i++;
      let newCom = this.$formCreate.maker.input(
        "新增" + this.i,
        "new" + this.i
      );
      // this.rule.push(newCom)
      this.fApi.append(newCom);
    },
    change() {
      console.log(this.fApi.getValue("goods_name3"));
    },
    submit() {
      let a = { name: "123", age: 12 };
      console.log(a);
      // console.log(this.value)
      this.fApi.submit((FormData, fApi) => {
        let obj = {};
        for (let key in FormData) {
          if (FormData[key] == undefined) {
            obj[key] = "";
          } else {
            obj[key] = FormData[key];
          }
        }
        console.log(obj);
      });
    },
    close() {
      this.loadingArr.dialogLoading = true;
    }
  }
};
</script>
<style scoped>
/deep/.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
/deep/.el-row .el-col:last-child .el-form-item__content {
  margin-left: 0;
  text-align: center;
}
/deep/.el-select {
  width: 100%;
}
</style>