用uview制作一个简单的表单

最新推荐文章于 2024-08-16 11:25:57 发布

范多伦

最新推荐文章于 2024-08-16 11:25:57 发布

阅读量4.8k

点赞数

分类专栏：前端文章标签： uview

本文链接：https://blog.csdn.net/u010261924/article/details/119647056

版权

前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

这个示例展示了如何使用uView UI库创建一个包含头像、昵称和性别的用户信息编辑表单。用户可以上传头像，输入昵称，并从下拉列表中选择性别。性别数据是从一个包含男、女选项的列表中选取。当用户点击保存修改按钮时，会检查昵称是否为空，然后调用接口更新用户信息。

摘要由CSDN通过智能技术生成

<view class="content">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item label-width="75%" :label-position="labelPosition" label="头像" prop="avatar" >
					<u-avatar :src="pic" size="140" @click="uploadpic"></u-avatar>
				</u-form-item>
				<u-form-item label-width="70%" label-align="left" :label-position="labelPosition" label="昵称" prop="nickname">
					<u-input :border="border" placeholder="昵称" v-model="model.nickname" type="text" input-align="center"></u-input>
				</u-form-item>
				<u-form-item>
					<view class="width-92">
					<u-section title="性别" :sub-title="model.gendername" :bold="false" :show-line="false" @click="model.gendershow = true">
					
					</u-section>
					</view>
				</u-form-item>
			</u-form>
</view>
<view class="btn-wrapper">
	<u-button hover-class='other-button-hover'  @click="updateUser" data-name="updateinfo" size="default" type="warning">保存修改</u-button>
</view>

<u-select :default-value="defaultValue" model="single-column" v-model="model.gendershow" :list="genders" @confirm="confirm" @cancel="cancel"></u-select>

以上是view的代码。

.content{padding:20rpx;}.w70{width:70%;}

.btn-wrapper {
		margin-top: 86rpx;
	    padding: 0 66rpx;
		button {
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			margin-bottom: 40rpx;
			border-radius: 120rpx;
			font-size: 30rpx;
			&.btn1 {
				color: #fff;
			}
			&.btn2 {
				color: #666666;
				border: 1px solid #666666;
			}
		}
}

以上是css代码。

genders: [
	{value: '1',label: '男'},
	{value: '2',label: '女'},
],

性别数据列表：

model: {
					nickname:'',
					gendershow: false,
					gender:0,
					gendername:'',
					avatar:'',
					intro: ''
},

窗口数据定义：

uploadpic: function() {
				let that = this;
				that.$util.uploadImageOne('ajax/upload', function(res){
					that.userInfo.avatar = res.data.url;
					that.model.avatar = res.data.url;
					that.pic = that.url+res.data.url;
				});
},

上传文件代码：

updateUser: function(e) {
				let that = this;
				//console.log(that.model);
				if (!that.model.nickname) return that.$util.Tips({
					title: '用户昵称不能为空'
				});
				userEdit(that.model).then(res => {
					return that.$util.Tips({
						title: res.msg,
						icon: 'success'
					}, {
						tab: 3,
						url: 1
					});
				}).catch(msg => {
					return that.$util.Tips({	
						title: msg || '保存失败，您并没有修改'
					}, {
						tab: 3,
						url: 1
					});
				});
			}

提交接口代码。

以上代码用uView实现了一个简单的form包含用户头像，昵称，性别。性别是简单的下拉列表。