一个常用的登录按钮展示

<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>  

 

标签：false,btnContent,登录,展示,color,0.3,按钮,btnStatus
来源： https://www.cnblogs.com/wt666/p/15932200.html