第二版

uniapp 微信小程序 发送短信
增加uview防抖和接口请求

第一版

代码

<template>
  <div class="getcode">
    <span @click="getcodedjs" v-if="showText && count<=0" class="sendcode" slot="append">发送验证码</span>
    <span @click="getcodedjs" v-else-if="showText" class="sendcode" slot="append">发送验证码</span>
    <span v-else-if="!showText" class="sendcode" slot="append">{{ second }} s</span>
  </div>
</template>

<script>

export default {
  name: 'getcode',
  components: {},
  props: {
    id: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      showText: true,
      second: 60,
      count: 0,
    }
  },
  watch: {},
  mounted () {
  },
  methods: {
    getcodedjs () {
      this.second = 60
      this.showText = false
      this.count++
      this.interval = setInterval(() => {
        --this.second
        this.reset()
      }, 1000)
    },
    reset () {
      if (this.second <= 0) {
        clearInterval(this.interval)
        this.showText = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.getcode{
  font-size: 14px;
  font-family: PingFang;
  font-weight: 500;
  color: #999999;
  flex-shrink: 0;
  width: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  cursor: pointer;
}
</style>

使用定时

vue创建定时和销毁定时