记录一下表单的样式修改常见问题：
使用uv-ui组件库：
<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>
