127 lines
3.4 KiB
Vue
127 lines
3.4 KiB
Vue
<template>
|
||
<view class="search_wraper">
|
||
<input
|
||
type="text"
|
||
class="filter_input pdr120"
|
||
confirm-type="go"
|
||
:value="value"
|
||
:focus="focusState"
|
||
@focus="handleFocus"
|
||
@blur="handleBlur"
|
||
@input="handleInput"
|
||
@confirm="handleConfirm">
|
||
<view class="zd-row buttons_wraper">
|
||
<uni-icons v-show="value !== '' && value !== null && value !== undefined" class="pdr10" type="clear" size="24" color="#666" @tap="toDel"></uni-icons>
|
||
<uni-icons type="scan" size="22" :color="focusState ? '#ff6a00' : '#4e6ef2'" @tap="focusState=true"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import permision from "@/utils/permission.js"
|
||
export default {
|
||
data() {
|
||
return {
|
||
focusState: false,
|
||
inputTimestamps: [], // 记录每次输入的时间戳
|
||
autoTimer: null, // 自动提交定时器
|
||
lastEmittedValue: '' // 上一次触发 handleChange 的值，用于去重
|
||
};
|
||
},
|
||
model: {
|
||
prop: 'value',
|
||
event: 'input'
|
||
},
|
||
props: {
|
||
value: String
|
||
},
|
||
methods: {
|
||
handleFocus () {
|
||
this.focusState = true;
|
||
},
|
||
handleBlur (e) {
|
||
this.$emit('input', e.target.value);
|
||
this.focusState = false;
|
||
},
|
||
handleInput(e) {
|
||
const newValue = e.detail.value;
|
||
// 更新 v-model
|
||
this.$emit('input', newValue);
|
||
|
||
// 记录当前输入时间戳
|
||
const now = Date.now();
|
||
this.inputTimestamps.push(now);
|
||
// 只保留最近10次记录，避免数组过长
|
||
if (this.inputTimestamps.length > 10) this.inputTimestamps.shift();
|
||
|
||
// 清除之前的自动提交定时器
|
||
if (this.autoTimer) clearTimeout(this.autoTimer);
|
||
|
||
// 启动新定时器，等待输入稳定后判断
|
||
this.autoTimer = setTimeout(() => {
|
||
this.checkAutoSubmit(newValue);
|
||
}, 150);
|
||
},
|
||
checkAutoSubmit(currentValue) {
|
||
if (!currentValue) return;
|
||
if (currentValue === this.lastEmittedValue) return;
|
||
|
||
const timestamps = this.inputTimestamps;
|
||
if (timestamps.length < 2) {
|
||
// 只有一次输入，认为是手动输入，不自动提交
|
||
return;
|
||
}
|
||
// 计算最近两次输入的最大间隔
|
||
let maxInterval = 0;
|
||
for (let i = 1; i < timestamps.length; i++) {
|
||
const interval = timestamps[i] - timestamps[i-1];
|
||
if (interval > maxInterval) maxInterval = interval;
|
||
}
|
||
// 如果最大间隔小于80ms，认为是扫码快速输入，自动提交
|
||
if (maxInterval < 80) {
|
||
this.emitChange(currentValue);
|
||
}
|
||
// 否则认为手动输入，不自动提交，等待回车
|
||
},
|
||
handleConfirm(e) {
|
||
const newValue = e.detail.value;
|
||
// 清除自动提交定时器，防止重复
|
||
if (this.autoTimer) clearTimeout(this.autoTimer);
|
||
this.$emit('input', newValue);
|
||
this.emitChange(newValue);
|
||
},
|
||
emitChange(val) {
|
||
if (!val) return;
|
||
if (val === this.lastEmittedValue) return;
|
||
this.lastEmittedValue = val;
|
||
this.$emit('handleChange', val);
|
||
// 提交后清空时间戳记录，避免影响下一次输入
|
||
this.inputTimestamps = [];
|
||
},
|
||
toDel() {
|
||
// 清空时清除定时器，重置状态
|
||
if (this.autoTimer) clearTimeout(this.autoTimer);
|
||
this.$emit('input', '');
|
||
this.lastEmittedValue = '';
|
||
this.inputTimestamps = [];
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus">
|
||
@import '../common/style/mixin.styl';
|
||
.search_wraper
|
||
position relative
|
||
_wh(100%, 80rpx)
|
||
.pdr120
|
||
padding-right: 120rpx;
|
||
.buttons_wraper
|
||
position absolute
|
||
top 0
|
||
right 10rpx
|
||
_wh(auto, 80rpx)
|
||
.pdr10
|
||
padding-right 10rpx
|
||
</style>
|