实现输入框短信
验证码
功能，可以使用
Vue.js 的模板语法和组件化思想，具体
实现步骤如下：
1. 创建一个包含输入框和
发送验证码按钮的组件。
```html
<template>
<div>
<input type="text" v-model="code" />
<button @click="sendCode" :disabled="disabled">{{ buttonText }}</button>
</div>
</template>
<script>
export default {
data() {
return {
code: '',
disabled: false,
buttonText: '
发送验证码',
countdown: 60
}
},
methods: {
sendCode() {
//
发送短信
验证码
// ...
// 设置倒计时
this.disabled = true;
this.buttonText = `${this.countdown}s 后重新
发送`;
const timer = setInterval(() => {
this.countdown--;
this.buttonText = `${this.countdown}s 后重新
发送`;
if (this.countdown === 0) {
clearInterval(timer);
this.disabled = false;
this.buttonText = '
发送验证码';
this.countdown = 60;
}
}, 1000);
}
}
}
</script>
```
2. 在父组件中引入该组件，并监听子组件的输入事件。
```html
<template>
<div>
<sms-code @input="handleInput" />
<button @click="submit">提交</button>
</div>
</template>
<script>
import SmsCode from './SmsCode.
vue';
export default {
components: {
SmsCode
},
data() {
return {
phone: '',
code: ''
}
},
methods: {
handleInput(value) {
this.code = value;
},
submit() {
// 提交表单
// ...
}
}
}
</script>
```
在子组件中，使用 `v-model` 来
实现与父组件的双向数据绑定。当输入框的值发生变化时，通过 `$emit` 方法将新的值传递给父组件。
```html
<template>
<div>
<input type="text" v-model="code" @input="$emit('input', code)" />
<button @click="sendCode" :disabled="disabled">{{ buttonText }}</button>
</div>
</template>
<script>
export default {
data() {
return {
code: '',
disabled: false,
buttonText: '
发送验证码',
countdown: 60
}
},
methods: {
sendCode() {
//
发送短信
验证码
// ...
// 设置倒计时
this.disabled = true;
this.buttonText = `${this.countdown}s 后重新
发送`;
const timer = setInterval(() => {
this.countdown--;
this.buttonText = `${this.countdown}s 后重新
发送`;
if (this.countdown === 0) {
clearInterval(timer);
this.disabled = false;
this.buttonText = '
发送验证码';
this.countdown = 60;
}
}, 1000);
}
}
}
</script>
```
这样就可以
实现一个简单的输入框短信
验证码
功能了。
1282
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
最低0.47元/天 解锁文章
