元件

參考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、通過普通的元件編寫方法，再將元件套入此方法中，可以實現一套程式碼，兩種引用方式，便於程式碼的書寫以及閱讀；