优化input组件代码

src/form/input.js

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