proginn-frontend/components/ver_code.vue

<template>
  <div class="container">
    <el-input class="input" placeholder="请输入验证码" v-model="value" @input="onInput"></el-input>
    <button class="ver-btn" @click="clickBtn">{{remind}}</button>
  </div>
</template>

<script>
let remindInit = '获取验证码'
let max = 60
let interval

export default {
  data() {
    return {
      // 提示语
      remind: remindInit,
      // 读秒中
      running: false,
      value: '',
      max,
    }
  },
  methods: {
    onInput(value) {
      this.value = value
      this.$emit('change', value)
    },
    clickBtn() {
      if (this.running) return
      this.$emit('click', () => {
        this.running = true
        this.remind = `${this.max}秒`
        interval = setInterval(() => {
          this.max -= 1
          if (this.max < 1) {
            clearInterval(interval)
            this.max = max
            this.remind = remindInit
            this.running = false
          } else {
            this.remind = `${this.max}秒`
          }
        }, 1000)
      })
    },
  }
}
</script>

<style scoped>
.container {
  position: relative;
  align-items: flex-start;
}
.input {
  width: 311px;
  height: 44px;
}
.ver-btn {
  position: absolute;
  top: 11px;
  right: 8px;
  color: var(--mainColor);
  font-size: 13px;
}
</style>