info
This commit is contained in:
@@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<view
|
||||
class="tui-countdown__verify"
|
||||
:class="{ 'tui-verify__opacity': status > 1 && isOpacity }"
|
||||
:style="{ width: width, height: height, padding: padding, margin: margin, borderRadius: radius, fontSize: size + 'rpx', color: color, background: background }"
|
||||
:hover-class="hover && status == 1 ? 'tui-verify__opacity' : ''"
|
||||
:hover-stay-time="150"
|
||||
@tap.stop="sendCode"
|
||||
>
|
||||
{{ showText }}
|
||||
<view class="tui-verify__line" :style="{ borderWidth: borderWidth, borderColor: borderColor, borderRadius: radius }"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'tuiCountdownVerify',
|
||||
props: {
|
||||
//发送前显示文本
|
||||
text: {
|
||||
type: String,
|
||||
default: '发送验证码'
|
||||
},
|
||||
//发送中显示文本
|
||||
sendText: {
|
||||
type: String,
|
||||
default: '请稍候...'
|
||||
},
|
||||
//发送后显示文本(前面会自动加上seconds)
|
||||
countdownText: {
|
||||
type: String,
|
||||
default: 's后获取'
|
||||
},
|
||||
//倒计时秒数
|
||||
seconds: {
|
||||
type: Number,
|
||||
default: 60
|
||||
},
|
||||
//宽度
|
||||
width: {
|
||||
type: String,
|
||||
default: '182rpx'
|
||||
},
|
||||
//高度
|
||||
height: {
|
||||
type: String,
|
||||
default: '56rpx'
|
||||
},
|
||||
padding: {
|
||||
type: String,
|
||||
default: '0'
|
||||
},
|
||||
margin: {
|
||||
type: String,
|
||||
default: '0'
|
||||
},
|
||||
//圆角
|
||||
radius: {
|
||||
type: String,
|
||||
default: '6rpx'
|
||||
},
|
||||
//字体大小 rpx
|
||||
size: {
|
||||
type: Number,
|
||||
default: 24
|
||||
},
|
||||
//字体颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#5677fc'
|
||||
},
|
||||
//背景色
|
||||
background: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
},
|
||||
//边框宽度
|
||||
borderWidth: {
|
||||
type: String,
|
||||
default: '1px'
|
||||
},
|
||||
//边框颜色
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: '#5677fc'
|
||||
},
|
||||
//倒计时的时候是否改变opacity值
|
||||
isOpacity: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//是否需要点击效果
|
||||
hover: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//短信发送成功（改变数值且数值大于0表示发送成功，多次发送数值递增即可）
|
||||
successVal: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
//重置组件状态（改变数值且数值大于0，多次重置数值递增即可）
|
||||
resetVal: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
//是否默认为倒计时状态
|
||||
start:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
//自定义参数
|
||||
params: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showText: '',
|
||||
//1-发送前，2-发送中 3-发送成功，倒计时
|
||||
status: 1,
|
||||
countdownTimer: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if(this.start){
|
||||
this.doLoop();
|
||||
}else{
|
||||
this.showText = this.text;
|
||||
this.clearTimer();
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearTimer();
|
||||
},
|
||||
watch: {
|
||||
successVal(val) {
|
||||
if (val && val > 0) {
|
||||
this.doLoop();
|
||||
}
|
||||
},
|
||||
resetVal(val) {
|
||||
if (val && val > 0) {
|
||||
this.reset();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sendCode() {
|
||||
if (this.status > 1) return;
|
||||
this.clearTimer();
|
||||
this.status = 2;
|
||||
this.showText = this.sendText;
|
||||
this.$emit('send', {
|
||||
params: this.params
|
||||
});
|
||||
},
|
||||
doLoop: function() {
|
||||
this.clearTimer();
|
||||
this.status = 3;
|
||||
let seconds = this.seconds || 60;
|
||||
this.showText = seconds + this.countdownText;
|
||||
this.countdownTimer = setInterval(() => {
|
||||
if (seconds > 1) {
|
||||
--seconds;
|
||||
this.showText = seconds + this.countdownText;
|
||||
//倒计时
|
||||
this.$emit('countdown', {
|
||||
seconds: seconds,
|
||||
params: this.params
|
||||
});
|
||||
} else {
|
||||
this.reset();
|
||||
//倒计时结束
|
||||
this.$emit('end', {
|
||||
params: this.params
|
||||
});
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
//验证码发送成功
|
||||
success() {
|
||||
this.doLoop();
|
||||
},
|
||||
//重置发送组件
|
||||
reset() {
|
||||
this.clearTimer();
|
||||
this.showText = this.text;
|
||||
this.status = 1;
|
||||
},
|
||||
clearTimer() {
|
||||
clearInterval(this.countdownTimer);
|
||||
this.countdownTimer = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tui-countdown__verify {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tui-verify__opacity {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.tui-verify__line {
|
||||
position: absolute;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
transform-origin: 0 0;
|
||||
transform: scale(0.5, 0.5) translateZ(0);
|
||||
box-sizing: border-box;
|
||||
border-style: solid;
|
||||
left: 0;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user