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/image/preview.js b/src/image-preview/index.js similarity index 99% rename from src/image/preview.js rename to src/image-preview/index.js index 42120f0..88b866e 100644 --- a/src/image/preview.js +++ b/src/image-preview/index.js @@ -261,6 +261,7 @@ class ImagePreview extends Component { ` } } + ImagePreview.reg('image-preview') let instance = null diff --git a/src/image/index.js b/src/image/index.js index 97db2ed..7630053 100644 --- a/src/image/index.js +++ b/src/image/index.js @@ -6,7 +6,6 @@ import { css, html, Component, styleMap } from '@bd/core' import '../icon/index.js' -import './preview.js' class Image extends Component { static props = { @@ -17,11 +16,6 @@ class Image extends Component { alt: { type: String, default: null - }, - previewSrcList: { - type: Array, - default: [], - attribute: false } } @@ -60,11 +54,7 @@ class Image extends Component { this.status = 'loaded' this.$requestUpdate() } - onClick() { - if (this.previewSrcList.length) { - window.imagePreview(this.previewSrcList) - } - } + render() { let { lazy, @@ -72,13 +62,13 @@ class Image extends Component { status, fit, alt, - previewSrcList, 'referrer-policy': referrerPolicy } = this + let styles = styleMap({ - 'object-fit': fit, - cursor: previewSrcList.length ? 'pointer' : 'default' + 'object-fit': fit }) + let $slot = '' if (status === 'loading') { @@ -90,7 +80,7 @@ class Image extends Component { } return html` -