baseformjsx

BaseForm

Props

Name	Description	Type	Required	Default
fields	表单组件的数组对象	Array	false	[]
size	-	String	false	small
diasbled	-	Boolean	false	false
labelWidth	-	String	false	0px
form	表单元素值	Object	false	{}
operation	自定义按钮组属性及事件	Object	false	{"btns":[{"type":"primary","plain":false,"round":false,"circle":false,"disabled":false,"icon":"","text":"搜索","on":{}},{"type":"","plain":false,"round":false,"circle":false,"disabled":false,"icon":"","text":"重置","on":{}}]}
inline	-	Boolean	false	false

Events

Event Name	Description	Parameters
submit	-	-
reset	-	-

Slots

Name	Description	Default Slot Content
self	有自定义组件需求时;自定义组件插槽内容	-
other	其他插槽	-
default	默认插槽	操作的按钮
operate	操作操作	其他的操作按钮

Methods

Method	Description	Parameters
validate	返回表单的是否通过规则验证	-
resetValid	重置表单的验证规则	-
handleSearch	搜索 搜索按钮的点击事件
handleReset	重置按钮的点击事件	-

例子

import BaseForm from "baseformjsx"

Vue.use(BaseForm)

优化了这个组件；把这个核心组件提出来并与组件库解绑；组合成一个新组件 ;并发布https://www.npmjs.com/package/common_form_item

<template>
  <div>
    <base-form
      :fields="fields"
      :labelWidth="labelWidth"
      :form="form"
      :operation="operation"
    ></base-form>
  </div>
</template>

<script>

export default {
       data(){
           return {
               operation:{
                   class:{
                     'for':true
                   },
                   style:{
                       fontSize:'18px'
                   },
                   btns:[
                         {
                            type: "primary",
                            plain: false,
                            round: false,
                            circle: false,
                            disabled: false,
                            icon: "",
                            text: "搜索",
                            tag :'el-button',
                        },
                        {
                            type: "",
                            plain: false,
                            round: false,
                            circle: false,
                            disabled: false,
                            icon: "",
                            text: "重置",
                            tag :'el-button',
                        }
                    ]
               },
               form:{
                 name:'',
                 sex:'',
                 channel:'',
                 sex:'',
               },
               fields:[
                 {
                    tag:'el-input',  //标签名称
                    options:[], //为下拉选择框\多选框\单选框准备
                    type:'text', //指明文本框是输入框、文本域、单选、多选、下拉选择框,可选择值text|textarea|select|checkbox|radio 和其他 原生 input 的 type 值
                    name:'name',
                    value:'',  //默认值
                    label:'姓名',
                    block:true,//用于判断元素是用块级元素渲染还是行级元素渲染
                    clearable:true,
                    placeholder:'请输入姓名',
                    maxlength:10,
                    'show-word-limit':true,
                    rules:[
                        {required:true,message:'请输入姓名',trigger:['change','blur']}
                    ], //规则验证
                    class:{
                        'my-input':true
                    },
                    style:{
                        width:'300px'
                    },
                    scopedSlots:{
                        heander:(props)=>{
                            return (
                                <span>天</span>
                            )
                        }
                    }, //作用域插槽写法 举例是该组件有一个header的作用域插槽
                    slots:{
                        suffix:()=>{
                            return (
                                <span>天</span>
                            )
                        }
                    }, //插槽写法
                    ...  //兼容element form表单元素的任意属性
                 },
                 {
                    options:[], //为下拉选择框准备
                    tag:'el-select',
                    name:'sex',
                    value:'',  //默认值
                    label:'性别',
                    block:true,//用于判断元素是用块级元素渲染还是行级元素渲染
                    clearable:true,
                    placeholder:'请输入姓名',
                    maxlength:10,
                    'show-word-limit':true,
                    rules:[
                        {required:true,message:'请输入姓名',trigger:['change','blur']}
                    ], //规则验证
                    class:{
                        'my-input':true
                    },
                    style:{
                        width:'300px'
                    },
                    on:{
                        click:this.click,//点击事件
                        change:this.change,//改变事件
                    }
                    ...  //兼容element form表单元素的任意属性
                 },
                 {
                    label:'渠道',
                    tag:'el-checkbox-group',
                    name:'channel',
                    value:'',
                    button:true, //用于判断单选、多选框是否为按钮组
                    placeholder:'请选择渠道',
                    options:[
                        {
                            label:'天猫',
                            value:1
                        },
                        {
                            label:'京东',
                            value:2
                        }
                    ],
                    block:true
                 },
                  {
                    label:'性别',
                    tag:'el-radio',// 由于elementui 的单选按钮组采用component内置标签写法;jxs在vue2.0无法识别；所以只能写成el-radio；后续升级为vue3.0可以解决这个问题;可惜element的3.0版本没有用这个了
                    name:'sex',
                    value:'',
                    button:true, //用于判断单选、多选框是否为按钮组
                    placeholder:'请选择性别',
                    options:[
                        {
                            label:'男',
                            value:1
                        },
                        {
                            label:'女',
                            value:2
                        }
                    ],
                    block:true,
                 }
               ]
           }
       },
</script>