byte-sailing-new/src/components/byForm/demo.vue

<template>
  <div>
    <byForm
      :formConfig="formConfig"
      :formOption="formOption"
      v-model="formData"
    >
      <template #slot> 插槽 </template>
    </byForm>
    <button @click="aaa">打印</button>
  </div>
</template>
<script setup>
import byForm from "./index";
const formData = reactive({});
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 50,
  rules: [],
});
const formConfig = computed(() => {
  return [
    {
      type: "input",
      prop: "name",
      label: "",
      required: true,
      itemWidth: 100,
      disabled: true,
      itemType: "textarea",
    },
    {
      type: "select",
      prop: "xiala",
      label: "下拉框",
      multiple: true,
      style: {
        width: "100px",
      },
      isLoad: {
        //链接
        url: "/getRouters",
        //返回数据的路径默认返回data
        resUrl: "",
        //参数
        req: {},
        //返回数据的key
        labelKey: "name",
        //返回数据的value
        labelVal: "path",
      },
    },
    {
      type: "date",
      prop: "date",
      label: "时间",
      itemType: "datetimerange",
    },
    //如果想隐藏label 打两个空格
    {
      type: "radio",
      prop: "radio",
      label: "单选",
    },
    {
      type: "slot",
      slotName: "slot",
      label: "插槽",
    },
  ];
});
const aaa = () => {
  console.log(formData);
};

// const data = reactive({
//     name: null,
//     age: null,
//     time: null,
//     address: null,
//     zip: null,
//     daterange: [],
//     sex: 1,
//     step: null,
// })
// const  fieldList = reactive([
//     { label: '姓名', type: 'input', value: 'name' },
//     { label: '年龄', type: 'input', value: 'age', maxlength: 3 },
//     { label: '日期', type: 'date', value: 'time' },
//     { label: '地址', type: 'input', value: 'address' },
//     { label: '邮编', type: 'input', value: 'zip' },
//     { label: '日期区间', type: 'date', value: 'daterange', dateType: 'daterange', },
//     { label: '计步器', type: 'inputNumber', value: 'step', min: 1, max: 10, },
//     { label: '性别', type: 'select', value: 'sex', list: 'sexList', disabled: true },
// ])
// const rules = reactive({
//     name: [{required: true, message: '请输入姓名', trigger: ['blur', 'change']}],
//     age: [{required: true, message: '请输入年龄', trigger: ['blur', 'change']}],
// })
</script>
<style>
</style>