vant-generate-form

npm i vant-generate-form

• main.ts文件中

import VantGenrateForm 'vant-generate-form'

vue.use(VantGenrateForm)

• 使用方法

  .vue文件中直接使用

  <template>
    <div>
      <GenerateForm
        ref="generateFormRef"
        v-model="formData"
        :form-coumns="formColumns"
        :colon="true"
      ></GenerateForm>
    </div>
  </template>
  <script setup lang="ts">
  import { ref } from 'vue'
  import type { Ref } from 'vue'
  const formData: Ref<any> = ref({})
  const formColumns: Ref<any[]> = ref([
    {
      name: 'contractName',
      component: 'VanField',
      props: {
        label: '合同名称',
        placeholder: '请输入合同名称',
        required: true,
        border: true,
        'label-align': 'top',
        rules: [{ required: true, message: '合同名称不能为空' }],
      },
    },
    {
      name: 'fileUrls',
      selectValue: 'contractUrls',
      component: 'VanField',
      props: {
        label: '合同文件',
        placeholder: '请上传合同',
        required: true,
        border: true,
        'label-align': 'top',
        rules: [{ required: true, message: '请上传合同' }],
        accept: '.pdf',
        'max-count': 1,
      },
      slot: 'upload-slot-input',
    },
  ])
  </script>