验证码输入框密码输入框 vue 小程序通用

置顶周亚鑫

已于 2023-03-20 08:47:02 修改

阅读量470

点赞数

分类专栏：支付宝小程序微信小程序 vue 文章标签： vue.js 小程序前端

于 2022-09-01 11:13:02 首次发布

本文链接：https://blog.youkuaiyun.com/q4717529/article/details/126639423

版权

vue 同时被 3 个专栏收录

121 篇文章

订阅专栏

微信小程序

9 篇文章

订阅专栏

支付宝小程序

7 篇文章

订阅专栏

这是一个关于Vue小程序实现验证码输入框的示例，包括模板、脚本和样式。同时，博客中还展示了使用OCR技术进行图片识别的流程，包括选择图片、读取图片为base64编码并调用OCR服务解析图片内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

验证码输入框密码输入框 vue 小程序通用

template

 <view class="input-box">
      <view
        class="code-item"
        :class="codeValue.length == 0 && inputFocus ? 'code-item-active' : ''"
        >{{ codeValue[0] }}</view
      >
      <view
        class="code-item"
        :class="codeValue.length == 1 && inputFocus ? 'code-item-active' : ''"
        >{{ codeValue[1] }}</view
      >
      <view
        class="code-item"
        :class="codeValue.length == 2 && inputFocus ? 'code-item-active' : ''"
        >{{ codeValue[2] }}</view
      >
      <view
        class="code-item"
        :class="codeValue.length == 3 && inputFocus ? 'code-item-active' : ''"
        >{{ codeValue[3] }}</view
      >
       <view
        class="code-item"
        :class="codeValue.length == 4 && inputFocus ? 'code-item-active' : ''"
        >{{ codeValue[4] }}</view
      >
      <view
        class="code-item"
        :class="codeValue.length >= 5 && inputFocus ? 'code-item-active' : ''"
        >{{ codeValue[5] }}</view
      >
      <input
        class="input-code"
        v-model="codeValue"
        :maxlength="6"
        type="tel"
        @blur="codeInputBlur"
        @focus="codeInputFocus"
        @input="codeInputChange"
      />
    </view>

script

export default {
  data() {
    return {
      time: 0,
      codeValue: "",
      inputFocus: false
    };
  },
  mounted() {
    this.getVerifyCode();
  },
  methods: {
    // 获取验证码
    getVerifyCode() {
      this.time = 120;
      const timer = setInterval(() => {
        this.time--;
        if (this.time <= 0) {
          this.time = 0;
          clearInterval(timer);
        }
      }, 1000);
    },
    // 验证码输入框input
    codeInputChange() {
      if (this.codeValue && this.codeValue.length >= 6) {
        // do soming...
      }
    },
    // 验证码输入框失去焦点
    codeInputBlur() {
      this.inputFocus = false;
    },
    // 验证码输入框获取到焦点
    codeInputFocus() {
      this.inputFocus = true;
    }
  },
  components: {
  },
  computed: {}
};

css

<style lang="scss">
.input-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 80px;
  position: relative;
  padding: 0px 15px;
  box-sizing: border-box;
  .input-code {
    width: 100%;
    height: 50px;
    position: absolute;
    left: 0px;
    top: 0px;
    box-sizing: border-box;
    color: transparent;
    background-color: transparent;
    opacity: 0;
  }
  .code-item {
    width: 80px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    border: 1px solid#D8D8D8;
    margin-right: 10px;
    color: #444;
    font-size: 34px;
  }
  .code-item-active {
    border: 1px solid#F23026;
  }
}
</style>

下面是ocr图片识别

chooseImage() {
const that = this;
Taro.chooseImage({
sizeType: [“original”, “compressed”], // 可以指定是原图还是压缩图，默认二者都有
sourceType: [“album”, “camera”], // 可以指定来源是相册还是相机，默认二者都有
success(res) {
console.log(res);
let file = res.tempFilePaths[0];
that.files = res.tempFilePaths[0];
console.log(file);
Taro.getImageInfo({
src: file,
success(imageInfo) {
var imgType = imageInfo.type;
console.log(imageInfo);
Taro.getFileSystemManager().readFile({
filePath: file, //选择图片返回的相对路径
encoding: “base64”, //这个是很重要的
success: (res) => {
//成功的回调
//返回base64格式
var base64Str =
“data:image/” + imgType + “;base64,” + res.data;
// console.log(base64Str);
var img = res.data;
console.log(img);
// that.uploadImg(base64Str);
that.uploadImg(img);
},
fail: (err) => {
console.log(err);
reject(err);
},
});
},
});
},
});
},
uploadImg(img) {
OCR01({
img_content: img,
}).then((res) => {
console.log(res);
this.name = res.name;
this.num = res.num;
setSessionStore(“name”, res.name);
setSessionStore(“num”, res.num);
});
},
chooseImage() {
const that = this;
Taro.chooseImage({
sizeType: [“original”, “compressed”], // 可以指定是原图还是压缩图，默认二者都有
sourceType: [“album”, “camera”], // 可以指定来源是相册还是相机，默认二者都有
success(res) {
console.log(res);
let file = res.tempFilePaths[0];
that.files = res.tempFilePaths[0];
console.log(file);
Taro.getImageInfo({
src: file,
success(imageInfo) {
var imgType = imageInfo.type;
console.log(imageInfo);
Taro.getFileSystemManager().readFile({
filePath: file, //选择图片返回的相对路径
encoding: “base64”, //这个是很重要的
success: (res) => {
//成功的回调
//返回base64格式
var base64Str =
“data:image/” + imgType + “;base64,” + res.data;
// console.log(base64Str);
var img = res.data;
console.log(img);
// that.uploadImg(base64Str);
that.uploadImg(img);
},
fail: (err) => {
console.log(err);
reject(err);
},
});
},
});
},
});
},
uploadImg(img) {
OCR01({
img_content: img,
}).then((res) => {
console.log(res);
this.name = res.name;
this.num = res.num;
setSessionStore(“name”, res.name);
setSessionStore(“num”, res.num);
});
},