开发过程中遇到两点问题:
- 1、修改dialog的custom-class不生效;
- 2、定制validate规则的时候,无法获取正确的this对象
对于第一个问题,可以从图中知道,虽然笔者已经设置了dialog的custom-class,实际渲染过程中也元素也确实具有custom-class中的类,但是样式就是不生效。
dialog-width的具体样式如下:
即设置了dialog框最小的宽度,为20rem,而前面的图中我们可以看出来样式完全没生效。是什么原因呢?
是由于style的scoped属性导致的,此时我们可以选择在该组件中混用全局样式和局部样式,将dialog-width写入全局样式中。
此时,dialog-width样式生效。
2、input框验证过程中this指向错误的问题。
在验证确认密码和第一次输入的密码是否相同的时候,出现报错
具体的验证规则如下:
// 定义重新输入密码的验证规则 var checkAckPassword = function(rule, value, callback) { console.log(this); if (!value) { return callback(new Error("确认密码不能为空")); } if (this.form.password != value) { return callback(new Error("两次密码不一致")); } else { callback(); } }; // 对于不同的input框应用自己定义的验证规则 rules: { username: [{ validator: checkUsername, trigger: "blur" }], password: [{ validator: checkPassword, trigger: "blur" }], ackPassword: [ { validator: checkAckPassword, trigger: "blur" } ] },
我们可以看出this的并不是指向Vue实例化的对象,因此解决问题关键在于改变验证规则中this的指向性,我们可以知道有两种解决方式:
- 1、采用bind函数;
- 2、定义验证规则函数的时候采用箭头函数,因为箭头函数中的this指向父级作用域的this对象
我们在这里采用bind函数,修改上述验证规则rules中传入的函数如下:
// 定义重新输入密码的验证规则 var checkAckPassword = function(rule, value, callback) { console.log(this); if (!value) { return callback(new Error("确认密码不能为空")); } if (this.form.password != value) { return callback(new Error("两次密码不一致")); } else { callback(); } }; // 对于不同的input框应用自己定义的验证规则 rules: { username: [{ validator: checkUsername, trigger: "blur" }], password: [{ validator: checkPassword, trigger: "blur" }], ackPassword: [ //{ validator: checkAckPassword, trigger: "blur" } // 采用bind改变this的指向性 { validator: checkAckPassword.bind(this), trigger: "blur" } ] },
此时问题得到解决。