博览群书
博览群书
  • 发布:2022-06-03 22:49
  • 更新:2022-08-04 15:31
  • 阅读:1535

【报Bug】uni-ui中uni-forms-item的label和uni-data-checkbox不对齐

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.4.7

浏览器平台: Chrome

浏览器版本: 102.0

项目创建方式: HBuilderX

示例代码:
<uni-forms-item name="gender" label="性别" labelAlign="center">  
                <uni-data-checkbox :multiple="false" v-model="formData.gender" selectedColor="red" selectedTextColor="red" :localdata="formData.genderRange" mode="button" ></uni-data-checkbox>  
            </uni-forms-item>

操作步骤:

<template>
<view>

    <view class="avatar flex align-center justify-center">  
        <uni-file-picker v-model="imageValue" limit="1" mode="grid" fileMediatype="image"  
            :imageStyles="imageStyles">  
            <view class="avatar-seat flex align-center justify-center">头像</view>  
        </uni-file-picker>  
    </view>  
    <!-- 账户密码 -->  
    <view >  
        <uni-forms :modelValue="formData" ref="form" :rules="rules">  
            <uni-forms-item name="name">  
                <uni-easyinput :inputBorder="false" type="text" v-model="formData.name" placeholder="请输入注册用户名" class="py-1 input-bg-color"></uni-easyinput>  
            </uni-forms-item>  
            <uni-forms-item name="password">  
                <uni-easyinput type="password" :inputBorder="false" v-model="formData.password" placeholder="请输入注册密码" class="py-1 input-bg-color"></uni-easyinput>  
            </uni-forms-item>  

            <uni-forms-item name="gender" label="性别" labelAlign="center">  
                <uni-data-checkbox :multiple="false" v-model="formData.gender" selectedColor="red" selectedTextColor="red" :localdata="formData.genderRange" mode="button" ></uni-data-checkbox>  
            </uni-forms-item>  

            <button class="submit" @tap="submit">注册</button>  
        </uni-forms>  
    </view>  
</view>  

</template>

<script>
export default {
data() {
return {
imageValue: [],
imageStyles: {
height: 120,
width: 120,
border: {
width: '2rpx',
style: 'solid',
radius: '20rpx',
color: "#a5a5a5"
}
},
formData: {
name: '',
password: '',
gender:0,
genderRange:[
{"value":0,"text":"未知"},
{"value":1,"text":"男"},
{"value":2,"text":"女"},
]
},
rules: {
name: {
rules: [{
required: true,
errorMessage: '请输入注册用户名'
}, {
minLength: 3,
maxLength: 30,
errorMessage: '用户名长度在 {minLength} 到 {maxLength} 个字符',
}]
},
password: {
rules: [{
required: true,
errorMessage: '请输入注册密码'
}, {
minLength: 3,
maxLength: 30,
errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
}]
}
}
}
},
methods: {
async submit(){
try{
const res=await this.$refs.form.validate();
console.log(res);

            }catch(e){  
                console.log('表单错误:',e);  
            }  

        }  

    }  
}  

</script>

<style scoped>
.avatar {
height: 30vh;
}

.avatar-seat {  
    background-color: var(--avatar-default-color);  
    width: 100%;  
    height: 100%;  
}  
.submit{  
    width: 96vw;  
    height: 6vh;  
    text-align: center;  
}  

</style>

预期结果:

生成的性别选择的label文字应该和单选框垂直对齐

实际结果:

生成的性别选择的label文字和单选框垂直不对齐

bug描述:

uni-ui中标签和单选框的内容没有垂直对齐,请更新修改

2022-06-03 22:49 负责人:无 分享
已邀请:
2***@qq.com

2***@qq.com

这问题解决了么,我看官方的示例上也没对齐,我今天也遇到了

  • 2***@qq.com

    我最后用的checkbox开启flex解决的

    2022-08-04 16:09

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