2***@qq.com

发布：2022-07-14 10:09
更新：2022-07-14 10:51
阅读：620

【报Bug】textarea 在vue3 setup语法糖下问题总结

分类：uni-app

bug反馈

产品分类： uniapp/小程序/微信

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： win10

HBuilderX类型：正式

HBuilderX版本号： 3.5.1

第三方开发者工具版本号：最新

基础库版本号： 2.25.0

项目创建方式： HBuilderX

示例代码：

情况1

<view class="form-item flex align-start" v-if="ruleForm.status && ruleForm.status == 2">  
                    <view class="label">说明</view>  
                    <view class="value">  
                        <view class="reject">  
<textarea :disabled="true" v-model="ruleForm.description" placeholder-class="place"  
                            placeholder="请输入说明" />  
                        </view>  
                    </view>  
                </view>  
<view class="form-item flex align-start">  
                    <view class="label">描述</view>  
                    <view class="value">  
                        <textarea :disabled="![0,2].includes(ruleForm.status)" v-model="queryForm.description" placeholder-class="place"  
                            placeholder="请输入描述" />  
                    </view>  
                </view>

情况2

<view class="form-item flex align-center" @click.stop="handChoose('label_id')">  
                    <view class="label">案件标签</view>  
                    <view class="value">  
                        <text v-if="ruleForm.label_id_name">{{ ruleForm.label_id_name }}</text>  
                        <text class="place" v-else>请选择案件标签</text>  
                    </view>  
                    <text v-if="!isDisabled" class="cuIcon-right"></text>  
                </view>  
                <view class="form-item margin-top">  
                    <view class="label">建账图片</view>  
                    <view class="cu-form-group">  
                        <view class="grid grid-square flex-sub">  
                            <view class="bg-img" v-for="(item,index) in ruleForm.images" :key="index"  
                                @tap="ViewImage(index)">  
                                <image :src="item" mode="aspectFill"></image>  
                                <view v-if="!isDisabled" class="cu-tag bg-red" @tap.stop="DelImg(index)"  
                                    :data-index="index">  
                                    <text class='cuIcon-close'></text>  
                                </view>  
                            </view>  
                            <view class="solids" @click.stop="handChooseFile"  
                                v-if="ruleForm.images.length<9 && !isDisabled">  
                                <text class='cuIcon-cameraadd'></text>  
                            </view>  
                        </view>  
                    </view>  
                </view>  
                <view class="form-item flex align-center" @click.stop="handChoose('org_code')">  
                    <view class="label">所属社区</view>  
                    <view class="value">  
                        <text v-if="ruleForm.org_code_name">{{ ruleForm.org_code_name }}</text>  
                        <text class="place" v-else>请选择</text>  
                    </view>  
                    <text class="cuIcon-right" v-if="organizationOptions.length > 1 && !isDisabled"></text>  
                </view>  

                <view class="form-item flex align-start">  
                    <view class="label">文字说明</view>  
                    <view class="value">  
                        <textarea :disabled="isDisabled" v-model="ruleForm.description" placeholder-class="place"  
                            placeholder="请输入说明" />  
                    </view>  
                </view>  
                               <u-select v-model="show" :list="list" zIndex="4" @confirm="confirmChange"></u-select>

操作步骤：

新建vue3项目-> 创建.vue文件-> 使用语法糖函数

<script setup>  
import { ref } from "vue"  
const ruleForm = ref({  
    images: [],  
})  
const queryForm = ref({})  
</script>

预期结果：

当两个textarea标签的时候, v-model绑定不同变量,一个有默认值禁用,另一个可输入, 输入后其他的不会改变

当前其他弹框或选项时, 不弹出选择框或者选择图片

实际结果：

另外一个textarea根据发生改变

值发生改变时打开了选择图片或下拉选择框

bug描述：

当两个textarea标签的时候, v-model绑定不同变量,一个有默认值禁用,另一个可输入, 输入后另外一个会跟着改变, 仅在IOS环境下出现,安卓和模拟器正常
当前页面有选择图片和选择类型select时, textarea值改变会触发选择图片或者打开select选择框. , 仅在IOS环境出现,安卓和模拟器正常

2022-07-14 10:09 负责人:无分享

2 个回复

DCloud_UNI_WZF

示例1中的代码并没有两个 textarea 如果把 <view class="reject"> 这里换成 textarea，则情况1 和情况 2 是同一个原因造成的
这个问题部分原因是因为 textarea组件在 iOS 真机下无法动态切换绑定 input 事件 uni-app issues 微信开放社区反馈
一个绕过的方法是让绑定事件的动态dom 和 textarea 同时渲染，比如：

<template v-if="tag">  
  // 绑定事件的动态dom 或 textarea  
<template>

或者将 textarea 放到绑定事件的动态dom 前面

2***@qq.com (作者)

示例1 因为我这里那个位置确定是静态展示的,就临时给去掉了,发布缺陷的时候忘记修改回去了

2022-07-14 10:43

2***@qq.com (作者)

临时解决方法

    <textarea v-model="queryForm.description"  
                            placeholder-class="place" placeholder="请输入描述" @focus="textFocus = true" @blur="textFocus = false" />

import { ref } from "vue"  
const textFocus = ref(false)  
const handChooseFile = () => {  
   if(textFocus.value) return  
   // TODO 选择图片  
}

要回复问题请先登录或注册

【报Bug】textarea 在vue3 setup语法糖下问题总结

情况1

情况2

操作步骤：

新建vue3项目-> 创建.vue文件-> 使用语法糖函数

`<script setup> import { ref } from "vue" const ruleForm = ref({ images: [], }) const queryForm = ref({}) </script>`

预期结果：

当两个textarea标签的时候, v-model绑定不同变量,一个有默认值禁用,另一个可输入, 输入后其他的不会改变

当前其他弹框或选项时, 不弹出选择框或者选择图片

实际结果：

另外一个textarea根据发生改变

值发生改变时打开了选择图片或下拉选择框

bug描述：

2 个回复

公告

相关问题

【报Bug】textarea 在vue3 setup语法糖下问题总结

情况1

情况2

操作步骤： 新建vue3项目-> 创建.vue文件-> 使用语法糖函数 <script setup> import { ref } from "vue" const ruleForm = ref({ images: [], }) const queryForm = ref({}) </script>

预期结果： 当两个textarea标签的时候, v-model绑定不同变量,一个有默认值禁用,另一个可输入, 输入后其他的不会改变 当前其他弹框或选项时, 不弹出选择框或者选择图片

实际结果： 另外一个textarea根据发生改变 值发生改变时打开了选择图片或下拉选择框

bug描述：

与内容相关的链接

2 个回复

公告

相关问题

操作步骤：

新建vue3项目-> 创建.vue文件-> 使用语法糖函数

`<script setup> import { ref } from "vue" const ruleForm = ref({ images: [], }) const queryForm = ref({}) </script>`

预期结果：

当两个textarea标签的时候, v-model绑定不同变量,一个有默认值禁用,另一个可输入, 输入后其他的不会改变

当前其他弹框或选项时, 不弹出选择框或者选择图片

实际结果：

另外一个textarea根据发生改变

值发生改变时打开了选择图片或下拉选择框