1***@qq.com
1***@qq.com
  • 发布:2021-05-24 20:38
  • 更新:2021-05-24 20:38
  • 阅读:843

【报Bug】ios,uni-app nvue 里 textarea 文字内容与左边界有间距,就好像有默认的 padding-left 似的,vue 里就没有

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 3.0.7

手机系统: iOS

手机系统版本号: IOS 14

手机厂商: 苹果

手机机型: iphone XS

页面类型: nvue

打包方式: 云端

项目创建方式: 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 form
textarea-box"> -->
<textarea class="formtextarea" v-model="word" maxlength="100" placeholder="*问题描述" placeholder-class="input-placeholder"/>
<!-- <text class="textarea-count form
textarea-count">{{word.length}} / 100</text> -->
<!-- </view> -->
<view class="form upload">
<view class="uploadtitle">
<text class="upload
text">上传照片</text>
<text class="uploadcomment">(选填,最多上传{{maxImgCount}}张)</text>
</view>
<view class="upload
imgs">
<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="upload
delete" @click="deleteImg(index)">删除</text>
</view>
<view v-if="imgs.length < maxImgCount" class="uploadbox" @click="chooseImg">
<image class="upload
icon" 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>

<script>
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);  
    }  
}  

</script>

<style lang="less">
@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);  
}  
// .upload {  
//  margin-top: 40rpx;  
//  width: 750rpx;  
//  align-items: flex-start;  
//  padding: 0 60rpx;  
//  .border(red);  
//  &__title {  
//      .row-center();  
//      justify-content: flex-start;  
//  }  
//  &__text {  
//      color: @color-secondary;  
//      font-size: 30rpx;  
//  }  
//  &__comment {  
//      color: @color-light-grey;  
//      font-size: 24rpx;  
//  }  
//  &__box {  
//      position: relative;  
//      margin-top: 20rpx;  
//      width: 152rpx;  
//      height: 152rpx;  
//      .border(@color-border, 2rpx);  
//      .row-center();  
//      margin-right:15rpx;  
//  }  
//  &__box-img {  
//      position: relative;  
//      width: 152rpx;  
//      height: 152rpx;  
//      border-width: 0;  
//      .row-center();  
//  }  
//  &__imgs {  
//      .row-center();  
//  }  
//  &__img {  
//      position: absolute;  
//      top: 0;  
//      right: 0;  
//      left: 0;  
//      bottom: 0;  
//  }  
//  &__delete {  
//      position: absolute;  
//      top: 6rpx;  
//      right: 6rpx;  
//      width: 60rpx;  
//      height: 28rpx;    
//      background-color: rgba(0, 0, 0, 0.5);  
//      border-radius: 16rpx;  
//      font-size: 18rpx;  
//      color: #FFFFFF;  
//      line-height: 28rpx;  
//      text-align: center;  
//  }  
//  &__icon {  
//      width: 40rpx;  
//      height: 40rpx;  
//  }  
//  &__remark {  
//      margin-top: 30rpx;  
//      width: 650rpx;  
//      height: 160rpx;  
//      background-color: #F4F4F4;  
//      padding: 10rpx;  
//      font-size: 30rpx;  
//      border-radius: 5rpx;  
//  }  

// }  

</style>

操作步骤:

见代码和贴图,通过更改文件后缀名 nvue 改成 vue 就表现正常了

预期结果:

ios 里 nvue 和 vue 里表现一致,默认文字与边界无间隔

实际结果:

ios 里 nvue 默认文字与边界有间隔

bug描述:

uni-app nvue 里 textarea 文字内容与左边界有间距,就好像有默认的 padding-left 似的,vue 里就没有
第一张是 nvue 里的,第二张是 vue 里的
编译模式我既没有勾选 fast 模式,也不是纯 nvue 项目

2021-05-24 20:38 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复