基于vux组件库的验证码输入请求组件

基于vux组件库的验证码输入请求组件

在登录，改密码，注册等需要用到手机验证码的情况下，我们经常用到发送并接受验证码的模块。基于vux时，虽然已经很便捷了，但是在多次复用时，还是不够便捷。需要XInput, XButton等组件。还有一堆变换按钮样式、文字及倒计时的逻辑代码。十分复杂繁琐。所以就想着在vux的基础上，再次抽象出该组件。

话不多说，样例如下：

引用该模块代码如下：

<group>
	<GetSMSCode 
		:enable="enable" 
		:countDownTime="time" 
		v-model="inputData" 
		@request="requestSMSCode" 
		placeholder="请输入验证码">
	</GetSMSCode>
</group>

下面列出需要参数：

1. enable: 即验证手机号码合法性的结果。Boolean类型，默认为false，可选参数true
2. countDownTime: 发送验证码后，倒计时时间，次时间内不能发送验证码。Number类型，默认值为60
3. @request: 在button上添加请求验证码的事件，在methods里写一个函数放在这儿就行,例如axios请求。
4. buttonText: 按钮上的汉字，String类型，默认为“发送验证码”
5. buttonType: 按钮类型，String类型，默认为default，可选参数为primary
6. v-model: 监听input输入的数据
7. max: 限制最大输入字符长度，Number类型，默认值为6
8. placeholder: 占位符，String类型，默认为空

模块代码

<template>
    <div>
        <x-input title="验证码" class="weui-vcode" v-model="inputData" @input="handleInput" :max="max" :placeholder="placeholder">
            <x-button ref="verficationCode"
                      slot="right"
                      :type="buttonTypeInit"
                      :text="buttonTextInit"
                      :disabled="buttonDisabled"
                      @click.native="initCountDown"
                      mini>
            </x-button>
        </x-input>
    </div>
</template>

<script>
import { XInput, XButton } from "vux"
export default {
    name: "GetSMSCode",
    components: {
        XInput, XButton
    },
    props: {
        buttonText: {
            type: String,
            default: "发送验证码"
        },
        buttonType: {
            type: String,
            default: "default"
        },
        countDownTime: {
            type: Number,
            default: 60
        },
        enable: {
            type: Boolean,
            default: false
        },
        max: {
            type: Number,
            default: 6
        },
        placeholder: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            // buttonText: "发送验证码"
            buttonDisabled: true,
            countDownTimeInit: 60,
            buttonTypeInit: this.buttonType,
            buttonTextInit: this.buttonText,
            inputData: ""
        }
    },
    watch: {
        enable: function(newV, oldV) {
            console.log("change")
            if (this.enable) {
                this.buttonDisabled = false;
                this.buttonTypeInit = "primary";
            } else {
                this.buttonDisabled = true;
                this.buttonTypeInit = "default";
            }
        },
        countDownTime: function(newV, oldV) {
            console.log("计时改变了")
        }
    },
    computed: {
    },
    methods: {
        initCountDown() {
            console.log("inputData" + this.inputData)
            // 自定义request事件，给button加上请求验证码的事件
            this.$emit("request")
            // console.log("点击发送验证码")
            this.buttonDisabled = true;
            this.buttonTypeInit = "default";
            this.countDown();
        },
        countDown() {
            if ( this.countDownTimeInit < 0 ) {
                this.buttonTextInit = this.buttonText;
                if (this.enable) {
                    this.buttonDisabled = false;
                    this.buttonTypeInit = "primary";
                }
                this.countDownTimeInit = this.countDownTime;
            } else {
                this.buttonTextInit = this.countDownTimeInit.toString() + "秒后重新发送";
                //console.log(this.SMSCode);
                setTimeout(() => {
                    this.countDown()
                }, 1000);
                this.countDownTimeInit--;
            }
            // return;
        },
        // v-model一般是双向绑定input事件的value数据，这里实现该组件用v-model就可以绑定input数据，不加这个代码，会失败，具体原因，不发用几行字描述，请百度。
        handleInput(e) {
            this.$emit("input", this.inputData)
        }
    },
    created() {},
    mounted() {
        this.countDownTimeInit = this.countDownTime
    }
}
</script>

<style scoped>

</style>