base-ui-vue2 v0.1.4

base-ui-vue2

说明

基于Vue2.x 、element-ui的二次封装

安装

npm install base-ui-vue2 --save

应用

//在main.js中引入
import baseForm from 'base-ui-vue2'
Vue.use(baseForm)

用法示例

<template>
    <base-form 
        :formList="formList" 
        :baseForm.sync='form'
        @submit='submit' 
        @cancel='cancel'>
        <template slot="slot">
            <el-input v-model="baseForm.slot" placeholder="我是插槽" />
        </template>
    </base-form>
</template>

<script>
export default {
    data () {
        return {
            formList:[
                {
                    type: 'input', 
                    field: 'input1',
                    label: '输入框',
                    initVal:'123',
                    rules: [{
                        required: true, message: '不能为空', trigger: 'blur'
                    }]
                },
                {
                    type: 'select',
                    field: 'select',
                    label: '下拉框单选',
                    options: [
                        {
                            code: 1,
                            name: '黄金糕'
                        }
                    ],
                    defaultProp: {
                        label: 'name',
                        value: 'code'
                    }
                },
                {
                    type: 'slot',
                    field: 'slot',
                    label: '插槽'
                },
            ],
            form:{
                slot:''
            }
        }
    },
    methods:{
        submit(val){
            console.log('返回的表单值' + val)
            console.log(this.form)
        },
        cancel(){
            console.log('点击取消了')
        }
    }
}
</script>

Props说明

formList属性

tip

formList中每一个表单类型可配置的属性还有很多，与elementUi中的组件的属性配置相同

defaultProps属性

groupBtn属性

表单事件