vue组件函数化

组件

参考elementUI，将组件函数化

/**
 * 1。使用一次后可以把实例存储，修改实例的属性即可
 * 2。再次调用vue也是使用这个实例并造成混乱
 */
import Vue from 'vue';
import { Promise } from 'es6-promise';
import assign from 'object-assign';
import dialog from '@/fin-ui/ui-dialog';
import waring from '@/fin-ui/ui-waring';
import loading from '@/fin-ui/ui-loading';
import toast from '@/fin-ui/ui-toast';

let uiMap = {
    dialog: dialog,
    loading: loading,
    toast: toast,
    waring: waring
};

Object.keys(uiMap).forEach(name => {
    let ui = uiMap[name];
    uiMap[name] = options => {
         //使用vue构造器，创建一个子类
        let componentConstructor = Vue.extend(ui); // 参考elementUi 写法
        //实例化
        let instance = new componentConstructor();
        if (typeof options === 'string') {
            options = {
                content: options
            };
        }
        assign(instance, options);
        instance.$mount();
        document.body.appendChild(instance.$el);
        //外部一引入，则将组件显示在页面上
        instance.showUi();
        if (options) {
            options.onOk && instance.$on('ok', options.onOk);
            options.onShow && instance.$on('show', options.onShow);
            options.onHide && instance.$on('hide', options.onHide);
            // todo: 这里是否需要将dom上的元素删除掉？
            // instance.$on('update:show', val => {
            //     if (val === false) {
            //         document.body.removeChild(instance.$el);
            //     }
            //     console.log(val + 'show---');
            // });
            options.onCancel && instance.$on('cancel', options.onCancel);
        }
        return new Promise((resolve, reject) => {
            instance.$on('ok', event => resolve(instance));
            instance.$on('show', event => resolve(instance));
            instance.$on('hide', event => resolve(instance));
            instance.$on('cancel', event => reject(instance));
            if (name !== 'dialog' && name !== 'waring') {
                return resolve(instance);
            }
        });
    };
});
export default uiMap;

用法

		let loading = ui.loading({
                type: 'new',
                title: '正在完成额度审批',
                content: '培养良好信誉，可提高申请成功率',
                opacity: 0,
                showClose: true,
                //在此处进一步定义每一次组件进行使用的时候的差异化处理
                onHide: () => {
                    console.log(this.showLoading + '99999');
                }
            });
            setTimeout(() => {
                loading.then(vm => {
                    vm.hideUi();
                });
            }, 20000);

整体思想：

1、组件函数化，引用更加方便；

2、在组件内部定义公共的事件发生时的方法，在外部传入，每个组件事件发生时不同的处理方式更加灵活；

3、通过普通的组件编写方法，再将组件套入此方法中，可以实现一套代码，两种引用方式，便于代码的书写以及阅读；