短信倒计时组件

很多需要验证用户身份的地方
都需要给用户发短信
同时
为了防止自己的短信接口被恶意刷量
在用户等待的过程中
我们要给用户一个不能点击的倒计时和一个期望值
来安抚用户的心情

应用场景

当时我的应用场景是这样的：

用户需要在登陆的时候验证身份——所以我们要给他们发短信

用户要在确认账户的时候验证身份——所以我们要给他们发短信

用户要在释放资源的时候验证身份——所以我们要给他们发短信

用户就是要发短信——所以我们就是要给他们发短信

……

之前倒计时都是每个页面单独做

这样多处复用显然不现实

所以我自己撸了一个公共的倒计时组件

它的功能点是

可以自定义倒计时时长，并且在倒计时结束后，可以触发自定义操作

倒计时组件代码

<template>
    <div :class="[downClass,cname]" @click="countdown">
        <!-- 传入组件的插槽 -->
        <slot v-if="visible"></slot>//默认显示 获取验证码标签
        <!-- 倒计时 -->
        <span v-if="!visible">{{time}} s</span>//当点击后 显示倒计时标签
    </div>
</template>

<script>
    export default {
        name: "Countdown",
        data() {
            return {
                downClass: 'm-countdown',     // 组件默认样式
                visible: true,      // 可见性（默认插槽和倒计时之间相互切换）
                time: '',           // 组件内倒计时
                timer: null,        // 用于操作setInterval的指针
            }
        },
        props: {
            // 方便传入自定义样式,传入类名,在父组件内写该类名的样式
            cname: {
                type: String,
                default: '',
            },
            // 倒计时起始值
            count: {
                type: Number,
                default: 60,
            },
        },
        methods: {
            // 触发倒计时
            countdown() {
                this.visible = false;
                let count = this.count;
                this.time = count--;
                this.timer = setInterval(() => {
                    if (this.time !== 0) {
                        this.time--;
                    } else {
                        clearInterval(this.timer);
                        this.timer = null;
                        this.visible = true;
                        this.$emit('endTrigger');  // 倒计时结束触发父组件操作
                    }
                }, 1000);
            },
        }
    }
</script>

使用方法

<Countdown :count="10" @endTrigger="father" cname="cname">
      获取短信验证码
</Countdown>

<script>
import Countdown from "./components/Countdown";//引入倒计时组件
export default {
  components: {
    Countdown   //注册该组件 
  },
  methods:{
      father() {
            console.log('这个是倒计时结束触发的操作，可以不传');
        }
  }
}    
</script>

.cname {
  color: red;
}