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;
}
};
notice.js
猜你喜欢
转载自my.oschina.net/u/3288561/blog/1559523
今日推荐
周排行