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

优化select组件初始化

old
宇天 2019-08-14 21:29:21 +08:00
parent 0191fa6141
commit db59809eb0
2 changed files with 43 additions and 30 deletions

View File

@ -129,7 +129,9 @@ const log = console.log
${js} ${js}
customElements.define('wc-${name.toLowerCase()}', ${name}) if(!customElements.get('wc-${name.toLowerCase()}')){
customElements.define('wc-${name.toLowerCase()}', ${name})
}
` `
} }

View File

@ -13,10 +13,6 @@
</template> </template>
<style lang="scss"> <style lang="scss">
ul,
li {
list-style: none;
}
:host { :host {
overflow: hidden; overflow: hidden;
display: inline-block; display: inline-block;
@ -147,6 +143,9 @@ li {
&[focus] { &[focus] {
background: nth($cp, 1); background: nth($cp, 1);
} }
&[focus] {
color: nth($ct, 1);
}
&[sub] { &[sub] {
text-indent: 1em; text-indent: 1em;
} }
@ -298,9 +297,12 @@ export default class Select {
} }
set value(val) { set value(val) {
var { DICT } = this.props var { DICT, active } = this.props
this.props.value = val this.props.value = val
this.__INPUT__.value = (DICT && DICT[val] && DICT[val].label) || val this.__INPUT__.value = (DICT && DICT[val] && DICT[val].label) || val
if (!active) {
this._updateStyle()
}
} }
_renderOptions(options) { _renderOptions(options) {
@ -309,19 +311,18 @@ export default class Select {
var elem = this.__OPTG__.firstElementChild.firstElementChild var elem = this.__OPTG__.firstElementChild.firstElementChild
elem.innerHTML = parseOptions(options, this.props) elem.innerHTML = parseOptions(options, this.props)
this.props.ITEMS = Array.from(elem.children).filter(it => {
return it.tagName === 'DD' && !it.hasAttribute('disabled')
})
} }
// 移动光标选择下拉选项 // 移动光标选择下拉选项
_moveSelect(ev) { _moveSelect(ev) {
var { LIST, DICT } = this.props var { LIST, DICT, ITEMS } = this.props
if (LIST && LIST.length) { if (LIST && LIST.length) {
ev.preventDefault() ev.preventDefault()
var step = ev.keyCode === 38 ? -1 : 1 var step = ev.keyCode === 38 ? -1 : 1
var items = Array.from(
this.__OPTG__.firstElementChild.firstElementChild.children
).filter(it => {
return it.tagName === 'DD' && !it.hasAttribute('disabled')
})
if (this.props.mvidx === null) { if (this.props.mvidx === null) {
this.props.mvidx = 0 this.props.mvidx = 0
} else { } else {
@ -329,11 +330,11 @@ export default class Select {
} }
if (this.props.mvidx < 0) { if (this.props.mvidx < 0) {
this.props.mvidx = 0 this.props.mvidx = 0
} else if (this.props.mvidx > items.length - 1) { } else if (this.props.mvidx > ITEMS.length - 1) {
this.props.mvidx = items.length - 1 this.props.mvidx = ITEMS.length - 1
} }
items.forEach((it, i) => { ITEMS.forEach((it, i) => {
if (i === this.props.mvidx) { if (i === this.props.mvidx) {
this.__OPTG__.firstElementChild.scrollTop = it.offsetTop - 150 this.__OPTG__.firstElementChild.scrollTop = it.offsetTop - 150
it.setAttribute('focus', '') it.setAttribute('focus', '')
@ -344,6 +345,28 @@ export default class Select {
} }
} }
_updateStyle(idx) {
var { LIST, ITEMS, value } = this.props
if (LIST && LIST.length) {
if (idx === undefined) {
for (let i = -1, it; (it = LIST[++i]); ) {
if (value === it.value) {
idx = i
break
}
}
}
this.props.mvidx = idx
ITEMS.forEach((it, i) => {
if (i === idx) {
it.setAttribute('focus', '')
} else {
it.removeAttribute('focus')
}
})
}
}
// 触发列表选择 // 触发列表选择
_fetchSelect(idx, needUpdateStyle) { _fetchSelect(idx, needUpdateStyle) {
var item = this.props.LIST[idx] var item = this.props.LIST[idx]
@ -354,19 +377,7 @@ export default class Select {
}) })
) )
if (needUpdateStyle) { if (needUpdateStyle) {
this.props.mvidx = idx this._updateStyle(idx)
var items = Array.from(
this.__OPTG__.firstElementChild.firstElementChild.children
).filter(it => {
return it.tagName === 'DD' && !it.hasAttribute('disabled')
})
items.forEach((it, i) => {
if (i === idx) {
it.setAttribute('focus', '')
} else {
it.removeAttribute('focus')
}
})
} }
this.props.active = false this.props.active = false
this.__OPTG__.classList.remove('show') this.__OPTG__.classList.remove('show')
@ -424,12 +435,12 @@ export default class Select {
} }
}) })
// 渲染建议列表 // 渲染列表
this._activeFn = bind(this.__INPUT__, 'click', ev => { this._activeFn = bind(this.__INPUT__, 'click', ev => {
var { options } = this.props var { options } = this.props
initPos.call(this) initPos.call(this)
this.__OPTG__.classList.toggle('show', true) this.__OPTG__.classList.toggle('show')
}) })
// 选择选项 // 选择选项