<template>
<view class="content" style="padding-bottom: 50px;box-sizing: border-box;position: relative;height: 100vh;">
<template v-for="(message, index) in messages" :key="index">
<view class="message anchor mary" :id="''+message.id" style="width: 100%;">
<view>
<view class="nickname">
{{message.sender_nickname}}
</view>
<template v-if="message.type == 'text'">
<view class="content" :id="''+index" @longpress="msgAction(message)">
<template><rich-text class="content-text" :nodes="message.content"></rich-text></template>
</view>
</template>
</view>
</view>
</template>
<textarea style="height: 50px;border: 1px solid #8f8f94;position: absolute;bottom: 0;width: 100%;" :value="content" class="textarea__inner"
:show-confirm-bar="false"
confirm-hold disable-default-padding
placeholder="placeholder"
@input="content = $event.detail.value"
></textarea>
</view>
</template>
<script>
export default {
data() {
return {
messages: [{
content: "1",
id: 1,
sender_nickname: "佚名",
type: "text",
}],
content: ''
}
},
onLoad() {
},
onShow() {
uni.request({
url: 'https://xxxx.xx/test',
success: (res) => {
},
fail: () => {
this.messages.push({
content: "2",
id: 2,
sender_nickname: "佚名",
type: "text",
})
}
});
},
methods: {
msgAction(message){
uni.showToast({
title: 'content: '+message.content
})
}
}
}
</script>
<style>
</style>
佚名9527
- 发布：2022-05-12 11:17
- 更新：2022-05-12 11:26
- 阅读：296
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win11
HBuilderX类型： 正式
HBuilderX版本号： 3.4.7
第三方开发者工具版本号： 1.05.2201240
基础库版本号： 2.24.2
项目创建方式： HBuilderX
示例代码：
操作步骤：
<textarea :value="content" @input="content = $event.detail.value"></textarea>
textarea 输入 input 不执行
<textarea :value="content" @input="content = $event.detail.value"></textarea>
textarea 输入 input 不执行
预期结果：
textarea 输入 执行 @input方法
textarea 输入 执行 @input方法
实际结果：
textarea 输入 执行 @longpress="msgAction(message)"
textarea 输入 执行 @longpress="msgAction(message)"
bug描述：
写一个im聊天时出现的bug ( 仅在ios下出现 , ios版本15.4.1 )
textarea 输入时 @input 方法 不执行 , 会执行 @longpress="msgAction(message)"
过程:
v-for 渲染 messages 消息组 , uni.request异步获取历史消息 , textarea 输入 不执行 @input , 会执行@longpress
1 个回复
佚名9527 (作者)
描述起来有点有点绕口
<textarea :value="content" @input="content = $event.detail.value"></textarea>
临时解决的方法是 , 如果 $event.type为 input , 则将 $event.detail.value 赋值给 content
@longpress="$event.type == 'input' ? content = $event.detail.value : msgAction(message)"