vue自定义input组件（一）

其实，开发一个自定义input，难度上还好，但是比较繁琐。因为input有很多状态。
首先明确一下需求：
需求是 我用这个自定义输入框 当我配置他的输入类型是什么（比如邮箱）之后 我输入文字 它会用邮箱的校验规则 校验我输入的内容是否合法 如果不合法 就提示我自定义的错误文本

首先我们比较element-ui的el-input,看看组件结构是什么样的。

生成我自己的：

这里有几个要点
1.样式上面（可以配置宽度、还有背景颜色），这两个类型的类怎么绑定到input上面

getClass() {
      let ctx = this;
      // 通过一个数组变量实现动态绑定多个类
      let inputClass = [];
      if (ctx.inputWidth) {
        switch (ctx.inputWidth) {
          case "narrow":
            inputClass.push("input-narrow");
            break;
          case "middle":
            inputClass.push("input-middle");
            break;
          case "wide":
            inputClass.push("input-wide");
            break;
        }
      }
      if (ctx.inputShowStyle) {
        switch (ctx.inputShowStyle) {
          case "normal":
            inputClass.push("input-normal");
            break;
          case "warning":
            inputClass.push("input-warning");
            break;
          case "alarm":
            inputClass.push("input-alarm");
            break;
        }
      }

      if (!ctx.checkStatus) {
        inputClass.push("check-error");
      }

      return inputClass;
    }

2.校验部分
什么事件触发校验？
@input
校验的规则是组件内部，还是开发人员（开发者用户）定义的，写在哪里，怎么用？
这里我们试着用mvc的思维来捋一捋这个思路，
视图：添加红色外边框，出现红色提示错误文字；
数据：
用户录入数据：新增的校验规则 对应的错误提示；新增输入类型；
业务数据：组件内置的 默认有的校验规则，默认错误提示；用户输入内容；默认输入类型；
校验的规则、方法：（逻辑是：遍历所有的可用校验模型。
如果报错了，停止遍历，得到错误信息
如果遍历完了也没报错，错误信息置空
）

 let baseRules = [
        {
          label: "常规用户名以及密码",
          type: "",
          message: "请输入6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种",

          val: /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/
        },
        {
          label: "密码强度的校验",
          message: "密码强度不足,最好有三种以上类型组成",

          type: "",
          val: /(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}/
        }
      ];
  for (let i = 0; i < baseRules.length; i++) {
        debugger;
        baseStatus = baseRules[i].val.test(this.inputContent);
        if (!baseStatus) {
          this.checkError = baseRules[i].message;
          break;
        }
      }
      if (baseStatus) {
        this.checkError = "";
      }

至此校验模型就可以大致完成了。
然后还有区分不同组件的校验，和用户输入的校验的合并。
遍历取值和终止遍历。
再了解正则规则的用法，就可以实现需求了。

input自定义组件要求：
1.可以配置type disabled placeholder pattern size step required等多个属性
2.配置type之后，输入框前面的文字同步修改
3.实现左边为input样式 右边为控制盘的这种模式