common_form_item

commonFormChild

这是用jsx写的万能表单组件; 注意的是vue3.x以上版本请安装版本3.0.0以上的版本；vue3.x以下版本请安装版本3.0.0以下的版本;两者切记不可混用

Props

Name	Description	Type	Required	Default
data	这是传入表单组件的属性	Object	false	{"name":"","placeholder":"请选择","value":"","options":[],"type":"text"}
form	这是form表单对象值	Object	false	{}

例子

import CommonFormItem from "common_form_item"

vue2.x 如此引入 Vue.use(CommonFormItem)

vue3.x 如此引入 app.use(CommonFormItem)

这样你的项目中可以使用一个CommonFormItem组件；这个组件是一个万能表单组件;不受不同项目组件库不同的影响;

这样你可以使用CommonFormItem组件封装成自己项目的需求

<template>
  <div>
    <common-form-item :data='fields[0]' :form="form"></common-form-item>
  </div>
</template>

<script>
//  type为select\checkbox\radio时表示父子组件；一定要options与childTag有值;否则不会渲染
export default {
       data(){
           return {
               form:{
                 name:'',
                 sex:'',
                 channel:'',
                 sex:'',
               },
               fields:[
                 {
                    tag:'el-input',  //标签名称
                    childTag:'el-option',//针对复合元素才有该属性；指明子元素
                    options:[], //为下拉选择框\多选框\单选框准备等父子组件准备
                    type:'text', //指明文本框是输入框、文本域、单选、多选、下拉选择框,可选择值text|textarea|select|checkbox|radio 和其他 原生 input 的 type 值
                    onChange:()=>{}, //给组件传入的事件写法
                    onClick:()=>{},  //给组件传入的事件写法 ;组件有什么事件；只需在事件前面加上on即可；但要注意驼峰命名
                    /* 
                    name标识传入组件双向绑定的字段;v2只能是字符串;v3为字符串/对象/数组;
                    字符串表示该组件只有一个v-model且无参数
                    数组表示该组件有多个v-model
                    对象时；name = {
                        argument:'modelValue',  //表示v-model:argument的参数
                        modifiers:'trim'||['trim','number'], //表示v-model的修饰符,只支持vue内置的修饰符
                        name:'name',
                    }
                    */
                    name:'name', 
                    label:'姓名',
                    clearable:true,
                    placeholder:'请输入姓名',
                    maxlength:10,
                    'show-word-limit':true,
                    class:{
                        'my-input':true
                    },
                    style:{
                        width:'300px'
                    },
                    scopedSlots:{
                        heander:(props)=>{
                            return (
                                <span>天</span>
                            )
                        }
                    }, //作用域插槽写法 距离是该组件有一个header的作用域插槽;此属性在vue2.x版本有效；在vue3.x中已移入slots属性中
                    slots:{
                        suffix:()=>{
                            return (
                                <span>天</span>
                            )
                        },
                        heander:(props)=>{
                            return (
                                <span>天</span>
                            )
                        }
                    }, //插槽写法包括作用域插槽
                 },
               ]
           }
       },
</script>