使用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 + uView 写的，记得引入一下uView，刚用不久uni-app + uView 写代码，写的不好的请多多指教，这里只是给自己做了个笔记，写的不好的地方请见谅，谢谢
