bd
/
ui
2
0
Fork 0
Code Issues Pull Requests Wiki Activity

优化input组件代码

master
chenjiajian 2023-04-10 15:24:17 +08:00
parent 9347e5a0f7
commit b406a7f238
1 changed files with 19 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/form/input.js
View File

@ -360,12 +360,8 @@ class Input extends Component {
} }
` `
] ]
renderClose() { renderClear() {
return html`<wc-icon return html`<wc-icon class="close" name="close" @click=${this.clear} />`
class="close"
name="close"
@click=${this.onClickClose}
/>`
} }
render() { render() {
@ -379,12 +375,12 @@ class Input extends Component {
<slot class="prepend" name="prepend"></slot> <slot class="prepend" name="prepend"></slot>
<input <input
ref="input" ref="input"
@input=${this.onInput} @input=${this.handleInput}
@change=${this.onChange} @change=${this.handleChange}
@compositionstart=${this.onCompositionstart} @compositionstart=${this.handleCompositionstart}
@compositionend=${this.onCompositionend} @compositionend=${this.handleCompositionend}
@keydown=${this.onKeyDown} @keydown=${this.handleKeyDown}
@focus=${this.onFocus} @focus=${this.handleFocus}
placeholder=${this.placeholder} placeholder=${this.placeholder}
maxlength=${this.maxlength} maxlength=${this.maxlength}
minlength=${this.minlength} minlength=${this.minlength}
@ -393,13 +389,13 @@ class Input extends Component {
autofocus=${this.autofocus} autofocus=${this.autofocus}
:value=${this.value} :value=${this.value}
/> />
${this.clearable && this.value ? this.renderClose() : ''} ${this.clearable && this.value ? this.renderClear() : ''}
${this.icon ${this.icon
? html`<wc-icon class="icon" name=${this.icon} />` ? html`<wc-icon class="icon" name=${this.icon} />`
: html`<slot class="append" name="append" />`} : html`<slot class="append" name="append" />`}
<div class=${classes} ref="suggestion" #animation=${ANIMATION}> <div class=${classes} ref="suggestion" #animation=${ANIMATION}>
<wc-scroll ref="scroller"> <wc-scroll ref="scroller">
<ul class="list" @click=${this.onClick} ref="list"> <ul class="list" @click=${this.handleClickItem} ref="list">
${this.#list.map( ${this.#list.map(
(li, idx) => (li, idx) =>
html`<li html`<li
@ -415,10 +411,10 @@ class Input extends Component {
</div> </div>
` `
} }
onCompositionstart() { handleCompositionstart() {
this.#isComposing = true this.#isComposing = true
} }
onCompositionend() { handleCompositionend() {
this.#isComposing = false this.#isComposing = false
this.filterSuggestList() this.filterSuggestList()
} }
@ -439,7 +435,7 @@ class Input extends Component {
} }
this.$requestUpdate() this.$requestUpdate()
} }
onInput(e) { handleInput(e) {
let { lazy } = this let { lazy } = this
this.value = e.currentTarget.value this.value = e.currentTarget.value
if (lazy && Date.now() - this.#stamp < lazy) { if (lazy && Date.now() - this.#stamp < lazy) {
@ -457,24 +453,25 @@ class Input extends Component {
}) })
} }
} }
onClick(e) { handleClickItem(e) {
let index = e.target.getAttribute('index') let index = e.target.getAttribute('index')
this.value = this.#list[index].value this.value = this.#list[index].value
this.#list = [this.#list[index]] this.#list = [this.#list[index]]
this.$refs.suggestion.$animate(true) this.$refs.suggestion.$animate(true)
this.#listShowing = false this.#listShowing = false
this.$emit('select')
} }
onClickClose() { clear() {
this.$refs.input.value = '' this.$refs.input.value = ''
this.value = '' this.value = ''
if (this.#originList.length) { if (this.#originList.length) {
this.filterSuggestList() this.filterSuggestList()
} }
} }
onChange() { handleChange() {
this.$emit('change') this.$emit('change')
} }
onKeyDown(e) { handleKeyDown(e) {
let { lazy, minlength, value } = this let { lazy, minlength, value } = this
if (e.keyCode === 13) { if (e.keyCode === 13) {
e.preventDefault() e.preventDefault()
@ -512,7 +509,7 @@ class Input extends Component {
this.$requestUpdate() this.$requestUpdate()
} }
} }
onFocus() { handleFocus() {
if (!this.#listShowing) { if (!this.#listShowing) {
this.#listShowing = true this.#listShowing = true
this.$refs.suggestion.$animate() this.$refs.suggestion.$animate()