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}
if(!customElements.get('wc-${name.toLowerCase()}')){
customElements.define('wc-${name.toLowerCase()}', ${name})
}
`
}

View File

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