This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

优化button组件,增加支持并发拦截

old
宇天 2020-07-10 17:48:32 +08:00
parent 5fe87cca8c
commit 5564b30b60
1 changed files with 25 additions and 5 deletions

View File

@ -346,6 +346,13 @@
background: nth($cgr, 1); background: nth($cgr, 1);
} }
:host([no-border]) {
button {
border-color: transparent;
background: inherit;
}
}
:host([text][loading]), :host([text][loading]),
:host([text][disabled]) { :host([text][disabled]) {
button { button {
@ -378,7 +385,8 @@ export default class Button {
icon: '', icon: '',
autofocus: '', autofocus: '',
loading: false, loading: false,
disabled: false disabled: false,
lazy: 0 // 并发拦截时间, 单位毫秒
} }
__init__() { __init__() {
@ -435,12 +443,21 @@ export default class Button {
} }
mounted() { mounted() {
this.stamp = 0
// 阻止事件冒泡, 避免用户自己绑定click事件不受这2个值的限制 // 阻止事件冒泡, 避免用户自己绑定click事件不受这2个值的限制
this._handleClick = $.catch(this.__BTN__, 'click', ev => { this._handleClick = $.bind(this.__BTN__, 'click', ev => {
if (this.props.loading || this.props.disabled) { var { loading, disabled, lazy } = this.props
return var now = Date.now()
if (loading || disabled) {
return ev.stopPropagation()
} }
this.dispatchEvent(new CustomEvent('active')) // 并发拦截
if (lazy && now - this.stamp < lazy) {
return ev.stopPropagation()
}
this.stamp = now
}) })
} }
@ -471,6 +488,9 @@ export default class Button {
}, 10) }, 10)
} }
break break
case 'lazy':
this.props.lazy = val >> 0
break
case 'loading': case 'loading':
case 'disabled': case 'disabled':