踩坑总结：如何轻松驾驭 vux 之 x-input

2023-09-25 00:59:31

踩坑经历：避免 x-input 组件使用中的常见问题

问题一：校验规则不生效

起初，我使用 x-input 时，自定义的校验规则不生效。经过排查，发现问题出在校验函数的返回值上。x-input 组件要求校验函数返回一个布尔值，表示输入值是否有效，而我却误将校验函数的返回值写成了字符串，导致校验规则不生效。

解决方案：

// 错误的写法
isType: function(value) {
  return '错误';
}

// 正确的写法
isType: function(value) {
  return true; // 输入值符合规则
}

问题二：错误提示不显示

另一个问题是错误提示不显示。检查代码后发现，错误提示确实是正确的，但就是没有显示出来。后来发现，我忘记在 x-input 组件上绑定了 error-message 属性，导致错误提示无法显示。

解决方案：

<x-input error-message="输入值不符合规则" ...></x-input>

源码解读

为了更好地理解 x-input 组件的运作原理，我深入研究了它的源码：

Vue.component('x-input', {
  props: {
    value: [String, Number],
    type: {
      type: String,
      default: 'text'
    },
    required: Boolean,
    isType: Function,
    errorMessage: String
  },
  // ...省略其他代码...
  computed: {
    hasError: function() {
      if (this.required && !this.localValue) {
        return true;
      }
      if (this.isType && !this.isType(this.localValue)) {
        return true;
      }
      return false;
    }
  },
  // ...省略其他代码...
  render: function(createElement) {
    var self = this;
    var errorMessage = this.hasError ? this.errorMessage : '';
    return createElement('div', {
      class: {
        'weui-cell': true,
        'weui-cell_active': this.hasError
      }
    }, [
      // ...省略其他代码...
      createElement('span', {
        class: 'weui-label',
        style: {
          display: this.hasError ? 'inline-block' : 'none'
        }
      }, [errorMessage])
      // ...省略其他代码...
    ]);
  }
});