前端Vue自定義發送短信驗證碼彈框popup 實作剩余秒數計數 重發短信驗證碼， 請訪問uni-app插件市場地址：https://ext.dcloud.net.cn/plugin?id=13207
效果圖如下：
實作代碼如下:
cc-codeDialog
使用方法
<!-- show:是否顯示彈框 phone:手機號 autoCountdown:自動時間秒數 len:短信驗證碼長度 @closeClick:關閉彈框 @confirmClick:確認事件 -->
<cc-codeDialog :show="show" phone="1900000000" :autoCountdown="true" :len="6" @closeClick="closeCodeDialog" @confirmClick="confirmClick"></cc-codeDialog>
HTML代碼實作部分
<template>
<view >
<button @click="showCodeDialog" style="margin-top: 39px;">發送短信驗證碼 </button>
<!-- show:是否顯示彈框 phone:手機號 autoCountdown:自動時間秒數 len:短信驗證碼長度 @closeClick:關閉彈框 @confirmClick:確認彈框 -->
<cc-codeDialog :show="show" phone="1900000000" :autoCountdown="true" :len="6" @closeClick="closeCodeDialog"
@confirmClick="confirmClick"></cc-codeDialog>
</view>
</template>
<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>
<style>
.content {
display: flex;
flex-direction: column;
background-color: aliceblue;
height: 100vh;
}
</style>
組件實作代碼
<template>
<view v-if="show" >
<view ></view>
<view >
<text @click="closeDialog()"></text>
<view >
<view >
<text>發送驗證碼</text>
</view>
<view v-if="phone!='' && phone !=null " >
<text>已發送到手機號：{{phoneStr}}</text>
</view>
</view>
<view >
<view >
<view v-for="(code,index) of codeAry" :key="index" >{{code.val}}</view>
</view>
</view>
<view >
<view v-if="countdown==60" @click="resend" >重新發送</view>
<view v-if="countdown<60" >{{countdown}}s</view>
</view>
<button style="margin-top: 20px; width: 88%;background-color: royalblue;color: white;"
@click="confirmClick">確定</button>
</view>
<view >
<view >
<view data-val="1" @click="bindKeyEvent" >1</view>
<view data-val="2" @click="bindKeyEvent" >2</view>
<view data-val="3" @click="bindKeyEvent" >3</view>
</view>
<view >
<view data-val="4" @click="bindKeyEvent" >4</view>
<view data-val="5" @click="bindKeyEvent" >5</view>
<view data-val="6" @click="bindKeyEvent" >6</view>
</view>
<view >
<view data-val="7" @click="bindKeyEvent" >7</view>
<view data-val="8" @click="bindKeyEvent" >8</view>
<view data-val="9" @click="bindKeyEvent" >9</view>
</view>
<view >
<view data-val="clear" @click="bindKeyEvent" >清空</view>
<view data-val="0" @click="bindKeyEvent" >0</view>
<view data-val="delete" @click="bindKeyEvent" >x</view>
</view>
</view>
</view>
</template>
<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>
<style scoped>
.button-item:active {
background: #d4d4d4;
}
.button-item+.button-item {
border-left: 0.1px solid #d4d4d4;
}
.button-item {
flex: 1;
padding: 14px 0px;
}
.keyboard-line+.keyboard-line {
border-top: 0.1px solid #d4d4d4;
}
.keyboard-line {
display: flex;
}
.keyboard {
background: #fff;
position: absolute;
z-index: 999;
width: 100%;
left: 0;
bottom: 0;
font-size: 17px;
}
.dialog-close {
color: #999;
height: 28px;
width: 28px;
font-size: 19px;
top: 5px;
left: 5px;
position: absolute;
}
.dialog-close:before {
content: "\2716";
}
.countdown {
color: #666;
font-size: 16px;
}
.resend {
color: #007aff;
font-size: 16px;
}
.dialog-ft {
margin-top: 10px;
}
.code-view {
display: flex;
text-align: center;
margin: 0 auto;
border-collapse: separate;
border-spacing: 10px 5px;
}
.code-item+.code-item {
margin-left: 5px;
}
.code-item {
flex: 1;
border-bottom: 1px solid #999;
padding-bottom: 2px;
height: 60upx;
display: flex;
align-items: center;
justify-content: center;
font-size: 30upx;
}
.dialog-bd {
margin-top: 5px;
}
.codedialog-subtitle {
margin-top: 5px;
padding: 5px 0px;
font-size: 15px;
line-height: 1.4;
word-wrap: break-word;
word-break: break-all;
color: #999;
}
.dialog-view {
position: fixed;
z-index: 999;
width: 70%;
max-width: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -120%);
background-color: #fff;
text-align: center;
border-radius: 3px;
overflow: hidden;
padding: 20px 10px;
}
.mask {
position: fixed;
z-index: 999;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, .6);
}
.codedialog {
z-index: 999;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
box-sizing: border-box;
text-align: center;
}
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/556095.html
標籤：其他
上一篇：前端Vue自定義驗證碼密碼登錄切換tabs選項卡標簽欄標題欄 驗證碼登錄模版 密碼登錄模版
下一篇：返回列表