<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>
- 发布:2022-06-03 22:49
- 更新:2022-08-04 15:31
- 阅读:1535
产品分类: uniapp/H5
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: windows10
HBuilderX类型: 正式
HBuilderX版本号: 3.4.7
浏览器平台: Chrome
浏览器版本: 102.0
项目创建方式: HBuilderX
示例代码:
操作步骤:
<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>
<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文字应该和单选框垂直对齐
实际结果:
生成的性别选择的label文字和单选框垂直不对齐
生成的性别选择的label文字和单选框垂直不对齐
bug描述:
uni-ui中标签和单选框的内容没有垂直对齐,请更新修改
2***@qq.com
我最后用的checkbox开启flex解决的
2022-08-04 16:09