vue 封装form表单，如时间控件el-date-picker

1. el-date-picker组件封装

<el-date-picker 
    v-model="currentTime" 
    :type="dateType"
    range-separator="-"
    :start-placeholder="startText" 
    :end-placeholder="endText"
    @change="handleChange">
</el-date-picker>

<script>
export default {
    props: {
        dateType: {
            type: String,
            default: 'daterange'
        },
        startText: {
            type: String,
            default: '开始日期'
        },
        endText: {
            type: String,
            default: '结束日期'
        },
        value: {
            required: true
        }
    },
    data() {
        return  {
            currentTime: ''
        }
    },
    watch: {
        value: {
            handler(val) {
                this.currentTime = val
            },
            immediate: true
        }
    },
    methods: {
        handleChange(val) {
            this.$emit('change', val)
        }
    }
}
</script>

1. main.js全局混入

import commonApi from '@/common/commonApi'
Vue.mixin(commonInfo)

2. commonInfo.js文件封装组件

import BcDatePicker from '@/components/common/bc-date-picker.vue'
const commonInfo = {
    components: { BcDatePicker }
}
export default commonInfo

3. 页面全局引用

<bc-date-picker v-model="filter.time_interval" @change="changeTime"></bc-date-picker>