使用uni-app给一个按钮点击后修改样式，实现样式切换
<div class="cnblogs_code"><p><template><br> <view class="box"><br> <view class="loginBox"><br> <view class="popup"><br> <view class="loginMode"><br> <view class="account" @click="isAccount" :class="!isshowAccount ? 'isAccMax': 'isAccMin'">账号登录</view> // isshowAccount :通过判断它的值来显示对应的样式<br> <view class="verification" @click="isVerification" :class="!isshowVerification ? 'isVerMin': 'isVerMax'">验证码登录</view><br> </view></p>
<p><br> <!-- 账号密码登录 --><br> <view v-show="isshowAccount" class="isshowBox"> // v-show 来控制输入框的显示与隐藏<br> <view class="inputBox"><br> <u-field<br> v-model="mobile"<br> label="手机号"<br> placeholder="请输入手机号"<br> ><br> </u-field><br> <u-field<br> v-model="code"<br> label="密码"<br> placeholder="请输入密码"<br> ><br> </u-field><br> </view><br> <u-button type="primary" @click="viewProtocol" class="denglu">登录</u-button><br> </view></p>
<p><br> <!-- 验证码登录 --><br> <br> <view v-show="isshowVerification" class="isshowBox" ><br> <view class="inputBox"><br> <u-field<br> v-model="mobile"<br> label="手机号"<br> placeholder="请输入手机号"<br> ><br> </u-field><br> <u-field<br> v-model="code"<br> label="验证码"<br> placeholder="请输入验证码"<br> ><br> <u-button size="mini" slot="right"@click="getCode">{{codeText}}</u-button><br> </u-field><br> <u-verification-code ref="uCode" @change="codeChange"></u-verification-code><br> </view><br> <u-button type="primary" @click="viewProtocol" class="denglu">登录</u-button><br> </view><br> <br> </view><br> </view><br> </view><br></template></p>
<p><script><br> export default {<br> data() {<br> return {<br> mobile: '', // 手机号<br> code: '', // 密码<br> codeText:'' ,// 模拟获取验证码<br> isshowAccount:true, // 默认显示账号密码登录<br> isshowVerification:false, // 隐藏验证码登录<br> }<br> },<br> methods: {<br> // 点击验证码<br> isVerification(){<br> this.isshowAccount = false // 隐藏账号登录<br> this.isshowVerification = true // 显示验证码登录<br> },</p>
<p><br> // 点击账号<br> isAccount() {<br> this.isshowVerification = false // 隐藏验证码登录<br> this.isshowAccount = true // 显示账号登录<br> },</p>
<p><br> // 模拟获取验证码<br> codeChange(text) {<br> this.codeText = text;<br> },<br> getCode() {<br> if(this.$refs.uCode.canGetCode) {<br> // 模拟向后端请求验证码<br> uni.showLoading({<br> title: '正在获取验证码'<br> })<br> setTimeout(() => {<br> uni.hideLoading();<br> // 通知验证码组件内部开始倒计时<br> this.$refs.uCode.start();<br> }, 1000);<br> }else {<br> this.$u.toast('倒计时结束后再发送');<br> }<br> },</p>
<p><br> // 点击登录后进行页面的跳转<br> viewProtocol() {<br> uni.navigateTo({<br> url: '/pages/index/list'<br> })<br> },<br> }<br> }<br></script></p>
<p><style lang="scss"><br> .box {<br> width: 100%;<br> height: 100%;<br> position: relative;<br> >.loginBox {<br> width: 100%;<br> height: 100%;<br> background-color: #409EFF;<br> position: fixed;<br> top: 0px;<br> left: 0px;<br> >.popup {<br> width: 315px;<br> height: 324px;<br> background-color: #FFFFFF;<br> position: absolute;<br> top: 50%;<br> left: 50%;<br> padding-left: 26px;<br> padding-right: 26px;<br> transform: translate(-50%,-50%);<br> border-radius: 10px;<br> >.loginMode {<br> width: 263px;<br> height: 31px;<br> margin-top: 36px;<br> margin-bottom: 20px;<br> border-bottom: 1px solid #F8F8F8;<br> // 控制切换登录时的样式<br> >.isAccMax {<br> font-size: 15px;<br> margin-top: 6px;<br> color: #D3D3D3;<br> }<br> >.isAccMin {<br> font-size: 18px;<br> font-weight: 600;<br> margin-top: 3px;<br> border-right: 1px solid #F8F8F8;<br> }<br> >.isVerMin {<br> font-size: 15px;<br> margin-top: 6px;<br> color: #D3D3D3;<br> }<br> >.isVerMax {<br> font-size: 18px;<br> font-weight: 600;<br> margin-top: 3px;<br> border-left: 1px solid #F8F8F8;<br> }<br> >.account, .verification{<br> width: 131px;<br> height: 33px;<br> display: inline-block;<br> text-align: center;<br> }<br> }<br> .denglu {<br> margin-top: 36px;<br> }<br> }<br> }<br> }<br></style></p>
</div>
<ul>
<li>最终实现效果：</li>
</ul>
<p><img src="https://img2020.cnblogs.com/blog/1834471/202103/1834471-20210308172602176-2001798069.png"> <img src="https://img2020.cnblogs.com/blog/1834471/202103/1834471-20210308172644615-1551500568.png"></p>
<p> </p>
<p>注意哦：我使用的是uni-app + uView 写的，记得引入一下uView，刚用不久uni-app + uView 写代码，写的不好的请多多指教，这里只是给自己做了个笔记，写的不好的地方请见谅，谢谢</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/funing-z/p/14501054.html
頁:
[1]