my-vue-from v0.0.4

安装

npm i my-vue-from

使用

//main.js里
import  MyVueFrom  from 'my-vue-from'

Vue.use(MyVueFrom)

参数

options {
    type     //表单类型
    value    //表单默认值
    prop     //表单绑定值
    label    //展示label
    rules    //表单校验规则
    children //表单子组件  例如checkbox option等
    attrs    //放置其余属性 
}

插槽

支持upload上传 插槽和element-plus官方一致
action插槽是支持提交按钮作用域插槽 有参数 form：表单实例和model：表单数据

示例

<script setup lang="ts">
import { ref } from 'vue';

const fileList = ref<any[]>([
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },

])
let options = <any>[
  {
    type: 'input',
    label: '姓名',
    value: '张三',
    prop: 'name',
    rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
  },
  {
    type: 'date-picker',
    label: '日期',
    prop: 'date',
    rules: [{ required: true, message: '请输入姓名', trigger: 'change' }],
    attrs: {
      type: 'month',
      style:{
        width:'100%'
      }
    }
  },
  {
    type: 'checkbox-group',
    value: [],
    prop: 'like',
    label: '爱好',
    rules: [
      {
        required: true,
        message: '爱好不能为空',
        trigger: ['blur','change']
      }
    ],
    children: [
      {
        type: 'checkbox',
        label: '足球',
        value: '1'
      },
      {
        type: 'checkbox',
        label: '篮球',
        value: '2'
      },
      {
        type: 'checkbox',
        label: '排球',
        value: '3'
      }
    ]
  },
  {
    type: 'radio-group',
    value: '',
    prop: 'gender',
    label: '性别',
    rules: [
      {
        required: true,
        message: '性别不能为空',
        trigger: 'change'
      }
    ],
    children: [
      {
        type: 'radio',
        label: '男',
        value: 'male'
      },
      {
        type: 'radio',
        label: '女',
        value: 'female'
      },
      {
        type: 'radio',
        label: '保密',
        value: 'not'
      }
    ]
  },
  {
    type: 'upload',
    label: '123',
    prop: '',
    uploadAttr: {
      action: "https://127.0.0.1/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15",
      class: "upload-demo",
      'list-type':"picture-card",
      'file-list':fileList
    }
  },
]

const forms = ref<any>(null)

let submitForm = (scope: any) => {
  let validate = forms.value.validate()
  validate((valid: any) => {
    if (valid) {
      console.log(scope.model)
    } else {
      console.log('error')
    }
  })
}
// 重置表单
let resetForm = () => {
  forms.value.resetFields()
}

const onSuccess =(val:any)=>{
  console.log(val)
}
const onChange =(val:any)=>{
  console.log(val)
}
</script>

<template>
  <MyVueFrom ref="forms" :options="options" label-width="auto" @on-success="onSuccess" @on-change="onChange">
    <template #trigger>
      <el-icon><Plus /></el-icon>
    </template>
    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500kb
      </div>
    </template>
    <template #action="scope">
      <el-button type="primary" @click="submitForm(scope)">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </template>
  </MyVueFrom>
</template>