优化date/select/input组件
parent
a65834e7e1
commit
4df8108b0d
|
@ -420,6 +420,8 @@ export default class Input {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
this._handleWheel = ebind(this.__INPUT__, 'wheel')
|
||||||
|
|
||||||
// 非textarea, 可做输入建议功能
|
// 非textarea, 可做输入建议功能
|
||||||
if (type === 'text') {
|
if (type === 'text') {
|
||||||
// 输入状态事件
|
// 输入状态事件
|
||||||
|
@ -472,6 +474,7 @@ export default class Input {
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmount() {
|
||||||
|
unbind(this.__INPUT__, 'wheel', this._handleWheel)
|
||||||
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, 'click', this._bubbleFn)
|
unbind(this, 'click', this._bubbleFn)
|
||||||
|
|
|
@ -314,6 +314,7 @@ export default class Select {
|
||||||
this.props.ITEMS = Array.from(elem.children).filter(it => {
|
this.props.ITEMS = Array.from(elem.children).filter(it => {
|
||||||
return it.tagName === 'DD' && !it.hasAttribute('disabled')
|
return it.tagName === 'DD' && !it.hasAttribute('disabled')
|
||||||
})
|
})
|
||||||
|
this.value = this.props.value
|
||||||
}
|
}
|
||||||
|
|
||||||
// 移动光标选择下拉选项
|
// 移动光标选择下拉选项
|
||||||
|
|
|
@ -202,6 +202,10 @@
|
||||||
border: 1px solid nth($co, 1);
|
border: 1px solid nth($co, 1);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:host(:focus-within) {
|
:host(:focus-within) {
|
||||||
|
@ -490,20 +494,20 @@ export default class DatePicker {
|
||||||
this._renderCalendar()
|
this._renderCalendar()
|
||||||
|
|
||||||
this._activeFn = bind(this.__INPUT__, 'click', ev => {
|
this._activeFn = bind(this.__INPUT__, 'click', ev => {
|
||||||
if (this.props.disabled || this.props.readonly || this.props.active) {
|
if (this.props.disabled || this.props.readonly) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.props.active = true
|
this.props.active = !this.props.active
|
||||||
|
|
||||||
let { x, y } = this.getBoundingClientRect()
|
let { x, y } = this.getBoundingClientRect()
|
||||||
|
|
||||||
this.__CALENDAR__.style.cssText = `display:block;left:${x}px;top:${y +
|
this.__CALENDAR__.style.cssText = `left:${x}px;top:${y + 50}px`
|
||||||
50}px`
|
this.__CALENDAR__.classList.toggle('show')
|
||||||
})
|
})
|
||||||
|
|
||||||
this._bubbleFn = ebind(this, 'click')
|
this._bubbleFn = ebind(this, 'click')
|
||||||
this._inactiveFn = bind(document, 'click', ev => {
|
this._inactiveFn = bind(document, 'click', ev => {
|
||||||
this.__CALENDAR__.style.cssText = ''
|
this.__CALENDAR__.classList.toggle('show', false)
|
||||||
this.props.active = false
|
this.props.active = false
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
Reference in New Issue