mcForm介绍

​ mc-form-vue组件文档

介绍

本组件基于Vue3+ts(anyscript)+Element Plus二次封装，为了方便自己开发。

如何引入

在你的页面导入组件模块

import {McForm} from "mc-form-vue";
import 'mc-form-vue/dist/style.css'

在main.js或者main.ts文件内

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//由于配置项有基于Element Plus的icon图标配置，这里全局注册icon图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
app.use(ElementPlus).mount('#app')

配置项

公共配置项

• Type: 表单项类型
  • text-input: 文本框
  • number-input: 数字输入框
  • textarea-input: 文本域输入框
  • radio: 单选框
  • date: 日期选择框
  • date-time: 时间日期选择框
  • date-time-range: 时间日期范围选择框
  • file: 文件上传
  • checkBox: 多选框
• key: 每个表单绑定的key值
• required: 是否必填
• placeholder: 占位文本
• label: 表单项的名字
• col: el-col的span值，设置el-form-item的宽度
• option: 配置

文本框option配置

• next: 后缀cion图标
• pre: 前缀icon图标
• rows: textarea行数，仅type是textarea-input生效

单选多选框option配置

• isButton: 值为boolean，是否为button样式的单选/多选框

• value: 单选/多选框的内容配置，格式为

  [
  	{
  		label:'', // 显示的内容
  		value:'' // 值
  	},{
  		label:'',
  		value:''
  	}
  ]
  

date和date time options配置

时间格式的配置，format支持的值，例如：YYYY-MM-DD/YYYY-MM-DD hh:mm:ss

date-time-range option配置

option:{
        format:'YYYY-MM-DD hh:mm:ss', //时间格式
        start:[8,0,0], // 开始时间的时分秒
        end:[8,0,0] // 结束时间的时分秒
  		}

file option配置

option:{
        limit:3, // 文件个数限制
        showFileList:false, //是否显示上传文件列表
        accept:'', // 接收文件类型，同Element Plus
        type:'button', // 上传框的类型，可选择button或者card
        fileType:'img', // 上传文件的类型，可选值有img,video,other三个属性
        baseUrl:'', // 文件的公共ip地址
        operation:['view','download'] //预览，下载功能 // 仅限图片
      }

如何使用

每个表单项里的内容标签都有一个mc-{key}的类名供你修改样式

<template>
  <mc-form ref="mcFormRef" :form="params.form" :label-width="100" @submitForm="submitForm" @cancelForm="cancelForm" @uploadFile="uploadFile"  />
</template>
<script lang="ts" setup>
import {reactive, ref} from "vue";
  interface Form {
  	type:string,
  	key:string,
  	required:boolean,
  	placeholder:string,
  	label:string
  	col:number,
  	option:any,
	}
    const params = reactive<{
  form:Form[]
}>({
  form:[
    {
      type:'text-input',
      key:'name',
      required:true,
      placeholder:'',
      label:'名字',
      col:12,
      option:{
        next:'',
        pre:''
      }
    },
    {
      type:'text-input',
      key:'work',
      required:false,
      placeholder:'',
      label:'工作',
      col:12,
      option:{
        next:'',
        pre:''
      }
    },
    {
      type:'number-input',
      key:'age',
      required:true,
      label:'年龄',
      placeholder:'',
      col:12,
      option:{
        next:'',
        pre:''
      }
    },
    {
      type:'radio',
      key:'sex',
      required:true,
      label:'性别',
      placeholder:'',
      col:12,
      option:{
        isButton:false,
        value:[
          {
            label:'男',
            value:'1'
          },
          {
            label:'女',
            value:'2'
          },
        ]
      }
    },
    {
      type:'textarea-input',
      key:'info',
      required:true,
      label:'介绍',
      placeholder:'',
      col:12,
      option:{
        next:'',
        pre:'',
        rows:3
      }
    },
    {
      type:'date',
      key:'time',
      required:true,
      label:'生日',
      placeholder:'',
      col:12,
      option:'YYYY-MM-DD '
    },
    {
      type:'date-time',
      key:'createTime',
      required:true,
      label:'创建日期',
      placeholder:'',
      col:12,
      option:'YYYY-MM-DD hh:mm:ss'
    },
    {
      type:'date-time-range',
      key:'youxiao',
      required:true,
      label:'有效日期',
      placeholder:'',
      col:12,
      option:{
        format:'YYYY-MM-DD hh:mm:ss',
        start:[8,0,0],
        end:[8,0,0]
      }
    },
    {
      type:'file',
      key:'file',
      required:false,
      label:'图片',
      placeholder:'',
      col:12,
      option:{
        limit:3,
        showFileList:false,
        accept:'',
        type:'button',
        fileType:'img', // img,video,other
        baseUrl:'',
        operation:['view','download']
      }
    },
    {
      type:'checkBox',
      key:'type',
      required:true,
      label:'标签',
      placeholder:'',
      col:12,
      option:{
        isButton: true,
        value:[
          {
            label:'厨师',
            value:'1'
          },
          {
            label:'警察',
            value:'2'
          },{
            label:'医生',
            value:'3'
          }

        ]
      }
    },
  ]
})
// 组件的ref,上传文件后需要修改文件列表
const mcFormRef = ref<any>()
const submitForm = (data:any)=>{
  // 点击保存按钮后的事件 data是你需要的数据
  console.log('保存了',data)
}
const cancelForm = ()=>{
  // 点击取消按钮后的事件
  console.log('取消了')
}
// 上传文件的方法
const uploadFile = (data:{file:File,key:string})=>{
// form[data.key]是你的文件数组,有name属性和url属性
// uploadfil是你自己上传文件的方法
uploadfile(formdata).then(res=>{
  mcFormRef.value.form[data.key]=mcFormRef.value.form[data.key]?mcFormRef.value.form[data.key]:[]
  mcFormRef.value.form[data.key].push({
    name:data.file.name,
    url:res.data.url
  })
  // 如果加了校验
  if(mcFormRef.value.form[data.key].length>0){
    mcFormRef.value.refArr[data.index].clearValidate()
  }
})
}
</script>