优化input&popconfirm组件

src/form/input.js

@@ -16,7 +16,10 @@ import '../icon/index.js'
 
 const ANIMATION = {
   duration: 100,
-  custom: [{ transform: 'scaleY(0)' }, { transform: 'scaleY(1)' }]
+  custom: [
+    { transform: 'scaleY(0)', opacity: 0 },
+    { transform: 'scaleY(1)', opacity: 1 }
+  ]
 }
 
 class Input extends Component {
@@ -38,8 +41,6 @@ class Input extends Component {
     lazy: 0 // 并发拦截时间, 单位毫秒
   }
   #list = []
-  #originList = []
-  #isComposing = false
   #selectIndex = -1
   #listShowing = false
   #stamp = 0
@@ -132,16 +133,11 @@ class Input extends Component {
         left: 0;
         top: calc(100% + 4px);
         width: 100%;
-        height: auto;
-        max-height: 200px;
         padding: 4px 0;
         border-radius: 4px;
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
         transform-origin: top;
 
-        .scroller {
-          max-height: 200px;
-        }
         .list {
           width: 100%;
         }
@@ -375,8 +371,6 @@ class Input extends Component {
           ref="input"
           @input=${this.handleInput}
           @change=${this.handleChange}
-          @compositionstart=${this.handleCompositionstart}
-          @compositionend=${this.handleCompositionend}
           @keydown=${this.handleKeyDown}
           @focus=${this.handleFocus}
           placeholder=${this.placeholder}
@@ -409,73 +403,39 @@ class Input extends Component {
       </div>
     `
   }
-  handleCompositionstart() {
-    this.#isComposing = true
-  }
-  handleCompositionend() {
-    this.#isComposing = false
-    this.filterSuggestList()
-  }
-  filterSuggestList() {
-    if (!this.#originList.length) {
-      return
-    }
-    if (!this.value.trim()) {
-      this.#list = []
-    } else {
-      this.#list = this.#originList.filter(li =>
-        li.value.startsWith(this.value)
-      )
-    }
-    if (!this.#listShowing) {
-      this.#listShowing = true
-      this.$refs.suggestion.$animate()
-    }
-    this.$requestUpdate()
-  }
+
   handleInput(e) {
     let { lazy } = this
     this.value = e.currentTarget.value
+
     if (lazy && Date.now() - this.#stamp < lazy) {
       return
     }
     this.#stamp = Date.now()
 
-    if (!this.#isComposing) {
-      this.filterSuggestList()
-    }
     this.emitFetchSuggest()
   }
   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')
+    this.#selectIndex = index
+    this.emitSelect()
   }
   clear() {
     this.$refs.input.value = ''
     this.value = ''
-    if (this.#originList.length) {
-      this.filterSuggestList()
-    }
+    this.$emit('change')
+    this.$emit('input')
   }
   handleChange() {
     this.$emit('change')
   }
   handleKeyDown(e) {
     let { lazy, minlength, value } = this
+
     if (e.keyCode === 13) {
       e.preventDefault()
       if (this.#selectIndex > -1 && this.#listShowing) {
-        this.value = this.#list[this.#selectIndex].value
-        this.#list = [this.#list[this.#selectIndex]]
-        this.#selectIndex = 0
-        this.$requestUpdate()
-        this.$refs.suggestion.$animate(true)
-        this.#listShowing = false
-        return this.$emit('select') //输入建议存在,则第1次回车的时候, 不触发提交
+        return this.emitSelect()
       }
       if (lazy && Date.now() - this.#stamp < lazy) {
         return
@@ -486,6 +446,7 @@ class Input extends Component {
       }
       return this.$emit('submit')
     }
+
     if (e.keyCode === 38 || e.keyCode === 40) {
       e.preventDefault()
       let step = e.keyCode === 38 ? -1 : 1
@@ -497,17 +458,33 @@ class Input extends Component {
       if (this.#selectIndex > this.#list.length - 1) {
         this.#selectIndex = this.#list.length - 1
       }
-      let target = this.$refs.list.children[this.#selectIndex]
-      this.$refs.scroller.scrollTop = target.offsetTop - 150
+
       this.$requestUpdate()
     }
   }
+  // 触发列表选择
+  emitSelect() {
+    let item = this.#list[this.#selectIndex]
+    this.value = item.value
+
+    this.$refs.suggestion.$animate(true)
+    this.#listShowing = false
+    this.$requestUpdate()
+
+    this.$emit('change')
+    this.$emit('input')
+    this.$emit('select', {
+      index: this.#selectIndex,
+      value: item
+    })
+  }
   emitFetchSuggest() {
     this.$emit('fetch-suggest', {
       value: this.value,
       send: list => {
-        this.#originList = this.#list = list.slice(0, 5)
-        this.filterSuggestList()
+        this.#list = list.slice(0, 10)
+        this.#selectIndex = -1
+        this.$requestUpdate()
       }
     })
   }

src/popconfirm/index.js

@@ -4,9 +4,8 @@
  * @date 2023/04/28 16:14:10
  */
 
-import { css, html, Component, nextTick, styleMap } from '@bd/core'
+import { css, html, Component, styleMap } from '@bd/core'
 import '../form/button.js'
-import '../icon/index.js'
 
 class Popconfirm extends Component {
   static props = {
@@ -51,17 +50,6 @@ class Popconfirm extends Component {
       attribute: false
     },
 
-    //组件状态
-    left: {
-      type: Number,
-      default: 0,
-      attribute: false
-    },
-    top: {
-      type: Number,
-      default: 0,
-      attribute: false
-    },
     show: {
       type: Boolean,
       default: false,