|
|
@@ -4,11 +4,11 @@
|
|
|
'input-container-focused': isFocus,
|
|
|
'input-container-normal': !isFocus
|
|
|
}">
|
|
|
- <input id="txgMsg" :placeholder="placeholderText" v-model="inputValue" placeholder-style="color:#e7e7e7;"
|
|
|
+ <input id="txgMsg" ref="inputRef" :placeholder="placeholderText" v-model="inputValue" placeholder-style="color:#e7e7e7;"
|
|
|
placeholder-class="placeholder-style" class=" input-native input-field"
|
|
|
:class="{ 'input-focused': isFocus }" @focus="handleFocus" @blur="handleBlur" cursor-spacing="100"
|
|
|
:adjust-position="false" />
|
|
|
- <view class="send-btn" @click="handleSend">发送</view>
|
|
|
+ <view class="send-btn" @touchend.prevent="handleSend" @click="handleSend">发送</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="icon-container" :class="{ 'icon-hidden': isFocus }">
|
|
|
@@ -45,7 +45,8 @@
|
|
|
data() {
|
|
|
return {
|
|
|
isFocus: false,
|
|
|
- inputValue: ''
|
|
|
+ inputValue: '',
|
|
|
+ blurTimer: null
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -65,6 +66,11 @@
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ beforeDestroy() {
|
|
|
+ if (this.blurTimer) {
|
|
|
+ clearTimeout(this.blurTimer);
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
handleMoreClick() {
|
|
|
this.$emit('show-more');
|
|
|
@@ -75,11 +81,20 @@
|
|
|
},
|
|
|
|
|
|
handleBlur() {
|
|
|
- this.isFocus = false;
|
|
|
- this.$emit('blur', this.inputValue);
|
|
|
+ // 延迟执行 blur，让点击事件先执行
|
|
|
+ this.blurTimer = setTimeout(() => {
|
|
|
+ this.isFocus = false;
|
|
|
+ this.$emit('blur', this.inputValue);
|
|
|
+ }, 150);
|
|
|
},
|
|
|
|
|
|
handleSend() {
|
|
|
+ // 清除 blur 定时器，防止 blur 事件触发
|
|
|
+ if (this.blurTimer) {
|
|
|
+ clearTimeout(this.blurTimer);
|
|
|
+ this.blurTimer = null;
|
|
|
+ }
|
|
|
+
|
|
|
if (this.inputValue.trim()) {
|
|
|
this.$emit('send', this.inputValue);
|
|
|
this.inputValue = '';
|
|
|
@@ -89,6 +104,14 @@
|
|
|
icon: 'none'
|
|
|
});
|
|
|
}
|
|
|
+
|
|
|
+ // 发送后手动让输入框失去焦点，收回键盘
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.isFocus = false;
|
|
|
+ this.$emit('blur', this.inputValue);
|
|
|
+ // 使用 uni-app 的 blur 方法收回键盘
|
|
|
+ uni.hideKeyboard();
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
handleOpenCart() {
|
|
|
@@ -214,7 +237,7 @@
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
transition: transform 0.2s ease;
|
|
|
- margin-left: 20rpx;
|
|
|
+ //margin-left: 20rpx;
|
|
|
cursor: pointer;
|
|
|
|
|
|
&:active {
|
|
|
@@ -225,8 +248,8 @@
|
|
|
margin-left: 20rpx;
|
|
|
}
|
|
|
.icon {
|
|
|
- width: 58rpx;
|
|
|
- height: 58rpx;
|
|
|
+ width: 68rpx;
|
|
|
+ height: 68rpx;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
