当前位置: 首页 > 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.系统优化 关掉底部菜单…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

【p2p、分布式,区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

STM32F1 本教程使用零知标准板&#xff08;STM32F103RBT6&#xff09;通过I2C驱动ICM20948九轴传感器&#xff0c;实现姿态解算&#xff0c;并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化&#xff0c;适合嵌入式及物联网开发者。在基础驱动上新增…...

SpringAI实战:ChatModel智能对话全解

一、引言&#xff1a;Spring AI 与 Chat Model 的核心价值 &#x1f680; 在 Java 生态中集成大模型能力&#xff0c;Spring AI 提供了高效的解决方案 &#x1f916;。其中 Chat Model 作为核心交互组件&#xff0c;通过标准化接口简化了与大语言模型&#xff08;LLM&#xff0…...

LangChain【6】之输出解析器:结构化LLM响应的关键工具

文章目录 一 LangChain输出解析器概述1.1 什么是输出解析器&#xff1f;1.2 主要功能与工作原理1.3 常用解析器类型 二 主要输出解析器类型2.1 Pydantic/Json输出解析器2.2 结构化输出解析器2.3 列表解析器2.4 日期解析器2.5 Json输出解析器2.6 xml输出解析器 三 高级使用技巧3…...