1,定位的方式定上去

	<view class="zhuce_cont" :style="'top:'+ (navHeight)+'px'">

			<u-form :model="form" ref="uForm" class="form">

				<u-form-item labelWidth="200rpx" label="用户名:" prop="user" borderBottom>
					<view class="icon">
						*
					</view>
					<u-input v-model="form.user" class="form-item" border="none" placeholder="请填写输入姓名" />
				</u-form-item>

				

				<u-form-item labelWidth="200rpx" label="手机号:" prop="tel" borderBottom>
					<view class="icon">
						*
					</view>
					<u-input placeholder="请填写手机号" v-model="form.tel" border="none" class="form-item" />
				</u-form-item>
			</u-form>

		</view>

.zhuce_cont {
			position: relative;
			padding: 25rpx;

			.icon {
				position: absolute;
				color: red;
				top: 34rpx;
				left: -15rpx;
			}
}

2,element-ui  el-input输入框加上红色星号必填验证(vue项目)

<el-form-item label="公司名称:" prop="name">
	<el-input
	  v-model="form.name"
	  minlength="1"
	/>
</el-form-item>
data() {
    return {
      rules: {
        name:[{required: true, message: '请输入公司名称', trigger: 'blur'}]
      }
    };
  },

3,css样式设置(微信小程序使用了此方法但是部分用户反映布局错乱,不清楚是什么原因)

<style>
    label.xrequired:before {
        content: '* ';
        color: red;
    }
</style>
<label class="xrequired"> </label>
<input type="text" value=""/>


 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐