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;
}
回到顶部