使用uni-app给一个按钮点击后修改样式,实现样式切换

<template>
  <view class="box">
    <view class="loginBox">
      <view class="popup">
        <view class="loginMode">
          <view class="account" @click="isAccount" :class="!isshowAccount ? ‘isAccMax‘: ‘isAccMin‘">账号登录</view>  // isshowAccount :通过判断它的值来显示对应的样式
          <view class="verification" @click="isVerification" :class="!isshowVerification ? ‘isVerMin‘: ‘isVerMax‘">验证码登录</view>
        </view>


    <!-- 账号密码登录 -->
        <view v-show="isshowAccount" class="isshowBox">  // v-show 来控制输入框的显示与隐藏
          <view class="inputBox">
            <u-field
              v-model="mobile"
              label="手机号"
              placeholder="请输入手机号"
            >
            </u-field>
            <u-field
              v-model="code"
              label="密码"
              placeholder="请输入密码"
            >
            </u-field>
        </view>
        <u-button type="primary" @click="viewProtocol" class="denglu">登录</u-button>
      </view>


    <!-- 验证码登录 -->

      <view v-show="isshowVerification" class="isshowBox" >
        <view class="inputBox">
          <u-field
            v-model="mobile"
            label="手机号"
            placeholder="请输入手机号"
          >
          </u-field>
          <u-field
          v-model="code"
          label="验证码"
          placeholder="请输入验证码"
          >
          <u-button size="mini" slot="right" @click="getCode">{{codeText}}</u-button>
          </u-field>
          <u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
        </view>
        <u-button type="primary" @click="viewProtocol" class="denglu">登录</u-button>
      </view>

      </view>
    </view>
  </view>
</template>

<script>
export default {
    data() {
      return {
        mobile: ‘‘, // 手机号
        code: ‘‘, // 密码
        codeText:‘‘ ,// 模拟获取验证码
        isshowAccount:true, // 默认显示账号密码登录
        isshowVerification:false, // 隐藏验证码登录
      }
    },
    methods: {
      // 点击验证码
      isVerification(){
        this.isshowAccount = false // 隐藏账号登录
        this.isshowVerification = true // 显示验证码登录
      },


      // 点击账号
      isAccount() {
        this.isshowVerification = false // 隐藏验证码登录
        this.isshowAccount = true // 显示账号登录
      },


      // 模拟获取验证码
      codeChange(text) {
        this.codeText = text;
      },
      getCode() {
        if(this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
        uni.showLoading({
          title: ‘正在获取验证码‘
        })
        setTimeout(() => {
          uni.hideLoading();
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        }, 1000);
      }else {
        this.$u.toast(‘倒计时结束后再发送‘);
      }
    },


      // 点击登录后进行页面的跳转
      viewProtocol() {
        uni.navigateTo({
        url: ‘/pages/index/list‘
        })
      },
    }
  }
</script>

<style lang="scss">
.box {
    width: 100%;
    height: 100%;
    position: relative;
    >.loginBox {
       width: 100%;
       height: 100%;
       background-color: #409EFF;
       position: fixed;
       top: 0px;
       left: 0px;
       >.popup {
          width: 315px;
          height: 324px;
          background-color: #FFFFFF;
          position: absolute;
          top: 50%;
          left: 50%;
          padding-left: 26px;
          padding-right: 26px;
          transform: translate(-50%,-50%);
          border-radius: 10px;
          >.loginMode {
             width: 263px;
             height: 31px;
             margin-top: 36px;
             margin-bottom: 20px;
             border-bottom: 1px solid #F8F8F8;
          // 控制切换登录时的样式
             >.isAccMax {
                font-size: 15px;
                margin-top: 6px;
                color: #D3D3D3;
             }
              >.isAccMin {
                font-size: 18px;
                font-weight: 600;
                margin-top: 3px;
                border-right: 1px solid #F8F8F8;
             }
              >.isVerMin {
                font-size: 15px;
                margin-top: 6px;
                color: #D3D3D3;
             }
             >.isVerMax {
                font-size: 18px;
                font-weight: 600;
                margin-top: 3px;
                border-left: 1px solid #F8F8F8;
             }
             >.account, .verification{
                width: 131px;
                height: 33px;
                display: inline-block;
                text-align: center;
             }
           }
           .denglu {
               margin-top: 36px;
           }
          }
        }
      }
</style>

  • 最终实现效果:

使用uni-app给一个按钮点击后修改样式,实现样式切换            使用uni-app给一个按钮点击后修改样式,实现样式切换

 

注意哦:我使用的是uni-app + uView 写的,记得引入一下uView,刚用不久uni-app + uView 写代码,写的不好的请多多指教,这里只是给自己做了个笔记,写的不好的地方请见谅,谢谢

 

使用uni-app给一个按钮点击后修改样式,实现样式切换

上一篇:iOS删除Scene


下一篇:弱加密算法漏洞修复 SSH Weak Encryption Algorithms Supporte