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