uniapp布局

记录一下表单的样式修改常见问题:

使用uv-ui组件库:

vue 复制代码
<template>
	<view style="padding: 30rpx;">
		<uv-form :model="form" :rules="rules" ref="form" label-width="100">
			<!-- 要修改ui组件库的样式一定要在form-item外面包一层,(在form-item上面加class不生效)在required-view1下面去deep 否则就deep不生效 -->
			<view class="required-view1">
				<uv-form-item label="22222" prop="username"  >
					<uv-input v-model="form.username" placeholder="请输入姓名"  inputAlign="right"/>
				</uv-form-item>
			</view>
			<view class="required-view1">
				<uv-form-item label="照片" prop="pics">
					<uv-upload 
						:fileList="fileList" 
						name="1" 
						multiple 
						:maxCount="9" 
						@afterRead="afterRead" 
						@delete="deletePic" 
						:previewFullImage="true"
					></uv-upload>
				</uv-form-item>
			</view>
			<view class="required-view1">
				<uv-form-item label="照片" prop="pics">
					<uv-upload 
						:fileList="fileList" 
						name="1" 
						multiple 
						:maxCount="9" 
						@afterRead="afterRead" 
						@delete="deletePic" 
						:previewFullImage="true"
					></uv-upload>
				</uv-form-item>
			</view>
		</uv-form >
		<uv-button @click="submit">提交</uv-button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				fileList: [],
				form: {
					username: '',
					pics: []
				},
				rules: {
					username: [{
						required: true,
						message: '此为必填字段',
						trigger: ['blur', 'change']
					}],
					pics: {
						type: 'array',
						required: true,
						message: '请上传照片',
						trigger: ['blur', 'change']
					}
				}
			};
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(res => {
					uni.showToast({
						icon: 'success',
						title: '校验通过'
					})
				}).catch(errors => {
					uni.showToast({
						icon: 'error',
						title: '校验失败'
					})
				})
			},
			afterRead(e) {
				// 这里直接模拟上传成功,这里的真实逻辑参考uv-upload组件示例
				setTimeout(() => {
					this.fileList = [{
						url: 'https://via.placeholder.com/100x100.png/3c9cff'
					}, {
						url: 'https://via.placeholder.com/100x100.png/ff0000'
					}]
					this.form.pics = this.fileList;
					this.$refs.form.validateField('pics', err => {
						// 处理错误后的逻辑
					})
				})
			},
			deletePic(e) {
				this.fileList.splice(e.index, 1);
				this.$refs.form.validateField('pics', err => {
					// 处理错误后的逻辑
				})
			}
		}
	}
</script>


<style scoped lang="scss">
		.required-view1 {
			
			:deep(.uv-form-item__body__left__content > .uv-form-item__body__left__content__label){
				&::after{
					display: inline-block;
					content:"*";
					color:#f56c6c;
					line-height: 9rpx;
				}
			}
			
			:deep(.uv-upload__wrap){
				//修改水平方向布局
				flex-direction: row-reverse;
			}
			:deep(.uv-upload__button){
				margin: unset;
			}
			
		}

</style>
相关推荐
shadouqi2 小时前
问题1:uniapp在pages样式穿刺没有问题,在components组件中样式穿刺小程序不起效果
小程序·uni-app
草字2 小时前
uniapp 如果进入页面输入框自动聚焦,此时快速返回页面或者跳转到下一个页面,输入法顶上来的页面出现半屏的黑屏问题。
java·前端·uni-app
weixin_ab2 小时前
uni-app,uni.navigateTo
uni-app
烂笔头儿@2 小时前
uniapp使用谷歌地图获取位置
uni-app
韩召华2 小时前
uniapp实现微信小程序导航功能
微信小程序·uni-app·notepad++
博主逸尘2 小时前
uniApp实战六:Echart图表集成
java·uni-app·php
脑袋大大的3 小时前
uni-app x开发避坑指南:拯救被卡顿的UI线程!
开发语言·前端·javascript·vue.js·ui·uni-app·uts
不爱说话郭德纲7 小时前
为了满足产品和设计,我撸了一个校准器ElkCalibrate📏
前端·vue.js·uni-app
2501_9159090610 小时前
iOS电池寿命与App能耗监测实战 构建完整性能监控系统
android·ios·小程序·https·uni-app·iphone·webview
普宁彭于晏1 天前
uni-app switch(开关选择器) BUG
uni-app·bug