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>