diff --git a/src/form/input.js b/src/form/input.js index 623ec2d..cb9265d 100644 --- a/src/form/input.js +++ b/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 { ` } - 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() } }) } diff --git a/src/popconfirm/index.js b/src/popconfirm/index.js index f240b07..c458008 100644 --- a/src/popconfirm/index.js +++ b/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,