app-notice.ts 4.8 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185
import Vue from 'vue';
import Message from './render/message.vue';
import Notification from './render/notification.vue';
const PopupManager = require('element-ui/src/utils/popup').PopupManager;
const isVNode = require('element-ui/src/utils/vdom').isVNode;
let MessageConstructor = Vue.extend(Message);
let NotificationConstructor = Vue.extend(Notification);
import { NoticeOptions } from './interface/notice-options';

/**
 * 提示信息
 *
 * @export
 * @class AppNotice
 */
export class AppNotice {
    /**
     * 唯一实例
     *
     * @private
     * @static
     * @memberof AppNotice
     */
    private static readonly instance = new AppNotice();

    /**
     * 获取唯一实例
     *
     * @static
     * @return {*}  {AppNotice}
     * @memberof AppNotice
     */
    public static getInstance(): AppNotice {
        return AppNotice.instance;
    }

    /**
     * 当前存在的实例集合
     *
     * @private
     * @type {*}
     * @memberof AppNotice
     */
    private instances: any = [];

    /**
     * 计数标识
     *
     * @private
     * @memberof AppNotice
     */
    private seed = 1;

    /**
     * 打开提示信息
     *
     * @param {*} options
     * @return {*}
     * @memberof AppNotice
     */
    public open(options: NoticeOptions) {
        if (!options) {
            return;
        }
        this.handleDefault(options);
        const isMessage = options.position == 'top';
        let id = 'notice_' + this.seed++;

        let userOnClose = options.onClose;
        options.onClose = () => {
            this.close(id, userOnClose);
        };

        let instance: any;
        if (isMessage) {
            instance = new MessageConstructor({
                data: options,
            });
        } else {
            instance = new NotificationConstructor({
                data: options,
            });
        }
        instance.id = id;

        // message为节点时的处理
        if (isVNode(instance.message)) {
            instance.$slots.default = [instance.message];
            instance.message = null;
        }
        instance.$mount();
        document.body.appendChild(instance.$el);

        // 计算偏移量
        let verticalOffset = options.offset || 16;
        this.instances
            .filter((item: any) => item.position === options.position)
            .forEach((item: any) => {
                verticalOffset += item.$el.offsetHeight + 16;
            });
        instance.verticalOffset = verticalOffset;
        instance.visible = true;
        instance.$el.style.zIndex = PopupManager.nextZIndex();
        this.instances.push(instance);
        return instance;
    }

    /**
     * 处理options的默认值
     *
     * @private
     * @param {*} options
     * @memberof AppNotice
     */
    private handleDefault(options: any) {
        if (!options.position) {
            options.position = 'top';
        } else {
            // 标题没有时显示默认标题
            if (!options.title) {
                switch (options.type) {
                    case 'error':
                        options.title = '错误';
                        break;
                    case 'success':
                        options.title = '成功';
                        break;
                    case 'warning':
                        options.title = '警告';
                        break;
                    default:
                        options.title = '消息';
                }
            }
        }
    }

    /**
     * 单个实例的公共关闭方法
     *
     * @param {*} id
     * @param {*} userOnClose 用户自定义回调
     * @memberof AppNotice
     */
    public close(id: any, userOnClose: any) {
        let len = this.instances.length;
        let index = -1;
        const instance = this.instances.find((instance: any, i: number) => {
            if (instance.id === id) {
                index = i;
                return true;
            }
            return false;
        });
        if (!instance) return;

        // 调用用户自定义关闭回调
        if (typeof userOnClose === 'function') {
            userOnClose(instance);
        }

        this.instances.splice(index, 1);

        if (len <= 1) return;
        const position = instance.position;
        const removedHeight = instance.$el.offsetHeight;
        for (let i = index; i < len - 1; i++) {
            if (this.instances[i].position === position) {
                this.instances[i].$el.style[instance.verticalProperty] =
                    parseInt(this.instances[i].$el.style[instance.verticalProperty], 10) - removedHeight - 16 + 'px';
            }
        }
    }

    /**
     * 关闭所有实例
     *
     * @memberof AppNotice
     */
    public closeAll() {
        for (let i = this.instances.length - 1; i >= 0; i--) {
            this.instances[i].close();
        }
    }
}