(相关资料图)

前端Vue自定义发送短信验证码弹框popup 实现剩余秒数计数 重发短信验证码， 请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13207

效果图如下：

实现代码如下:

cc-codeDialog

使用方法

HTML代码实现部分

<script>export default {data() {return {show: false}},methods: {showCodeDialog(item) {this.show = true;},closeCodeDialog(item) {this.show = false;},confirmClick(result) {console.log("result = " + JSON.stringify(result));this.show = false;}}}</script>

组件实现代码

<script>export default {props: {show: {type: Boolean,default: false},autoCountdown: {type: Boolean,default: true},phone: {type: String,default: ""},len: {type: Number,default: 6}},data() {return {codeAry: [{"val": ""}, {"val": ""}, {"val": ""}, {"val": ""},{"val": ""},{"val": ""}],currItem: 0,countdown: 60,cTimer: null,callResult: {type: 0,code: ""},suspend: false};},computed: {phoneStr() {return this.phone.substr(0, 3) + "****" + this.phone.substr(7);}},watch: {show: function() {console.log(this.show)if (this.show) {if (!this.suspend) {this.init();}} else {if (!this.suspend) {this.clearTimer();}this.clearCode();}}},methods: {init: function() {var codeAry = [];for (var i = 0; i < this.len; i++) {codeAry.push({val: ""})}this.codeAry = codeAry;this.currItem = 0;if (this.autoCountdown) {this.startTimer();}},bindKeyEvent: function(e) {var _this = this;var val = e.currentTarget.dataset.val;switch (val) {case "clear":_this.clearCode();break;case "delete":_this.deleteCode();break;default:_this.inputVal(val);break;}},inputVal: function(val) {if (this.currItem < this.len) {this.codeAry[this.currItem].val = val;this.currItem++;}if (this.currItem == this.len) {this.execuCall(1);}},clearCode: function() {this.init();},deleteCode: function() {if (this.currItem > 0) {this.codeAry[this.currItem - 1].val = "";this.currItem--;}},closeDialog: function() {this.execuCall(-1);this.$emit("closeClick");},startTimer: function() {var _this = this;if (_this.cTimer == null) {_this.cTimer = setInterval(function() {_this.countdown--;if (_this.countdown == 0) {_this.clearTimer();}}, 1000)}},clearTimer: function() {var _this = this;clearInterval(_this.cTimer);_this.cTimer = null;_this.countdown = 60;},getCodeValue: function() {var codeStr = "";this.codeAry.forEach(function(code) {codeStr += code.val;})return codeStr;},execuCall: function(type) {this.callResult.type = type;if (type == 1) {this.callResult.code = this.getCodeValue();this.clearTimer();} else {this.suspend = true;this.callResult.code = "";}this.$emit("change", this.callResult);},resend: function() {var _this = this;_this.callResult.code = "";_this.callResult.type = 0;// _this.callResult.resendCall = function() {// }_this.init();_this.$emit("change", _this.callResult);},confirmClick() {console.log("result = " + JSON.stringify(this.callResult));if (this.callResult.code.length < 6) {uni.showModal({title: "温馨提示",content: "输入短信验证码长度有误"})} else {this.$emit("confirmClick", this.callResult);}}}}</script>