Vue.js实现手机号验证码登录及60s倒计时功能

"Vue.js 实现手机号和验证码登录功能，包含60秒倒计时禁用功能" 在Vue.js开发中，实现一个手机号和验证码登录的界面，通常涉及到以下几个核心知识点： 1. **表单验证**： - 在Vue实例的数据对象`data()`中定义登录表单的数据结构，例如`loginForm`，包括`phoneNumber`和`verificationCode`字段。 - 使用计算属性`phoneNumberStyle`来校验手机号码的格式。通过正则表达式`/^1[3456789]\d{9}$/`检查手机号码是否符合中国的手机号格式。 2. **状态管理**： - 定义`codeBtnWord`字段来存储获取验证码按钮的文字，如"获取验证码"。 - `waitTime`字段用于记录倒计时剩余秒数，初始值为61，表示60秒倒计时加上初始状态的一秒。 3. **计算属性与响应式**： - 计算属性`getCodeBtnDisable`用于判断获取验证码按钮是否禁用。在`get`方法中，如果`waitTime`等于61，表示倒计时结束，此时如果手机号码已输入，则按钮可点击，否则禁用。其他情况下，按钮始终禁用。 - 注意，计算属性默认只支持读取，不支持设置，因此需要添加`set`方法以在其他地方修改`getCodeBtnDisable`的值。 4. **CSS样式**： - 为了使禁用的按钮呈现灰色不可点击的状态，可以创建一个CSS类`disabled-style`，设置背景色为`#EEEEEE`，字体颜色为`#CCCCCC`，并将其应用到按钮的类列表中。 5. **事件处理**： - 在`methods`对象中定义`getCode()`方法，这是点击获取验证码按钮时调用的函数。首先，它会检查手机号码格式是否正确。如果正确，执行相应的逻辑，如发送验证码请求，并启动倒计时。 6. **倒计时逻辑**： - 在`getCode()`方法中，可以使用`setInterval`定时器来实现倒计时效果。每秒更新`waitTime`的值，直到它减到0。当`waitTime`为0时，清除定时器，并重置`codeBtnWord`为原始文字，同时利用`getCodeBtnDisable`的`set`方法恢复按钮状态。 7. **组件交互**： - 这里使用了Element UI的`el-button`组件，通过`:class`和`:disabled`属性绑定数据，使得组件的状态能够根据Vue的数据模型动态改变。 通过以上步骤，可以实现一个基本的手机号和验证码登录界面，以及60秒内无法再次点击获取验证码的倒计时功能。这种设计模式在实际项目中非常常见，可以确保用户在等待验证码期间不会误操作，提升用户体验。