需要安装element-plus组件库

用户获取验证码后按钮会被禁用，等待10秒后重新获取验证码

验证码

元素布局template部分

<template><div><el-button type="success" round :disabled="isSend" @click="countDown">{{ codeName }}</el-button></div>
</template>

script功能部分

<script setup>
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus'const isSend = ref(false); // 禁用
const codeName = ref("发送验证码");
const totalTime = 10; // 10秒倒计时
let timer = null; // 定时器
const code = ref() // 验证码存放处
const col = ref("") // 背景颜色rgb()const countDown = () => {if (isSend.value) return;isSend.value = true;codeName.value = `${totalTime}s后重新发送`;// 生成随机验证码const len = 6;const codeList = [];const chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789";const charsLen = chars.length;for (let i = 0; i < len; i++) {codeList.push(chars.charAt(Math.floor(Math.random() * charsLen)));}code.value = codeList.join("")console.log(codeList.join(""));ElMessage({message: '验证码提示---' + code.value,type: 'success',})// 倒计时let currentTime = totalTime;timer = setInterval(() => {currentTime--;codeName.value = `${currentTime}s后重新发送`;if (currentTime < 1) {clearInterval(timer);codeName.value = "重新发送验证码";isSend.value = false;}}, 1000);
};
</script>

样式这里没有

随机背景颜色

template部分

<template><div><div class="box"><h2>随机切换背景</h2></div></div>
</template>

script部分 

<script setup>
// 生成一个随机的颜色
const randomColor = () => {const r = Math.floor(Math.random() * (255 - 0) + 0);const g = Math.floor(Math.random() * (255 - 0) + 0);const b = Math.floor(Math.random() * (255 - 0) + 0);return "rgb(" + r + "," + g + "," + b + ")"
}const changecolor = () => {const box = document.querySelector('.box')const color = randomColor()box.style.backgroundColor = color
}
</script>

style部分

<style scoped>
.box {height: 100px;width: 200px;background-color: bisque;text-align: center;line-height: 100px;
}
</style>

完整代码：希望能帮助到你

<template><div><el-button type="success" round :disabled="isSend" @click="countDown">{{ codeName }}</el-button><div class="box"><h2>随机切换背景</h2></div></div>
</template><script setup>
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus'const isSend = ref(false); // 禁用
const codeName = ref("发送验证码");
const totalTime = 10; // 10秒倒计时
let timer = null; // 定时器
const code = ref() // 验证码存放处
const col = ref("") // 背景颜色rgb()const countDown = () => {if (isSend.value) return;isSend.value = true;codeName.value = `${totalTime}s后重新发送`;// 生成随机验证码const len = 6;const codeList = [];const chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789";const charsLen = chars.length;for (let i = 0; i < len; i++) {codeList.push(chars.charAt(Math.floor(Math.random() * charsLen)));}code.value = codeList.join("")console.log(codeList.join(""));ElMessage({message: '验证码提示---' + code.value,type: 'success',})ElMessage({message: '背景颜色提示---' + randomColor(),type: 'success',})changecolor()// 倒计时let currentTime = totalTime;timer = setInterval(() => {currentTime--;codeName.value = `${currentTime}s后重新发送`;if (currentTime < 1) {clearInterval(timer);codeName.value = "重新发送验证码";isSend.value = false;}}, 1000);
};// 生成一个随机的颜色
const randomColor = () => {const r = Math.floor(Math.random() * (255 - 0) + 0);const g = Math.floor(Math.random() * (255 - 0) + 0);const b = Math.floor(Math.random() * (255 - 0) + 0);return "rgb(" + r + "," + g + "," + b + ")"
}const changecolor = () => {const box = document.querySelector('.box')const color = randomColor()box.style.backgroundColor = color
}</script><style scoped>
.box {height: 100px;width: 200px;background-color: bisque;text-align: center;line-height: 100px;
}
</style>

效果展示：

加载中......