优化滚动组件
parent
7407f3d9ad
commit
80cd4adad9
|
@ -96,7 +96,7 @@ function mkWCFile({ style, html, js }) {
|
||||||
`
|
`
|
||||||
)
|
)
|
||||||
.replace('mounted()', 'connectedCallback()')
|
.replace('mounted()', 'connectedCallback()')
|
||||||
.replace('unmount()', 'disconnectedCallback()')
|
.replace('unmounted()', 'disconnectedCallback()')
|
||||||
.replace(
|
.replace(
|
||||||
'watch() {',
|
'watch() {',
|
||||||
'attributeChangedCallback(name, old, val) {\nif (old === val) {return}'
|
'attributeChangedCallback(name, old, val) {\nif (old === val) {return}'
|
||||||
|
|
|
@ -111,7 +111,7 @@ function mkWCFile({ style, html, js }) {
|
||||||
`
|
`
|
||||||
)
|
)
|
||||||
.replace('mounted()', 'connectedCallback()')
|
.replace('mounted()', 'connectedCallback()')
|
||||||
.replace('unmount()', 'disconnectedCallback()')
|
.replace('unmounted()', 'disconnectedCallback()')
|
||||||
.replace(
|
.replace(
|
||||||
'watch() {',
|
'watch() {',
|
||||||
'attributeChangedCallback(name, old, val) {\nif (old === val) {return}'
|
'attributeChangedCallback(name, old, val) {\nif (old === val) {return}'
|
||||||
|
|
|
@ -521,7 +521,7 @@ export default class Color {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmounted() {
|
||||||
$.unbind(this.__SCENE__, 'mousedown', this.handleDown)
|
$.unbind(this.__SCENE__, 'mousedown', this.handleDown)
|
||||||
$.unbind(document, 'mousedown', this.handleUp)
|
$.unbind(document, 'mousedown', this.handleUp)
|
||||||
$.unbind(this.__HUE__, 'input', this.handleInput1)
|
$.unbind(this.__HUE__, 'input', this.handleInput1)
|
||||||
|
|
|
@ -356,7 +356,7 @@ export default class Button {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmounted() {
|
||||||
$.unbind(this.__BTN__, 'click', this._handleClick)
|
$.unbind(this.__BTN__, 'click', this._handleClick)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -265,7 +265,7 @@ export default class Checkbox {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmounted() {
|
||||||
$.unbind(this, 'click', this._handlClick)
|
$.unbind(this, 'click', this._handlClick)
|
||||||
$.unbind(this, 'keydown', this._handlKeydown)
|
$.unbind(this, 'keydown', this._handlKeydown)
|
||||||
}
|
}
|
||||||
|
|
|
@ -119,7 +119,7 @@ export default class CheckboxGroup {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmounted() {
|
||||||
$.unbind(this, 'child-picked', this._pickedFn)
|
$.unbind(this, 'child-picked', this._pickedFn)
|
||||||
this.__observer.disconnect()
|
this.__observer.disconnect()
|
||||||
}
|
}
|
||||||
|
|
|
@ -243,7 +243,7 @@ export default class Dropdown {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmounted() {
|
||||||
this.state.options = []
|
this.state.options = []
|
||||||
$.unbind(this.__PREVIEW__, 'click', this._activeFn)
|
$.unbind(this.__PREVIEW__, 'click', this._activeFn)
|
||||||
$.unbind(this.__OPTIONS__, 'click', this._pickedFn)
|
$.unbind(this.__OPTIONS__, 'click', this._pickedFn)
|
||||||
|
|
|
@ -583,7 +583,7 @@ export default class Input {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmounted() {
|
||||||
$.unbind(this.__INPUT__, 'keydown', this._handleSubmit)
|
$.unbind(this.__INPUT__, 'keydown', this._handleSubmit)
|
||||||
$.unbind(this.__INPUT__, 'input', this._handleChange)
|
$.unbind(this.__INPUT__, 'input', this._handleChange)
|
||||||
$.unbind(this.__INPUT__, 'click', this._parseSuggestion)
|
$.unbind(this.__INPUT__, 'click', this._parseSuggestion)
|
||||||
|
|
|
@ -251,7 +251,7 @@ export default class Link {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmounted() {
|
||||||
$.unbind(this.__LINK__, 'click', this._handleClick)
|
$.unbind(this.__LINK__, 'click', this._handleClick)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -385,7 +385,7 @@ export default class Number {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmounted() {
|
||||||
$.unbind(this.__INPUT__, 'keydown', this._handleSubmit)
|
$.unbind(this.__INPUT__, 'keydown', this._handleSubmit)
|
||||||
$.unbind(this.__OUTER__, 'click', this._handleAction)
|
$.unbind(this.__OUTER__, 'click', this._handleAction)
|
||||||
}
|
}
|
||||||
|
|
|
@ -111,7 +111,7 @@ export default class Option {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmounted() {
|
||||||
$.unbind(this, 'click', this._clickFn)
|
$.unbind(this, 'click', this._clickFn)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -412,7 +412,7 @@ export default class Passwd {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmounted() {
|
||||||
$.unbind(this.__INPUT__, 'keydown', this._handleSubmit)
|
$.unbind(this.__INPUT__, 'keydown', this._handleSubmit)
|
||||||
$.unbind(this.__EYE__, 'click', this._eyeFn)
|
$.unbind(this.__EYE__, 'click', this._eyeFn)
|
||||||
}
|
}
|
||||||
|
|
|
@ -251,7 +251,7 @@ export default class Radio {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmounted() {
|
||||||
$.unbind(this, 'click', this._handleClick)
|
$.unbind(this, 'click', this._handleClick)
|
||||||
$.unbind(this, 'keydown', this._handlKeydown)
|
$.unbind(this, 'keydown', this._handlKeydown)
|
||||||
}
|
}
|
||||||
|
|
|
@ -108,7 +108,7 @@ export default class RadioGroup {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmounted() {
|
||||||
$.unbind(this, 'child-picked', this._pickedFn)
|
$.unbind(this, 'child-picked', this._pickedFn)
|
||||||
this.__observer.disconnect()
|
this.__observer.disconnect()
|
||||||
}
|
}
|
||||||
|
|
|
@ -499,7 +499,7 @@ export default class Select {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmounted() {
|
||||||
$.unbind(this.__INPUT__, 'keydown', this._handleKeydown)
|
$.unbind(this.__INPUT__, 'keydown', this._handleKeydown)
|
||||||
$.unbind(this.__INPUT__, 'click', this._activeFn)
|
$.unbind(this.__INPUT__, 'click', this._activeFn)
|
||||||
$.unbind(this.__OPTG__, 'click', this._handleSelect)
|
$.unbind(this.__OPTG__, 'click', this._handleSelect)
|
||||||
|
|
|
@ -181,7 +181,7 @@ export default class Switch {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmounted() {
|
||||||
$.unbind(this, 'click', this._handleClick)
|
$.unbind(this, 'click', this._handleClick)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -247,7 +247,7 @@ export default class Textarea {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmounted() {
|
||||||
$.unbind(this.__INPUT__, 'keydown', this._handleSubmit)
|
$.unbind(this.__INPUT__, 'keydown', this._handleSubmit)
|
||||||
$.unbind(this.__INPUT__, 'input,change', this._statFn)
|
$.unbind(this.__INPUT__, 'input,change', this._statFn)
|
||||||
}
|
}
|
||||||
|
|
|
@ -586,7 +586,7 @@ export default class Layer {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmounted() {
|
||||||
$.clearOutside(this._handlMask)
|
$.clearOutside(this._handlMask)
|
||||||
$.unbind(this.__TITLE__, 'click', this._handleClose)
|
$.unbind(this.__TITLE__, 'click', this._handleClose)
|
||||||
$.unbind(this.__CTRL__, 'click', this._handleBtnClick)
|
$.unbind(this.__CTRL__, 'click', this._handleBtnClick)
|
||||||
|
|
|
@ -237,7 +237,7 @@ export default class Markd {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmounted() {
|
||||||
$.unbind(this.__BOX__, 'click', this._headClickFn)
|
$.unbind(this.__BOX__, 'click', this._headClickFn)
|
||||||
this.__observer.disconnect()
|
this.__observer.disconnect()
|
||||||
this.clear()
|
this.clear()
|
||||||
|
|
|
@ -1005,7 +1005,7 @@ export default class Meditor {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmounted() {
|
||||||
$.unbind(this.__EDITOR__, 'input', this._inputFn)
|
$.unbind(this.__EDITOR__, 'input', this._inputFn)
|
||||||
$.unbind(this.__EDITOR__, 'keydown', this._keydownFn)
|
$.unbind(this.__EDITOR__, 'keydown', this._keydownFn)
|
||||||
$.unbind(this.__EDITOR__, 'paste', this._pasteFn)
|
$.unbind(this.__EDITOR__, 'paste', this._pasteFn)
|
||||||
|
|
|
@ -602,7 +602,7 @@ export default class Neditor {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmounted() {
|
||||||
$.unbind(this.__TOOLBAR__, 'click', this.__toolFn)
|
$.unbind(this.__TOOLBAR__, 'click', this.__toolFn)
|
||||||
$.unbind(this.__FONT__, 'click', this.__fontFn)
|
$.unbind(this.__FONT__, 'click', this.__fontFn)
|
||||||
$.unbind(this.__COLOR__, 'click', this.__colorFn)
|
$.unbind(this.__COLOR__, 'click', this.__colorFn)
|
||||||
|
|
|
@ -628,7 +628,7 @@ export default class DatePicker {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmounted() {
|
||||||
$.unbind(this.__INPUT__, 'click', this._activeFn)
|
$.unbind(this.__INPUT__, 'click', this._activeFn)
|
||||||
$.unbind(this.__DAYS__, 'click', this._pickFn)
|
$.unbind(this.__DAYS__, 'click', this._pickFn)
|
||||||
$.unbind(this.__CTRL__, 'click', this._ctrlFn)
|
$.unbind(this.__CTRL__, 'click', this._ctrlFn)
|
||||||
|
|
|
@ -125,14 +125,14 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import $ from '../utils'
|
import $ from '../utils'
|
||||||
// 是否火狐浏览器
|
|
||||||
const IS_FF = !!window.sidebar
|
const AXIS_LIST = ['x', 'y', 'xy']
|
||||||
|
|
||||||
/* */
|
/* */
|
||||||
export default class Scroll {
|
export default class Scroll {
|
||||||
props = {
|
props = {
|
||||||
axis: 'xy', // 滚动方向, 默认x轴和y轴都可以滚动
|
axis: 'xy', // 滚动方向, 默认x轴和y轴都可以滚动
|
||||||
delay: 1000, // 节流延迟
|
delay: 1000, // 节流防抖延迟
|
||||||
distance: 1 // 触发距离阀值, 单位像素
|
distance: 1 // 触发距离阀值, 单位像素
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -391,9 +391,11 @@ export default class Scroll {
|
||||||
subtree: true,
|
subtree: true,
|
||||||
attributeFilter: ['style']
|
attributeFilter: ['style']
|
||||||
})
|
})
|
||||||
|
|
||||||
|
this._initFn(new Event('mounted'))
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmounted() {
|
||||||
this.__observer.disconnect()
|
this.__observer.disconnect()
|
||||||
|
|
||||||
$.unbind(this.__X__, 'mousedown', this._xBarFn)
|
$.unbind(this.__X__, 'mousedown', this._xBarFn)
|
||||||
|
@ -405,7 +407,15 @@ export default class Scroll {
|
||||||
watch() {
|
watch() {
|
||||||
switch (name) {
|
switch (name) {
|
||||||
case 'axis':
|
case 'axis':
|
||||||
this.props.axis = val || 'xy'
|
if (val) {
|
||||||
|
if (AXIS_LIST.includes(val)) {
|
||||||
|
this.props.axis = val
|
||||||
|
} else {
|
||||||
|
this.removeAttribute(name)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.props.axis = 'xy'
|
||||||
|
}
|
||||||
break
|
break
|
||||||
|
|
||||||
case 'delay':
|
case 'delay':
|
||||||
|
|
|
@ -226,7 +226,7 @@ export default class Slider {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmounted() {
|
||||||
$.bind(this.__RANGE__, 'input', this._inputFn)
|
$.bind(this.__RANGE__, 'input', this._inputFn)
|
||||||
delete this._inputFn
|
delete this._inputFn
|
||||||
}
|
}
|
||||||
|
|
Reference in New Issue