wepy2 小程序密码弹框验证码弹框模拟聚焦

最新推荐文章于 2023-02-20 11:43:15 发布

carlos.chang

最新推荐文章于 2023-02-20 11:43:15 发布

阅读量674

点赞数

分类专栏： wepy 文章标签：小程序 wepy 微信小程序

本文链接：https://blog.csdn.net/z00001993/article/details/107101296

版权

本文介绍如何在微信小程序中实现密码弹框和验证码弹窗，并自动弹出数字键盘，展示带有光标闪烁效果的输入验证码组件。通过在父组件中隐藏一个数字输入框来达到模拟聚焦的效果。

摘要由CSDN通过智能技术生成

需求：小程序中手机获取验证码后，自动弹出数字键盘，弹出输入验证码弹窗并且有光标闪烁效果

验证码弹窗组件：

<template>
<van-popup custom-style="border-radius:4px;height:460rpx;top:30%" show="{
  {showPayPwdInput}}" close-on-click-overlay="{
  {false}}" closeable bind:close="closeFn">
  <div class="code">
    <div class="input_main">
      <div class="input_tip">
        <p class="input_tip_tit">输入短信验证码</p>
        <span class="input_tip_content">验证码已发送至{
  {phoneNumber}}</span>
      </div>
      <div class="input_row" @tap="$emit('payFocus')">
        <div class="pwd_item" v-for="(item,index) in 4" :key="index" :class="{'get_focus':(value_length == index) && payFocus}">
          <div v-if="(value_length == index) && payFocus" class="cursor"></div>
          <div v-if="(value_length >= index-1)">{
  {val_arr[index]}}</div>
        </div>
      </div>
      <p v-if="isSendCode" class="input_code">{
  {time}}s后可重新获取</p>
        <p v-else class="forget_pwd" @tap="$emit('resend')">重新发送</p>
      
    </div>
  </div>
</van-popup>

</template>
<config>
{
  "navigationBarTitleText": "授权登录",
  "usingComponents": {
    "van-popup": "~@vant/popup/index",
  }
}
</config>>
<script>
import wepy from '@wepy/core';

wepy.component({
  props: {
    payFocus: {
      type: Boolean,
      default: () => {
        return []
      }
    },
    val_arr: {
      type: Array,
      default: () => {
        return []
      }
    },
    value_length: {
      type: String
    },
    showPayPwdInput: {
      type: Boolean,
      default: false
    },
    phoneNumber: {
      type: Number
    },
    countDown: {
      type: Number,
      default: 60
    }
  },
  data: {
    timeout: null,
    time: 60,
    isSendCode: true // 是否已经发送验证码
  },
  watch: {
    countDown(val) {
      if (val > 0) this.isSendCode = true
      if (val === 60) {
        this.timeDown(val)
      }
    }
  },
  methods: {
    closeFn() {
      this.$emit('closeFn', this.isSendCode ? this.time : null);
    },
    // 倒计时
    timeDown(time) {
      this.timeout = setInter