小程序input | 青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 9 天

封装，就是重复地造轮子，而你还乐此不疲，得意于自己的作品之中 ——麦瑟尔夫

思路

今天想记录的就是一个小程序中input输入框的封装，市面上封装已经很多了，但自己封装一个出来还是很不一样的，当看到自己封装的组件时，还是有一点自豪感滴。。。

当时写输入框的时候，原生的input组件虽然样式可以自定义，但仿照封装的思想，就多加一个view套住，后边实现功能之后，感觉可以加一个边框

目标效果就是点击输入框获取焦点的时候border加深加宽一点，失去焦点的时候就暗一点

这就是第一个功能——边框

因为多嵌套了一层view，所以要结合input的focus和blur事件,触发changeBorderColor()函数，给isFocus值做变化来实现效果

接下来一个就是这个组件用于表单填写时候，必填但没填的时候给提示，也就可以给边框加判断，就是判断是空的时候振动提示，所以就是input输入框的第二个功能——振动提示

.showShake {
  animation: shake 800ms;
}
//这里的振动动画是搜出来的，具体链接暂时忘了
@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(+2px, 0, 0);
  }
  30%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(+4px, 0, 0);
  }
  50% {
    transform: translate3d(-4px, 0, 0);
  }
}

在调用组件的页面逻辑实现needShake的变化，就实现了振动

组件代码

这里用到的图标借鉴之前icon的一种用法，

props: {
    title: {
      type: String,
      default: "",
    },
    // 修改时的
    index: {
      type: [Number, String],
      dafault: -1,
    },
    modifiable: {
      type: Boolean,
      default: true,
    },
    required: {
      type: Boolean,
      dafault: true,
    },
    value: {
      type: [String, Number],
      default: "",
    },
    limitChars: {
      type: Number,
      default: 8,
    },
    needShake: {
      type: Boolean,
      default: false,
    },
  },