You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
1.8 KiB
102 lines
1.8 KiB
<template>
|
|
<text class="niu-sendcode component" :class="[border?'border_p10':'']" :disabled="isStart"
|
|
:style="{color:color,fontSize:fontSize}">
|
|
{{text}}
|
|
</text>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'NiuSendCode',
|
|
data() {
|
|
return {
|
|
timer: null,
|
|
isStart: false,
|
|
text: '获取短信验证码'
|
|
};
|
|
},
|
|
props: {
|
|
initText: {
|
|
type: String,
|
|
default: '获取验证码'
|
|
},
|
|
second: {
|
|
default: 60,
|
|
validator(val) {
|
|
return /^\d*$/.test(val);
|
|
}
|
|
},
|
|
border: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
color: {
|
|
type: String,
|
|
default: '#FFA63C'
|
|
},
|
|
fontSize: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
runText: {
|
|
type: String,
|
|
default: '重新发送 {%s}s'
|
|
},
|
|
resetText: {
|
|
type: String,
|
|
default: '重新获取'
|
|
},
|
|
value: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
methods: {
|
|
run() {
|
|
let second = this.second;
|
|
this.text = this.getText(this.second);
|
|
this.timer = setInterval(() => {
|
|
second--;
|
|
this.text = this.getText(second);
|
|
second <= 0 && this.stop();
|
|
}, 1000);
|
|
},
|
|
stop: function() {
|
|
this.text = this.resetText;
|
|
this.$emit('input', false);
|
|
this.$emit('stop', false);
|
|
clearInterval(this.timer);
|
|
},
|
|
getText(second) {
|
|
return this.runText.replace(/\{([^{]*?)%s(.*?)\}/g, second);
|
|
}
|
|
},
|
|
watch: {
|
|
value: function(val) {
|
|
this.isStart = val;
|
|
val && this.run();
|
|
}
|
|
},
|
|
mounted() {
|
|
if (this.initText) {
|
|
this.text = this.initText;
|
|
}
|
|
},
|
|
destroyed() {
|
|
this.stop();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.niu-sendcode {
|
|
|
|
// margin-bottom: 10rpx;
|
|
&.border_p10 {
|
|
line-height: normal;
|
|
border: 1px solid #FFA63C;
|
|
border-radius: 60px;
|
|
padding: 10rpx;
|
|
}
|
|
}
|
|
</style>
|
|
|