前言
基本上做的每个项目都会有发送验证码的需求，之前一直是遇到一次写一次方法，这次做这个需求的时候正好把这个功能封装为组件，以方便后期使用。
1，了解vue--props属性的都知道，我在props传参数的时候默认值是在你什么参数都没有传入的时候生效
2，所以这个时候需要全部都从父组件传入，也是比较灵活的做法
3，如果真的需要使用灵活的使用默认值，那就在公共得组件内使用computed计算属性,这样就可以使用默认值了，也就是下面computed的部分，但是注意页面中使用也要使用computed返回的值，不要写错
4，这里就是一个公共得button发送验证码，自己根据不同的需求写发送验证码的方法，比较灵活
这个组件将所有的参数都开放出来，达到了更加灵活的需求，适合多个场景。
这里用的vue-cli + element-ui写的，不过方法是可以用到每个框架的。
step 一，创建公共得vue组件
<!--
* @Author: 愿醒静卧忘尘谷
* @Description: 公共得灵活的发送验证码界面，使用的是vue+element-ui
* @FilePath: \src\components\Buttoncountdown\index.vue
-->
<template>
<el-button
:type="public_button_params.button_type"
:disabled="send_code_button"
@click="public_button"
>{{ public_button_params.button_text }}</el-button
>
</template>
<script>
export default {
props: {
public_button_params: {
type: Object,
default: function () {
return {
button_type: "primary", //button is type
button_text: "发送验证码", //这是按钮展示文字，因为后期会变为秒数，所以需要button_prepare_text
button_prepare_text: "发送验证码", //在变为倒计时之后需要再变回原来的文字
send_timer_coundown: 60, //倒计时
};
},
},
},
data() {
return {
send_timer: null,
send_count_down: "",
send_code_button: false,
};
},
methods: {
public_button() {
const TIME_COUNT = this.public_button_params.send_timer_coundown;
if (!this.send_timer) {
this.send_code_interface();
this.send_count_down = TIME_COUNT;
this.public_button_params.button_text = this.send_count_down + "s" + "后重新发送";
this.send_timer = setInterval(() => {
if (this.send_count_down > 0 && this.send_count_down <= TIME_COUNT) {
this.send_count_down--;
this.public_button_params.button_text = this.send_count_down + "s" + "后重新发送";
this.send_code_button = true;
} else {
this.public_button_params.button_text = this.public_button_params.button_prepare_text;
clearInterval(this.send_timer);
this.send_timer = null;
this.send_code_button = false;
}
}, 1000);
}
},
send_code_interface() {
this.$emit('interfance_code_send'); //向外分发一个方法，在组件外部发起发送验证码的接口
},
},
};
</script>
<style lang='scss' scoped>
</style>
step 二，在需要使用的页面
<template>
<publicButtonCode
:public_button_params="send_code_params"
@interfance_code_send="interfance_children_send"
></publicButtonCode>
</template>
<script>
import publicButtonCode from "@/components/Buttoncountdown"
export default {
components: { publicButtonCode },
data() {
return {
//这里的参数对比子组件内的注释
send_code_params: {
button_type: "success",
button_text: "发送验证码",
button_prepare_text: "发送验证码",
send_timer_coundown: 60,
},
};
},
methods:{
// 点击发送验证码 这里只是一个演示，就是你在接口中做你的发送验证码获取uuid之类操作
interfance_children_send() {
console.log("2222222");
// this.difference_bind = 1 绑定提现账号 2 解绑提现账号 3 申请提现
// 提现发起AGENT_BALANCE_WITHDRAW
// 提现账号绑定AGENT_CASH_ACCOUNT_BINDING
// 提现账号解绑AGENT_CASH_ACCOUNT_UNBINDING
let params_reference = {
smsBusinessTypeEnum:
this.difference_bind == 1
? "AGENT_CASH_ACCOUNT_BINDING"
: this.difference_bind == 2
? "AGENT_CASH_ACCOUNT_UNBINDING"
: "AGENT_BALANCE_WITHDRAW",
};
smsSendCode(params_reference)
.then((response) => {
console.log(response);
this.$message({
message: "验证码发送成功",
type: "success",
center: true,
duration: "2000",
});
this.Get_data_after_sending_captcha = response.data;
})
.catch((error) => {
console.log(error);
});
},
}
}
</script>
结束语
这个组件最大的好处就是比较灵活，传入所有的参数，就可以直接使用了。还有不足的会多多改进。
