uni-app nvue 中 textarea 文字内容与左边界有间距问题,ios系统上尤为明显,类似默认有 padding-left,而 vue 中无此问题
uni-app nvue 中 textarea 文字内容与左边界有间距问题,ios系统上尤为明显,类似默认有 padding-left,而 vue 中无此问题
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | win10 | HBuilderX |
示例代码:
<!-- 咨询与投诉 -->
<template>
<scroll-view scroll-y="true" class="page-scroll" show-scrollbar="false">
<view class="form">
<input v-model="title" class="forminput" type="text" placeholder="*请输入标题" placeholder-class="input-placeholder" @confirm="hideKeyBoard">
<!--<view class="textarea-box formtextarea-box">-->
<textarea class="formtextarea" v-model="word" maxlength="100" placeholder="*问题描述" placeholder-class="input-placeholder"/>
<!--</view>-->
<view class="form upload">
<view class="uploadtitle">
<text class="uploadtext">上传照片</text>
<text class="uploadcomment">(选填,最多上传{{maxImgCount}}张)</text>
</view>
<view class="uploadimgs">
<view class="uploadbox uploadbox-img" v-for="(item, index) in imgs" :key="index">
<image class="uploadimg" :src="item" mode="" @click="previewImg(index)">
</image>
<text class="uploaddelete" @click="deleteImg(index)">删除</text>
</view>
<view v-if="imgs.length < maxImgCount" class="uploadbox" @click="chooseImg">
<image class="uploadicon" src="/static/images/icon_upload.png" mode="">
</image>
</view>
</view>
</view>
<button class="btn-commit" :class="{'btn-disabled': btnDisabled}" type="default" :disabled="btnDisabled || btnLocked" :loading="btnLoading" @click="commit">
<text class="btn-committext" :class="{'btn-disabledtext': btnDisabled}">提交</text>
</button>
</view>
</scroll-view>
</template>
import loginApi from '@/common/api/login.js'
import {toast, loginToken} from '@/common/helper.js'
import UploadImg from '@/common/UploadImg.js'
import api from '@/common/api/workOrder.js'
export default {
data() {
return {
imgs: [],
title: '',
word: '',
maxImgCount: 3, // 最大上传照片数量
btnLoading: false,
btnLocked: false,
uploadImg: null,
};
},
computed: {
btnDisabled() {
return !this.title || !this.word;
}
},
methods: {
hideKeyBoard() {
uni.hideKeyboard();
},
// 选择照片
chooseImg() {
this.uploadImg.chooseImg();
},
// 预览照片
previewImg(index) {
// uni.previewImage({
// current: index,
// urls: this.imgs,
// indicator: 'number',
// loop: true,
// })
this.uploadImg.previewImg(index);
},
// 删除照片
deleteImg(index) {
this.uploadImg.deleteImg(index);
},
commit() {
if (this.btnDisabled || this.btnLocked || this.btnLoading) return false;
if (this.imgs.length > 0) {
this.upload();
return false;
}
this.btnLocked = true;
this.btnLoading = true;
api.setCounselMsg({
title: this.title.trim(),
word: this.word.trim()
}).then(res => {
this.btnLoading = false;
toast('提交成功', () => {
uni.navigateBack();
});
}).catch(err => {
setTimeout(() => {
this.btnLoading = false;
this.btnLocked = false;
}, 800);
});
},
upload() {
let url = api.setCounselMsgUrl();
let formData = {
title: this.title.trim(),
word: this.word.trim()
};
this.uploadImg.upload({
url,
formData
});
},
},
onLoad() {
this.uploadImg = new UploadImg(this.maxImgCount, this.imgs);
}
}
@import '../../../common/common.less';
.page-scroll {
flex: 1;
background-color: #FFFFFF;
}
.form {
padding-top: 40rpx;
.column-center();
justify-content: flex-start;
.border(yellowgreen);
&__input {
width: 630rpx;
height: 90rpx;
.font-primary();
.border-one(bottom);
.border(red);
}
&__textarea {
width: 630rpx;
height: 200rpx;
.font-primary();
.border(green);
&-box {
width: 630rpx;
height: 240rpx;
margin-top: 30rpx;
padding: 20rpx 0;
background-color: #FFFFFF;
// .border(blue);
}
&-count {
background-color: #FFFFFF;
}
}
}
.upload {
margin-top: 40rpx;
width: 750rpx;
align-items: flex-start;
padding: 0 60rpx;
.upload();
}
.btn-commit {
margin-top: 80rpx;
.btn-width(630rpx);
}
操作步骤:
见代码和贴图,通过更改文件后缀名 nvue 改成 vue 就表现正常了
### 预期结果:
ios 里 nvue 和 vue 里表现一致,默认文字与边界无间隔
实际结果:
ios 里 nvue 默认文字与边界有间隔
### bug描述:
uni-app nvue 里 textarea 文字内容与左边界有间距,就好像有默认的 padding-left 似的,vue 里就没有
第一张是 nvue 里的,第二张是 vue 里的
编译模式我既没有勾选 fast 模式,也不是纯 nvue 项目

更多关于uni-app nvue 中 textarea 文字内容与左边界有间距问题,ios系统上尤为明显,类似默认有 padding-left,而 vue 中无此问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html
1 回复
更多关于uni-app nvue 中 textarea 文字内容与左边界有间距问题,ios系统上尤为明显,类似默认有 padding-left,而 vue 中无此问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这是一个已知的nvue textarea在iOS上的渲染差异问题。nvue使用原生渲染引擎,在iOS上textarea默认会带有内边距,而vue页面使用webview渲染则没有这个问题。
可以通过以下CSS样式来消除这个间距:
.formtextarea {
padding-left: 0;
margin-left: 0;
}
如果上述样式无效,可以尝试更具体的解决方案:
.formtextarea {
padding: 0;
margin: 0;
text-indent: 0;
}
在某些情况下,可能需要设置line-height来确保文本垂直对齐的一致性:
.formtextarea {
padding: 0;
line-height: 1.4;
}

