Element UI日期选择器源码改造

最近在开发一款规则编辑器的时候，需要日期选择功能，很多时候不想花太多时间去开发，而是就着手复用Element UI日期选择组件进行改造

import Vue from 'vue'

import { DatePicker } from 'element-ui'

export default class DatePickers {
    constructor(config) {

        this.key = config.key

        this.resolve = () => {}

        this.init(config)
    }
    init(config) {

        const PickerInstance = Vue.extend(DatePicker)
        const propsData = {
             valueFormat: 'yyyy-MM-dd HH:mm:ss',
             ...config,
        }
        this.$datePicker = new PickerInstance({ propsData }).$mount()
        
        this.$datePicker.$on('input', label => this.resolve({ label }))
    }
    
    show(el, callback) {
    
        this.$datePicker.referenceElm = el
        this.$datePicker.showPicker()

        return new Promise((resolve, reject) => this.resolve = resolve)
    }
    getMenusVisible() {
        return this.$datePicker.visible
    }
    hide() {
        this.$datePicker.visible = false
    }
}

最终效果