Early review

Vue project combat - Bilibili mobile terminal development - Part 2_0. Blog living in the storm

It's strong, prompts, code style, and content. Xiaoming: "How to say, give me an example." OK, mind this!

For example, you wrote the above countdown comment or function package, but did not call it. When you use it here, there is a direct gray text prompt. You only need to press the tab to automatically add it. Not only that, it will help you to complete your call, even Wacth monitoring or calling it when mounted will also prompt you. In a word, Ai will prompt you with the code and comments you need, and the overlap with what you need is extremely high.

Download copilot in vsCode

Utilize page translation software

Wait for the opening notification

It should be opened in 1-2 days. I don't know the specific time. Wait patiently for the notification on the inside. You can click the official website again to view it. You can pull the code when it appears as follows, and then you can use copilot .

This is the source code of the countdown I wrote, friends can try it

<template>
    <div class="login">
        <el-input v-model="phone" :suffix-icon="icon" class="inp"></el-input>
        <el-button type="primary" v-if="flag" @click="getCode" :disabled="dis">获取验证码</el-button>
        <span v-else>获取验证码还有{
   
   { num }}秒</span>
    </div>
</template>

<script>
export default {
    data() {
        return {
            phone: "",
            num: 5,
            flag: true,//按钮和验证码的切换条件
            icon: 'el-icon-close',
            dis: true
        };
    },
    methods: {
        getCode() {
            this.flag = false
            let timer = null;//每次点击都会先赋值成null，防止用户快速多次点击，造成
            //定时器队列
            timer = setInterval(() => {
                //点击按钮如果num大于等于1就--，
                if (this.num >= 1) {
                    this.num--;
                } else {//点击按钮如果没有大于等于1，说明小于1，就恢复成按钮状态
                    clearInterval(timer);
                    this.flag = true;// 时间小于5秒，按钮变成可点击状态          
                }
            }, 1000);
        },
        phoneReg() {
            let reg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/
            if (reg.test(this.phone)) {
                this.icon = 'el-icon-check'
                this.dis = false
            } else {
                this.icon = 'el-icon-close'
                this.dis = true
            }
        }

    },
    
    watch: {
        phone: {
            // deep: true,
            // immediate: true,
            handler(newVal, oldVal) {
                // 其实将phoneReg这个函数直接写在这里也可以，
                // 但是为了结构更加清晰，尽量的将逻辑抽离，这样一眼明了！
                this.phoneReg()
            },
        },
    },


    


};
</script>

<style lang="scss" scoped>
.login {
    padding: 15px;
    /deep/ .el-input__inner {
        height: 50px;
        border-radius: 5px;
    }
    /deep/ .el-input {
        width: 400px;
        margin: 15px;
    }
    /deep/ .el-icon-check {
        color: green;
        font-size: 25px;
        line-height: 50px;
    }
    /deep/ .el-icon-close:before {
        font-size: 25px;
        color: red;
        line-height: 50px;
    }
}
</style>

Conclusion:

I wish you all the best

I only write comments - let Ai write the code

This is the source code of the countdown I wrote, friends can try it

Conclusion:

Guess you like