<template>
<view>
<view class="section">
<view class="s-header">存在问题</view>
<view class="s-body">
<view class="s-item-question" v-for="(item, key) in departmentData.list" :key="key">
<view class="s-item-question-title">{{item.items}}</view>
<view class="s-item-question-content">
<view class="s-item-name">
<text>{{item.name}}</text>
</view>
<view class="s-item-button" @tap="previewImage(key)" v-if="item.pics.length > 0">查看照片</view>
</view>
</view>
</view>
</view>
<view class="section">
<view class="s-header">整改报告</view>
<view class="s-body">
<textarea cursor-spacing=40
v-model="content"
>
c***@163.com
- 发布：2022-07-13 10:36
- 更新：2022-12-16 17:38
- 阅读：428
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 10.15.7
HBuilderX类型： 正式
HBuilderX版本号： 3.4.18
第三方开发者工具版本号： 1.06.2206090
基础库版本号： 2.25.0
项目创建方式： HBuilderX
示例代码：
操作步骤：
在真机上运行微信小程序，在 textarea 中输入文本信息时
在真机上运行微信小程序，在 textarea 中输入文本信息时
预期结果：
在真机上运行微信小程序，在 textarea 中输入文本信息时应该不会调用图片预览的回调
在真机上运行微信小程序，在 textarea 中输入文本信息时应该不会调用图片预览的回调
实际结果：
在真机上运行微信小程序，当在 textarea 中输入文本信息时调用了图片预览。
在真机上运行微信小程序，当在 textarea 中输入文本信息时调用了图片预览。
bug描述：
H5与小程序开发者工具结果一致，是正常的。但真机（IOS）有问题，在 textarea 中输入信息时，调用了图片预览方法，事件类型是 input。
图片预览是绑定了@click事件，textarea 中使用了 v-model 进行双向数据绑定。
此外 data.list 长度大于1时才会出现这种bug。
这个问题部分原因是因为 textarea组件 在 iOS 真机下 无法动态切换绑定 input 事件 uni-app issues 微信开放社区反馈
一个绕过的方法是让 绑定事件的动态dom 和 textarea 同时渲染，比如：
<template v-if="tag">
// 绑定事件的动态dom 或 textarea
<template>或者将 textarea 放到 绑定事件的动态dom 前面
c***@163.com (作者)
下面是我这边的一种临时解决办法，那是否能通过 uni-app 生成代码的契机来规避此问题呢？
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return {
a: common_vendor.f($data.departmentData.list, (item, key, i0) => {
return common_vendor.e({
a: common_vendor.t(item.items),
b: common_vendor.t(item.name),
c: item.pics.length > 0
}, item.pics.length > 0 ? {
d: common_vendor.o(($event) => {
console.log("previewImage", $event);
if ($event.type == "input") {
$data.content = $event.detail.value;
return;
}
$options.previewImage(key)
})
} : {}, {
e: key
});
}),
b: $data.content,
c: common_vendor.o(($event) => {
console.log("textarea", $event);
$data.content = $event.detail.value
}),
d: common_vendor.t($data.btnText),
e: common_vendor.o((...args) => $options.bindBtn && $options.bindBtn(...args))
};
}
