1.首先下载cookie,去npm官网npmhttps://www.npmjs.com/
2. 查看package.json中是否有 "js-cookie": "^3.0.5",
在需要使用的页面中引入 import Cookies from "js-cookie"
3. 倒计时按钮 <van-button type="warning" @click="handleCode" :disabled="count != 60">{{ btnMag }}</van-button>
4. 配置
// 验证存储
const btnMag = ref('获取验证码')
const count = ref(60)
5.具体代码
// 封装倒计时
let timer: any
const downCount = () => {
timer = setInterval(() => {
--count.value
if (!count.value) {
count.value = 60
btnMag.value = '获取验证码'
clearInterval(timer)
} else {
btnMag.value = `还剩下${count.value}s`
let now = new Date().getTime()
let expiresTime = new Date(now + count.value * 1000)
Cookies.set('count', count.value, {
expires: expiresTime
})
}
}, 1000)
}
if (Cookies.get('count')) {
count.value = Cookies.get('count')
downCount()
}
6. 记得在点击倒计时事件时调用 downCount()