滚动组件增加禁用状态
parent
62c2776a33
commit
61b2b2d46f
|
@ -107,6 +107,7 @@ const IS_FF = !!window.sidebar
|
|||
/* */
|
||||
export default class Scroll {
|
||||
props = {
|
||||
disabled: false,
|
||||
axis: 'xy' // 滚动方向, 默认x轴和y轴都可以滚动
|
||||
}
|
||||
__init__() {
|
||||
|
@ -154,6 +155,25 @@ export default class Scroll {
|
|||
return this.__BOX__.scrollHeight
|
||||
}
|
||||
|
||||
get disabled() {
|
||||
return this.props.disabled
|
||||
}
|
||||
|
||||
set disabled(val) {
|
||||
var type = typeof val
|
||||
|
||||
if (val === this.props.disabled) {
|
||||
return
|
||||
}
|
||||
if ((type === 'boolean' && val) || type !== 'boolean') {
|
||||
this.props.disabled = true
|
||||
this.setAttribute('disabled', '')
|
||||
} else {
|
||||
this.props.disabled = false
|
||||
this.removeAttribute('disabled')
|
||||
}
|
||||
}
|
||||
|
||||
_fetchScrollX(moveX) {
|
||||
var { sw, ow, xw } = this.props
|
||||
|
||||
|
@ -184,6 +204,10 @@ export default class Scroll {
|
|||
mounted() {
|
||||
// 初始化滚动条的位置和长度
|
||||
this._initFn = $.bind(this.__BOX__, 'mouseenter', ev => {
|
||||
// 禁用状态, 不允许滚动
|
||||
if (this.disabled) {
|
||||
return
|
||||
}
|
||||
var ow = this.__BOX__.offsetWidth
|
||||
var sw = this.__BOX__.scrollWidth
|
||||
var oh = this.__BOX__.offsetHeight
|
||||
|
@ -219,6 +243,10 @@ export default class Scroll {
|
|||
|
||||
// 鼠标滚动事件
|
||||
this._wheelFn = $.catch(this.__BOX__, 'wheel', ev => {
|
||||
// 禁用状态, 不允许滚动
|
||||
if (this.disabled) {
|
||||
return
|
||||
}
|
||||
var { sh, oh, yh, sw, ow, xw } = this.props
|
||||
|
||||
// x轴 y轴 都为0时, 不作任何处理
|
||||
|
@ -246,6 +274,8 @@ export default class Scroll {
|
|||
deltaY = ev.deltaY / (delta / 120)
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
if (this.props.axis !== 'x') {
|
||||
this.__BOX__.scrollTop += deltaY
|
||||
|
||||
|
@ -301,6 +331,10 @@ export default class Scroll {
|
|||
if (!this.props.thumbY) {
|
||||
this.props.thumbY = 0
|
||||
}
|
||||
// 禁用状态, 不允许滚动
|
||||
if (this.disabled) {
|
||||
return
|
||||
}
|
||||
$.bind(document, 'mousemove', mousemoveFn)
|
||||
$.bind(document, 'mouseup', mouseupFn)
|
||||
})
|
||||
|
@ -310,6 +344,10 @@ export default class Scroll {
|
|||
if (!this.props.thumbX) {
|
||||
this.props.thumbX = 0
|
||||
}
|
||||
// 禁用状态, 不允许滚动
|
||||
if (this.disabled) {
|
||||
return
|
||||
}
|
||||
$.bind(document, 'mousemove', mousemoveFn)
|
||||
$.bind(document, 'mouseup', mouseupFn)
|
||||
})
|
||||
|
@ -333,6 +371,9 @@ export default class Scroll {
|
|||
case 'axis':
|
||||
this.props.axis = val
|
||||
break
|
||||
case 'disabled':
|
||||
this[name] = true
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Reference in New Issue