notice.js

Vue.component("cc-notice", {
    props: {
        noticeType: {
            type: String,
            default: "Message"
        },
        type: {
            type: String,
            default: "info"
        },
        width: {
            default: "400px"
        },
        content: {
            type: String,
            default: "Notice"
        },
        closeable: {
            type: Boolean,
            default: false
        },
        hasDetail: {
            type: Boolean,
            default: false
        },
        duration: {
            default: 1500
        }
    },
    template: '\
        <div>\
            <transition :name="computedStyle.transitionName">\
                <div v-if="visible" :class="computedStyle.containerClass" :style="computedStyle.containerStyle">\
                    <div class="cc-notice-header">\
                        <i :class="computedType.icon" aria-hidden="true" :style="computedStyle.iconStyle"></i>\
                        <strong class="cc-notice-title">{{content}}</strong>\
                        <span v-if="closeable" class="cc-notice-close" @click="close">×</span>\
                    </div>\
                    <div v-if="hasDetail" class="cc-notice-body">\
                        <slot></slot>\
                    </div>\
                </div>\
            </transition>\
        </div>\
    ',
    mounted: function () {
        var self = this;
        if (!this.visible) {
            setTimeout(function () {
                self.visible = true;
            }, 0);
        }
        if (this.duration != 0) {
            this.closeTimer = setTimeout(function () {
                self.close();
            }, this.duration);
        }
    },
    beforeDestroy: function () {
        this.clearCloseTimer();
    },
    data: function () {
        return {
            visible: false
        }
    },
    computed: {
        computedType: function () {
            var color, icon, bgcolor;
            switch (this.type) {
                case "info":
                    color = "#00ccff"
                    bgcolor = "#dcf8ff"
                    icon = "fa fa-info-circle"
                    break
                case "success":
                    color = "#00cc99"
                    bgcolor = "#dcfdf5"
                    icon = "fa fa-check-circle"
                    break
                case "warn":
                    color = "#eeaa00"
                    bgcolor = "#fff4da"
                    icon = "fa fa-exclamation-circle"
                    break
                case "error":
                    color = "#ee6666"
                    bgcolor = "#ffe0e0"
                    icon = "fa fa-times-circle"
                    break
            }
            return {
                color: color,
                bgcolor: bgcolor,
                icon: icon
            }
        },
        computedStyle: function () {
            var obj = {
                containerStyle: {
                    width: !!Number(this.width) ? this.width + "px" : this.width
                },
                iconStyle: {
                    color: this.computedType.color
                }
            };
            if (this.noticeType == "Notice") {
                obj.transitionName = "fade-right";
                obj.containerClass = "cc-notice-container";
                obj.containerStyle["border-left-color"] = this.computedType.color;
            } else if (this.noticeType == "Message") {
                obj.isNotice = false;
                obj.transitionName = "fade-down";
                obj.containerClass = "cc-message-container";
                obj.containerStyle["background-color"] = this.computedType.bgcolor;
            }
            return obj
        }
    },
    methods: {
        close: function () {
            this.visible = false;
            this.clearCloseTimer();
        },
        clearCloseTimer: function () {
            if (this.closeTimer) {
                clearTimeout(this.closeTimer);
                this.closeTimer = null;
            }
        }
    }
});

var ccNotice = function (props) {
    var _props = props || {};
    var item = {
        name: "Notice+" + Date.now(),
        noticeType: "Notice",
        type: _props.type,
        width: _props.width,
        title: _props.content,
        closeable: _props.closeable,
        hasDetail: _props.hasDetail,
        content: _props.content,
        duration: _props.duration
    };
    if (ccNotice.Notice) {
        ccNotice.Notice.push(item);
    } else {
        var instance = new Vue({
            data: {
                notices: [item]
            },
            template: '\
                <div class="cc-notice-collection">\
                    <cc-notice v-for="item in notices" :key="item.name" :notice-type="item.noticeType" :type="item.type" :width="item.width" :content="item.title" :closeable="item.closeable" :has-detail="item.hasDetail" :duration="item.duration">\
                        {{item.content}}\
                    </cc-notice>\
                </div>\
            '
        });
        document.body.appendChild(instance.$mount().$el);
        instance.$children[0].visible = true;
        ccNotice.Notice = instance.notices;
    }
};

var ccMessage = function (props) {
    var _props = props || {};
    var item = {
        name: "Message+" + Date.now(),
        noticeType: "Message",
        type: _props.type,
        width: _props.width,
        title: _props.content,
        closeable: _props.closeable,
        duration: 1500
    };
    if (ccNotice.Message) {
        ccNotice.Message.push(item);
    } else {
        var instance = new Vue({
            data: {
                messages: [item]
            },
            template: '\
                <div class="cc-message-collection">\
                    <cc-notice v-for="item in messages" :key="item.name" :notice-type="item.noticeType" :type="item.type" :width="item.width" :closeable="item.closeable" :duration="item.duration"></cc-notice>\
                </div>\
            '
        });
        document.body.appendChild(instance.$mount().$el);
        instance.$children[0].visible = true;
        ccNotice.Message = instance.messages;
    }
};