优化input&popconfirm组件
parent
006e347d74
commit
12d7ae7c34
|
|
@ -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()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue