nimble-ui/src/Services/tips/tips.js

基础vue ui库

import { callFn, extend } from 'nimble-lib';
import { PopupBase } from '../popup/PopupBase';
import Service from '../services';

export class Tips extends Service {
    name = 'Tips';
    _toastList = [];
    isPopShow = false

    constructor (Vue, options) {
        super(options);
        this.setDefaultOptions(options);
        this._popup = new PopupBase(Vue, this.defaultOption);
    }

    /**
     * 提示框
     * @param {Objec} options 弹框文本内容
     * @param {Function} cb 初始化完成后的回调方法
     * @returns {*}
     */
    tips (options, cb) {
        let _that = this;
        let _options = _that.getOptions({
            key: 'tips',
            wrapCla: '', // 最外层追加的Class名
            alignCla: 'centerMiddle', // ''|'bottom'|'top'|'fullScreen'|'centerMiddle',
            transitionCls: 'scale', // ''|'bottom'|'top'|'fullScreen'|'centerMiddle',
            maskCloseFlag: -1,
            maskFlag: -1
        }, options);
        _options.wrapCla = (_options.wrapCla || '') + ' nu_tips-popup';
        return _that._popup.popupData(() => {
            return callFn(_options.getComponent, [_options.type || 'toast']);
        }, _options, cb);
    }

    /**
     * toast提示框
     * @param {String} text 提示文案
     * @param {Object} options 可选参数
     */
    toast (text, options) {
        const _that = this;
        let _time;
        if (typeof options === 'number') {
            _time = options;
            options = {};
        } else {
            _time = options && options.time;
        }
        options = _that.getOptions(options);
        if (!options || !options.isList) {
            _that._toastList = [];
        }

        _that._toastList.push({
            text: text,
            time: _time
        });
        if (!_that.isPopShow) {
            _that.isPopShow = true;
            _that.tips(extend(false, {
                key: 'toast',
                wrapCla: 'nu_toast-popup',
                maskFlag: -1
            }, options, {
                type: 'toast'
            }), () => {
                _updateComData();
            }).then(() => {
                _that.isPopShow = false;
            });
        } else {
            _updateComData();
        }

        /**
         * 更新组件data值
         */
        function _updateComData () {
            let _res = _that._popup.updateProps('toast', {
                isList: (options && options.isList) || false,
                list: _that._toastList
            });
            if (_res) {
                _that._toastList = [];
            }
        }
    }
}

/**
 *
 * 实例化工厂方法
 * @export
 * @param {Vue} Vue vue
 * @param {any} options 配置选项
 * @returns {Photo}
 */
export default function tipsFactory(Vue, options) {
    return new Tips(Vue, options);
}