<template>
<view class="page">
<view>
<text class="title">nvue下ios内行高设置失效</text>
<textarea
class="textarea"
:class="{ 'disable-default-padding': ios }"
:placeholder="place"
:placeholder-style="style"
:adjust-position="false"
></textarea>
<text class="title">nvue下ios内存在默认padding</text>
<textarea class="textarea" :placeholder="place" :placeholder-style="style" :adjust-position="false"></textarea>
<text class="title">text组件预期表现正常</text>
<text class="textarea" :style="style">{{ place }}</text>
</view>
</view>
</template>
<script>
export default {
data() {
const sys = uni.getSystemInfoSync()
return {
place: '来分享点什么吧~记得打上具体的作品名称哦。PS:如果编辑内容过长,请先在手机备忘录等工具编辑好后,再复制发布~',
style: 'color:#ccc;line-height:44rpx;',
ios: sys.platform === 'ios'
}
}
}
</script>
<style lang="scss" scoped>
.page {
flex: 1;
width: 750rpx;
padding: 32rpx;
background: #f6f8f9;
}
.title {
margin-bottom: 24rpx;
font-size: 28rpx;
line-height: 44rpx;
color: #333;
}
.textarea {
height: 3 * 44rpx; // 3行应该刚好触底
margin-bottom: 32rpx;
font-size: 28rpx;
line-height: 44rpx;
color: #333;
background: white;
// 是否去掉 iOS 下的默认内边距 https://uniapp.dcloud.io/component/textarea
&.disable-default-padding {
padding: 2rpx -10rpx;
}
}
</style>
- 发布:2021-09-29 15:38
- 更新:2021-10-22 18:05
- 阅读:969
产品分类: uniapp/App
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: macOS Big Sur 11.6
HBuilderX类型: 正式
HBuilderX版本号: 3.2.9
手机系统: iOS
手机系统版本号: IOS 14
手机厂商: 模拟器
手机机型: iPhone 12
页面类型: vue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
运行到ios模拟器即可
运行到ios模拟器即可
预期结果:
textarea 显示padding正常或可配置,行高设置正常
textarea 显示padding正常或可配置,行高设置正常
实际结果:
textarea 显示异常
textarea 显示异常
bug描述:
nvue下ios中,textarea问题如下:
- 存在默认padding,麻烦要么去掉,要么和小程序一样可配置
- placeholder 设置行高无效
- 首次聚焦的时候,placeholder会抖动