ant-design-vue/components/vc-notification/Notice.vue

69 lines
1.7 KiB
Vue
Raw Normal View History

2018-02-05 19:12:41 +08:00
<script>
2018-02-06 15:32:32 +08:00
import PropTypes from '../_util/vue-types'
2018-02-24 18:12:24 +08:00
import { getStyle } from '../_util/props-util'
2018-02-06 15:32:32 +08:00
import BaseMixin from '../_util/BaseMixin'
2018-02-05 19:12:41 +08:00
export default {
mixins: [BaseMixin],
props: {
duration: PropTypes.number.def(1.5),
2018-02-06 15:21:13 +08:00
closable: PropTypes.bool,
prefixCls: PropTypes.string,
2018-02-05 19:12:41 +08:00
},
mounted () {
this.startCloseTimer()
},
2018-02-06 15:21:13 +08:00
beforeDestroy () {
2018-02-05 19:12:41 +08:00
this.clearCloseTimer()
2018-02-06 15:21:13 +08:00
this.willDestroy = true // beforeDestroy调用后依然会触发onMouseleave事件
2018-02-05 19:12:41 +08:00
},
methods: {
close () {
this.clearCloseTimer()
2018-02-06 15:21:13 +08:00
this.__emit('close')
2018-02-05 19:12:41 +08:00
},
startCloseTimer () {
2018-02-06 15:21:13 +08:00
this.clearCloseTimer()
if (!this.willDestroy && this.duration) {
2018-02-05 19:12:41 +08:00
this.closeTimer = setTimeout(() => {
this.close()
}, this.duration * 1000)
}
},
clearCloseTimer () {
if (this.closeTimer) {
clearTimeout(this.closeTimer)
this.closeTimer = null
}
},
},
render () {
const { prefixCls, closable, clearCloseTimer, startCloseTimer, $slots, close } = this
const componentClass = `${prefixCls}-notice`
const className = {
[`${componentClass}`]: 1,
[`${componentClass}-closable`]: closable,
}
const style = getStyle(this)
return (
<div class={className} style={style || { right: '50%' } } onMouseenter={clearCloseTimer}
onMouseleave={startCloseTimer}
>
<div class={`${componentClass}-content`}>{$slots.default}</div>
{closable
? <a tabIndex='0' onClick={close} class={`${componentClass}-close`}>
<span class={`${componentClass}-close-x`}></span>
</a> : null
}
</div>
)
},
}
</script>