网站搭建图片,wordpress工具箱主题,windows网页制作工具,网站策划及过程1、ios真机上#xff0c;textarea输入时会触发页面其他点击事件#xff0c;
解决方法#xff1a;把textarea封装成基础组件#xff0c;绕过这个bug。
2、使用auto-height属性#xff0c;安卓真机上#xff0c;会导致textarea高度异常#xff0c; 官方人员解释#xf…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组件 --textareaclassinputv-modelinputValuerows1:placeholderplaceholder:placeholder-styleplaceholderStyle:maxlengthmaxlength:disableddisabled:auto-heightautoHeightinputhandleInput/
/templatescript 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);
}/scriptstyle langscss scoped
.input {padding: 0;width: 100%;min-height: 32rpx;height: auto;font-size: 26rpx;color: #333333;text-align: right;
}
/style
