elementUI中dialog踩坑

开发过程中遇到两点问题：

• 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" }
        ]
      },

此时问题得到解决。