vue iview 获取验证码倒计时封装js

1、在uilts文件中新建一个新的js文件命名为sendVerifyCode

export default {
  data() {
    return {
      disabled: false,
      text: "获取验证码"
    };
  },
  methods: {
    sendCode() {
      if (this.disabled) return;
      this.disabled = true;
      let n = 60;
      this.text = "剩余 " + n + "s";
      const run = setInterval(() => {
        n = n - 1;
        if (n < 0) {
          clearInterval(run);
        }
        this.text = "剩余 " + n + "s";
        if (this.text < "剩余 " + 0 + "s") {
          this.disabled = false;
          this.text = "重新获取";
        }
      }, 1000);
    }
  }
}

2、在需要用到的vue文件中使用方法入下

sendVerifyCode
<template>
	<div>
		<Form>
			<FormItem label="常用手机号" prop="phone">
				<div>
						<Input  v-model="form.phone" style="width:301px" placeholder="请输入常用手机号"></Input >
						<Button class="code" :disabled="disabled" :class="disabled === true ? 'hk-disabled' : ''" @click="code">
							{{ text }}
						</Button>
					</div>
					<div class="input-tips">用于接收重要管理信息及日常操作验证码</div>
			</FormItem>
		</Form>
	</div>
</template>
<script>
	import sendVerifyCode from '@/utils/sendVerifyCode.js'
	export default {
		mixins: [sendVerifyCode],
		code() {
			let that = this;
			if (!that.form.phone) return that.$message({
				message: '请填写手机号码'
			});
			if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.form.phone)) return that.$message({
				message: '请输入正确的手机号码'
			});
			// 获取二维码成功，调用此方法
			that.sendCode();
		},
	}
</script>

element-ui中使用也是一样的
记录一下好的封装，学无止境，加油！！！！