实现登录页面同意隐私协议登录功能

使用组件:elementUI中的checkbox

html部分:

<el-form :model="modelForm" :rules="rules" ref="ruleForm"><el-form-item prop="checkoutSecret"><el-checkbox v-model="modelForm.checkoutSecret" name="checkoutSecret">已阅读并同意<a class="abc" @click="clickButton">《用户隐私政策》</a></el-checkbox></el-form-item>
</el-form>

css部分:

.el-checkbox__inner{//将checkbox的边框变圆border-radius: 50%;}
.abc{color:blue;
}

data声明部分:

export default{data(){return{//定义checkoutSecret的值为falsecheckoutSecret:false,//表单数据中checkoutSecret的值为falsemodelForm:{checkoutSecret:false},//定义表单验证规则rules:{checkoutSecret:[{required:true,message:'请勾选隐私协议',trigger:'change'}]}}}
}

在登录函数触发时进行验证:

submitLogin() {this.modelForm.checkoutSecret = !this.modelForm.checkoutSecret ? null : this.modelForm.checkoutSecret//validate:对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promisethis.$refs.ruleForm.validate((v) => {console.log(v);});     //勾选用户隐私政策if (!this.modelForm.checkoutSecret) {return false;}

实现效果: