一个常用的登录按钮展示

<template>

    <div>

        <button class="btns" @click="gobtn" :disabled="btnStatus">{{btnContent}}</button>

    </div>

</template>

<script>

export default {

    data() {

        return {

            btnContent: "登录",

            btnStatus: false,

        };

    },

 methods: {

        gobtn() {

            this.btnStatus = true;

            this.btnContent = "loading ...";

            console.log("登录中");

            let btnTime = setTimeout(() => {

                this.btnStatus = false;

                this.btnContent = "登录";

                clearTimeout(btnTime);

            }, 1000);

        },

    },

};

</script>

<style lang="scss" scoped>

.btns {

    margin: 50px auto;

    width: 150px;

    height: 50px;

    background-color: #0088f0;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;

    font-size: 17px;

    border-radius: 12px;

    cursor: pointer;

    border: none;

    transition: 0.3s;

}

button:disabled {

    transition: 0.3s;

    background-color: #0088f087;

    color: #fff;

    cursor: default;

}

</style>