我妈已经三天没打我了 2022-07-04 17:44 采纳率: 88.2%
浏览 107
已结题

输入手机号之前,获取验证码按钮是灰色的,输入正确的手机号以后,获取验证码按钮是黄色的,这个怎么写?

img

img


<template>
  <div class="Login_bg">
    <!-- 背景图 -->
    <div class="Login_bg_img">
      <img src="../assets/images/background_code.jpg" alt="" />
    </div>
    <!-- 主要页面 -->
    <div class="Login_bg_main">
      <p class="p1">期待您的登录</p>
      <p class="p2">每天都能和不同的小伙伴讨论不同的美食</p>
      <div class="Login_bg_main_header">
        <div class="Login_bg_main_header_inp">
          <div class="Login_bg_main_header_code">
            <span>+86</span>
            <img src="../assets/images/down.png" alt="" />
          </div>
          <input type="text" name="" id="" placeholder="请输入手机号" v-model="defaultNo" />
        </div>
        <button v-bind:checked="isChecked" @click="goNext">获取验证码</button>
      </div>
      <p>账号密码登录</p>
      <p>其他方式登录</p>
      <div class="Login_bg_main_img">
        <img src="../assets/images/QQ.png" alt="" />
        <img src="../assets/images/WeChat.png" alt="" />
        <img src="../assets/images/weibo.png" alt="" />
      </div>
      <div class="Login_bg_main_last">
        <img
          src="../assets/images/hook.png"
          v-show="downIcon"
          @click="collect"
          v-bind:checked="!isChecked"
        />
        <img
          src="../assets/images/hook_red.png"
          v-show="!downIcon"
          @click="collect"
          v-bind:checked="isChecked"
        />
        <span>同意《千库用户协议》和《隐私政策》</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultNo:"",
      downIcon: true,
      isDisabled: false,
      isChecked: false,
    };
  },
  methods: {
    collect() {
      this.downIcon = !this.downIcon;
      this.isChecked = !this.isChecked;
      if (this.isChecked === true) {
        this.isDisabled = true;
      } else {
        this.isDisabled = false;
      }
    },
    goNext() {
      if (this.isDisabled) {
        this.$router.push("/");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import url("../assets/css/Login2.css");
</style>

.Login_bg {
   width: 100%;
   position: relative;
}
.Login_bg .Login_bg_img{
   width: 100%;
   font-size: 0;
}
.Login_bg .Login_bg_img img{
   width: 100%;
}

.Login_bg .Login_bg_main{
   position: absolute;
   top: 63px;
   left: 30px;
}
p{
   color: #fff;
}
.Login_bg .Login_bg_main>p:first-child{
   font-size: 35px;
}
.Login_bg .Login_bg_main p:nth-child(2){
   margin-top: 23px;
   font-size: 15px;
}
.Login_bg .Login_bg_main .Login_bg_main_header{
   margin-top: 106px;
}
.Login_bg_main_header_inp{
   position: relative;
}
.Login_bg_main_header_code{
   padding: 0;
   position: absolute;
   left: 20px;
   top: 15px;
   font-size: 18px;
   color: #fff;
   opacity: 0.8;
}
.Login_bg_main_header_code img{
   margin-left: 13px;
   width: 7px;
   /* 图片居中 */
   display: inline-block; 
   vertical-align: middle;
}
input{
   /* 去掉点击输入框高亮 */
   outline: none;
   /* 去掉输入框的外边框 */
   border:none; 
   /* 清除输入框内阴影 */
   -webkit-appearance: none;
   /* 设置边框圆角效果 */
   border-radius: 50px;
   /* 设置input的大小 */
   height: 50px;
   width: 315px;
   /* 透明度 */
   background:rgba(255, 255, 255, 0.2);
   /* 文字据左边框距离 (原意:规定文本块中首行文本的缩进)*/
   text-indent: 76px;
   color: #ffffff;
}
/* placeholder文字样式 */
input::-webkit-input-placeholder{
   font-size: 18px;
    font-weight: normal;
    color: #ffffff;
    opacity: 0.8;
   text-align: center;
}
.Login_bg .Login_bg_main .Login_bg_main_header>button{
   margin-top: 13px;
   height: 50px;
   width: 315px;
   font-size: 18px;
   border-radius: 50px;
   opacity: 0.6;
}
.Login_bg .Login_bg_main p:nth-child(4){
   margin-top: 36px;
   font-size: 14px;
}
.Login_bg .Login_bg_main p:nth-child(5){
   margin-top: 30px;
   font-size: 14px;
}
.Login_bg .Login_bg_main .Login_bg_main_img{
   width: 315px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   margin-top: 13px;
}
.Login_bg .Login_bg_main .Login_bg_main_img img{
   width: 40px;
}
.Login_bg .Login_bg_main .Login_bg_main_last{
   margin-top: 48px;
   display: flex;
}

.Login_bg .Login_bg_main .Login_bg_main_last img{
   width: 14px;
}
.Login_bg .Login_bg_main .Login_bg_main_last span{
   color: #ffffff;
   font-size: 14px;
}
  • 写回答

2条回答 默认 最新

  • 你好!机器人 2022-07-04 17:51
    关注

    监听defaultNo值

    <template>
      <div class="">
        <el-input v-model="mobile"></el-input>
        <el-button :disabled="!btnStatus">验证</el-button>
      </div>
    </template>
    <script>
      export default {
        data () {
          return {
            mobile: null,
            btnStatus: false
          }
        },
        created () {
        },
        methods: {
        },
        watch: {
          mobile (val) {
            if (val && val.length === 11) {
              this.btnStatus = true
            } else {
              this.btnStatus = false
            }
          }
        }
      }
    </script>
    
    <style lang="scss" scoped>
    
    </style>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 7月13日
  • 已采纳回答 7月5日
  • 修改了问题 7月4日
  • 创建了问题 7月4日

悬赏问题

  • ¥15 MddBootstrapInitialize2失败
  • ¥15 LCD Flicker
  • ¥15 Spring MVC项目,访问不到相应的控制器方法
  • ¥15 esp32在micropython环境下使用ssl/tls连接mqtt服务器出现以下报错Connected on 192.168.154.223发生意外错误: 5无法连接到 MQTT 代理,如何解决?
  • ¥15 关于#genesiscsheel#的问题,如何解决?
  • ¥15 Android aidl for hal
  • ¥15 STM32CubeIDE下载程序报错
  • ¥15 微信好友如何转变为会员系统?(相关搜索:小程序)
  • ¥15 c# 直接使用c++ 类库文件
  • ¥15 一个主机电脑有两个显示器,当前有两个软件主体是网页html打包的exe程序,如何通过cmd命令bat同时打开软件一个在主屏幕显示,另外一个软件在2副屏幕上显示