当前位置: 首页 > news >正文

uniapp <textarea>组件的踩坑

1、ios真机上,textarea输入时会触发页面其他点击事件,

解决方法:把textarea封装成基础组件,绕过这个bug。

2、使用auto-height属性,安卓真机上,会导致textarea高度异常,
官方人员解释:textarea 的 auto-height 必须要在屏才能计算高度,先展示再赋值。

贴上微信社区的帖子:
https://developers.weixin.qq.com/community/develop/doc/000648f7424528e8f6de0dd4c5fc00

解决办法:把textarea封装成基础组件,dom元素切换时,通过v-if显示隐藏,触发组件onMounted,延迟auto-height赋值。

最后贴上封装的基础组件,供大家参考:

<template><!-- textarea组件 --><textareaclass="input"v-model="inputValue"rows="1":placeholder="placeholder":placeholder-style="placeholderStyle":maxlength="maxlength":disabled="disabled":auto-height="autoHeight"@input="handleInput"/>
</template><script setup>
import { ref, watch, onMounted } from 'vue';
import { getClientPlatform } from '@/utils/clientEnv';/** props-组件属性 */
const props = defineProps({// 值value: {type: String,default: ''},// 提示语placeholder: {type: String,default: '请输入'},// 提示语样式placeholderStyle: {type: String,default: ''},// 最大长度maxlength: {type: String,default: ''},// 是否禁用disabled: {type: Boolean,default: false}
});/** emits-组件事件 */
const emits = defineEmits(['update:value']);let inputValue = ref('');let autoHeight = ref(false);let platform = getClientPlatform();/** 生命周期 */
onMounted(() => {if (platform === 'ios') {console.log('platform=>', 'ios');autoHeight.value = true;} else {console.log('platform=>', 'android');// 安卓真机下,textarea高度会异常,官方人员解释:textarea在屏时,autoHeight属性才能计算高度,进行延迟赋值setTimeout(() => {autoHeight.value = true;}, 10);}
});watch(() => props.value,(newVal) => {inputValue.value = newVal;},{immediate: true}
)// 输入时触发
function handleInput(ev) {const { value } = ev.detail;emits('update:value', value);emits('change', value);
}</script><style lang='scss' scoped>
.input {padding: 0;width: 100%;min-height: 32rpx;height: auto;font-size: 26rpx;color: #333333;text-align: right;
}
</style>

相关文章:

uniapp <textarea>组件的踩坑

1、ios真机上&#xff0c;textarea输入时会触发页面其他点击事件&#xff0c; 解决方法&#xff1a;把textarea封装成基础组件&#xff0c;绕过这个bug。 2、使用auto-height属性&#xff0c;安卓真机上&#xff0c;会导致textarea高度异常&#xff0c; 官方人员解释&#xf…...

README.md 文档使用 treer 生成树形项目结构

一、前言 前后端编写 README.md 文档的时候&#xff0c;常常需要描写项目的结构&#xff0c;使用 tree 命令生成的目录又不能忽略某个目录&#xff0c;不方便。后来我找到了可以忽略某些目录的 treer命令 &#xff0c;特此记录一下: 二、使用 treer 生成项目结构 全局安装tr…...

朝花夕拾思维导图怎么画?看看这种绘制方法

朝花夕拾思维导图怎么画&#xff1f;绘制思维导图的好处有很多&#xff0c;首先它可以帮助人们更好地组织和管理知识&#xff0c;提高工作效率和学习效果。其次&#xff0c;绘制思维导图可以帮助人们更好地记忆知识点和理解知识点。总之&#xff0c;绘制思维导图可以帮助人们更…...

Python - OpenCV、OCR识别摄像头中的文字

使用Python3的OpenCV库来识别摄像头中的文字&#xff0c;以及使用OCR&#xff08;光学字符识别&#xff09;技术。 安装OpenCV库 在命令行中输入以下命令来安装OpenCV库&#xff1a; pip install opencv-python安装Tesseract OCR库 Tesseract OCR库是一种免费的光学字符识别…...

金融中的数学:贝叶斯公式

1.贝叶斯定理 贝叶斯定理是概率论中的一项重要定理&#xff0c;用于在已知某一事件的条件下&#xff0c;求另一事件发生的概率。它是根据条件概率推导出来的&#xff0c;得名于英国数学家托马斯贝叶斯。 贝叶斯定理可以表示为&#xff1a; 这个式子就是贝叶斯公式&#xff0c…...

ClickHouse单节点安装配置

四个安装包&#xff1a; 创建clickhouse目录 将安装包解压到该目录 tar -zxvf clickhouse-server-21.9.4.35.tgz -C /opt/module/clickhouse tar -zxvf clickhouse-common-static-21.9.4.35.tgz -C /opt/module/clickhouse tar -zxvf clickhouse-common-static-dbg-21.9.4.35.…...

AtcoderABC231场

A - Water PressureA - Water Pressure 题目大意 假设水压仅取决于深度&#xff0c;在深度为x米时&#xff0c;水压为x/100兆帕斯卡。 现在给定一个深度D米&#xff0c;需要计算在该深度下的水压是多少兆帕斯卡。 思路分析 直接将输入的深度除以100得到水压结果。 时间复杂…...

opengauss数据库快速安装

root执行 groupadd gs useradd -g gs gs passwd gs mkdir -p /opt/software/openGauss sudo chown gs:gs /opt/software/openGauss chmod 700 /opt/software/openGauss gs执行 上传文件到/home/gs目录下 tar -jxf openGauss-x.x.x-openEuler-64bit.tar.bz2 -C /opt/software/o…...

前端中的LocalStorage和SessionStorage

在前端开发中&#xff0c;常常需要在浏览器端保存数据&#xff0c;以便在页面刷新或跳转时能够保留数据或状态。在这种情况下&#xff0c;可以使用Web Storage API中的LocalStorage和SessionStorage来实现数据的存储。它们都是HTML5提供的本地存储解决方案&#xff0c;可以在浏…...

论文工具——写论文好用的绘图工具(甘特图+流程图+网络模型图+泳道图)

文章目录 引言正文手动画图的在线画图工具tldraw开源免费ProcessOnDraw.io 网络模型图工具NN-SVG设置参数自动生成Netron上传模型自动生成PlotNeuralNet编码生成 总结 引言 在写HiFi-GAN论文的代码阅读过程中&#xff0c;我发现仅仅通过文字来描述网络结构&#xff0c;不够详细…...

Vite构建的vue3项目修改网站标题和图标

1.准备一张.ico后缀的图片&#xff0c;这里推荐文件转换器&#xff0c;可以将常见的图片格式转为.ico格式图片。 2.修改网站标题和图标 网站的标题和图标都可以在项目根路径下的index.html下修改。 2.1 网站标题修改<title>标签体内容即可。 2.2 网站图标修改如图<…...

平安私人银行受邀慈善服务高质量发展会议,分享慈善规划服务

近日&#xff0c;中华慈善总会家风传承与慈善信托委员会成立仪式&#xff0c;以及由中华慈善总会、中国银行业协会联合发起的“慈善顾问赋能计划”启动仪式在北京举行。平安私人银行受邀参会并分享慈善规划服务&#xff0c;平安私人银行慈善业务总监王英及平安私人银行客户、“…...

MySQL主从复制、读写分离

一、前言二、主从复制原理2.1 MySQL复制类型2.2 MySQL主从复制工作过程2.3 MySQL的四种同步方式2.3.1 异步复制&#xff08;MySQL默认&#xff09;2.3.2 同步复制2.3.3 半同步复制&#xff08;企业常用&#xff09;2.3.4 增强半同步复制 2.4 MySQL主从复制延迟原因和优化方法2.…...

Redis配置与优化

目录 一、关系数据库与非关系型数据库 1、关系型数据库 2、非关系型数据库 3、关系型数据库和非关系型数据库区别 1、数据存储方式不同 2、扩展方式不同 3、对事务性的支持不同 二、Redis 1、简介 2、优点 3、缺点 4、使用场景 5、哪些数据适合放入缓存中 6、为什…...

leetCode刷题记录3-面试经典150题

文章目录 不要摆&#xff0c;没事干就刷题&#xff0c;只有好处&#xff0c;没有坏处&#xff0c;实在不行&#xff0c;看看竞赛题面试经典 150 题80. 删除有序数组中的重复项 II189. 轮转数组122. 买卖股票的最佳时机 II 不要摆&#xff0c;没事干就刷题&#xff0c;只有好处&…...

MySQL优化(面试)

文章目录 通信优化查询缓存语法解析及查询优化器查询优化器的策略 性能优化建议数据类型优化索引优化 优化关联查询优化limit分页对于varchar end mysql查询过程: 客户端向MySQL服务器发送一条查询请求服务器首先检查查询缓存&#xff0c;如果命中缓存&#xff0c;则立刻返回存…...

华为鸿蒙HarmonyOS4发布即巅峰,车机系统、多模态交互等实现突破

7 月 27 日最新消息&#xff0c;华为将于8月4日推出全新鸿蒙HarmonyOS 4.0&#xff0c;届时华为开发者大会也一并举行。 根据证券日报的报道&#xff0c;华为有关负责人在7月27日向媒体确认了以下消息。华为鸿蒙4.0将在汽车娱乐系统、多模态交互等领域实现重大突破&#xff0c;…...

Camtasia2023电脑录屏视频自动生成字幕软件

制作视频通常需要添加字幕&#xff0c;添加字幕比较麻烦的是让字幕和声音同步&#xff0c;使用好的软件可以大大提高剪辑效率&#xff0c;让视频更快制作完成。本文将给大家介绍录制视频自动生成字幕的软件设置字幕语音同步教程。 一、录屏视频自动生成字幕的软件 Camtasia是…...

List有值二次转换给其他对象报null

List<PlatformUsersData> listData platformUsersMapper.selectPlatformUserDataById(data); users.setPlatformUsersData(listData);为什么listData 有值&#xff0c;users.getPlatformUsersData&#xff08;&#xff09;仍然为空在这段代码中&#xff0c;我们假设listD…...

电脑新装系统优化,win10优化,win10美化

公司发了新的笔记本&#xff0c;分为几步做 1.系统优化,碍眼的关掉。防火墙关掉、页面美化 2.安装必备软件及驱动 3.数据迁移 4.开发环境配置 目录 目录复制 这里写目录标题 目录1.系统优化关掉底部菜单栏花里胡哨 2.安装必备软件及驱动新电脑安装360 1.系统优化 关掉底部菜单…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...