92 lines
2.1 KiB
Vue
92 lines
2.1 KiB
Vue
|
|
import PropTypes from '../_util/vue-types'
|
|
import { getStyle, getComponentFromProp } from '../_util/props-util'
|
|
import BaseMixin from '../_util/BaseMixin'
|
|
|
|
function noop () {
|
|
}
|
|
|
|
export default {
|
|
mixins: [BaseMixin],
|
|
props: {
|
|
duration: PropTypes.number.def(1.5),
|
|
closable: PropTypes.bool,
|
|
prefixCls: PropTypes.string,
|
|
update: PropTypes.bool,
|
|
closeIcon: PropTypes.any,
|
|
},
|
|
|
|
mounted () {
|
|
this.startCloseTimer()
|
|
},
|
|
updated () {
|
|
if (this.update) {
|
|
this.restartCloseTimer()
|
|
}
|
|
},
|
|
|
|
beforeDestroy () {
|
|
this.clearCloseTimer()
|
|
this.willDestroy = true // beforeDestroy调用后依然会触发onMouseleave事件
|
|
},
|
|
watch: {
|
|
duration () {
|
|
this.restartCloseTimer()
|
|
},
|
|
},
|
|
methods: {
|
|
close () {
|
|
this.clearCloseTimer()
|
|
this.__emit('close')
|
|
},
|
|
|
|
startCloseTimer () {
|
|
this.clearCloseTimer()
|
|
if (!this.willDestroy && this.duration) {
|
|
this.closeTimer = setTimeout(() => {
|
|
this.close()
|
|
}, this.duration * 1000)
|
|
}
|
|
},
|
|
|
|
clearCloseTimer () {
|
|
if (this.closeTimer) {
|
|
clearTimeout(this.closeTimer)
|
|
this.closeTimer = null
|
|
}
|
|
},
|
|
restartCloseTimer () {
|
|
this.clearCloseTimer()
|
|
this.startCloseTimer()
|
|
},
|
|
},
|
|
|
|
render () {
|
|
const { prefixCls, closable, clearCloseTimer, startCloseTimer, $slots, close, $listeners } = this
|
|
const componentClass = `${prefixCls}-notice`
|
|
const className = {
|
|
[`${componentClass}`]: 1,
|
|
[`${componentClass}-closable`]: closable,
|
|
}
|
|
const style = getStyle(this)
|
|
const closeIcon = getComponentFromProp(this, 'closeIcon')
|
|
return (
|
|
<div
|
|
class={className}
|
|
style={style || { right: '50%' } }
|
|
onMouseenter={clearCloseTimer}
|
|
onMouseleave={startCloseTimer}
|
|
onClick={$listeners.click || noop}
|
|
>
|
|
<div class={`${componentClass}-content`}>{$slots.default}</div>
|
|
{closable
|
|
? <a tabIndex='0' onClick={close} class={`${componentClass}-close`}>
|
|
{closeIcon || <span class={`${componentClass}-close-x`}/>}
|
|
</a> : null
|
|
}
|
|
</div>
|
|
)
|
|
},
|
|
}
|
|
|