104 lines
2.9 KiB
Vue
104 lines
2.9 KiB
Vue
<template>
|
|
<div :class="classes" :style="style" :transition="transitionName">
|
|
<div :class="[baseClass + '-content']" v-el:content>{{{ content }}}</div>
|
|
<a :class="[baseClass + '-close']" @click="close" v-if="closable">
|
|
<i class="ivu-icon ivu-icon-ios-close-empty"></i>
|
|
</a>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
prefixCls: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
duration: {
|
|
type: Number,
|
|
default: 1.5
|
|
},
|
|
content: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
style: {
|
|
type: Object,
|
|
default: function() {
|
|
return {
|
|
right: '50%'
|
|
}
|
|
}
|
|
},
|
|
closable: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
className: {
|
|
type: String
|
|
},
|
|
key: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
onClose: {
|
|
type: Function
|
|
},
|
|
transitionName: {
|
|
type: String
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
withDesc: false
|
|
}
|
|
},
|
|
computed: {
|
|
baseClass () {
|
|
return `${this.prefixCls}-notice`;
|
|
},
|
|
classes () {
|
|
return [
|
|
this.baseClass,
|
|
{
|
|
[`${this.className}`]: !!this.className,
|
|
[`${this.baseClass}-closable`]: this.closable,
|
|
[`${this.baseClass}-with-desc`]: this.withDesc
|
|
}
|
|
]
|
|
},
|
|
contentClasses () {
|
|
return `${this.baseClass}-content`;
|
|
}
|
|
},
|
|
methods: {
|
|
clearCloseTimer () {
|
|
if (this.closeTimer) {
|
|
clearTimeout(this.closeTimer);
|
|
this.closeTimer = null;
|
|
}
|
|
},
|
|
close () {
|
|
this.clearCloseTimer();
|
|
this.onClose();
|
|
this.$parent.close(this.key);
|
|
}
|
|
},
|
|
compiled () {
|
|
this.clearCloseTimer();
|
|
|
|
if (this.duration !== 0) {
|
|
this.closeTimer = setTimeout(() => {
|
|
this.close();
|
|
}, this.duration * 1000)
|
|
}
|
|
|
|
// check if with desc in Notice component
|
|
if (this.prefixCls === 'ivu-notice') {
|
|
this.withDesc = this.$els.content.querySelectorAll(`.${this.prefixCls}-desc`)[0].innerHTML !== '';
|
|
}
|
|
},
|
|
beforeDestroy () {
|
|
this.clearCloseTimer();
|
|
}
|
|
}
|
|
</script>
|