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>
相关推荐
米粒宝的爸爸20 小时前
uniapp在app端,在导航栏设置自定义按钮
uni-app
dssxyz20 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
xw521 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !21 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
颜渊呐1 天前
uniapp中APPwebview与网页的双向通信
前端·uni-app
白杨木影子被拉长1 天前
多状态映射不同样式(scss语法)
vue.js·uni-app
一念杂记1 天前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
aklry1 天前
uniapp三步完成生成一维码图片
uni-app
雪芽蓝域zzs2 天前
uniapp 国密sm2加密
uni-app
打不着的大喇叭2 天前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app