提交bug
提交bug
  • 发布:2022-10-15 17:12
  • 更新:2022-10-31 16:25
  • 阅读:229

【报Bug】取消不了之前的input

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 3.6.4

手机系统: Android

手机系统版本号: Android 9.0

手机厂商: OPPO

手机机型: cph2015

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
    <!-- #ifndef APP-NVUE -->  
        <view>  
            <view class="login-bg">  
    <!-- #endif-->    

        <view class="wrap" style="display: flex;background-color: #000;;flex-direction:column; justify-content:space-between;" >  
            <ul class="input-wrap w-bg">  
                <li class="li phone">  
                    <text class="name" style="font-size: 14px;color: rgb(168, 123, 56);">登录账号</text>    
                    <input type="number" style="width: 320rpx;margin-left: 20px;color: #FFFFFF;" placeholder-style="font-size:13px" v-model="form.phone" maxlength="11" placeholder="请输入手机号/账号">  
                </li>  
                <li class="li pwd" v-if="form.loginType !=1">  
                    <text class="name" style="font-size: 14px;color: rgb(168, 123, 56);">登录密码</text>     
                    <input  v-if="form.loginType !=1" v-model="form.password"  type="password" style="width: 300rpx;margin-left: 20px;color: #FFFFFF;"  placeholder-style="font-size:13px"  placeholder="请输入密码">  
                    <text class="new-theme-color forget" style="font-size: 14px;color: rgb(168, 123, 56);padding-right: 10px;" tapmode >忘记密码?</text>  
                </li>   
                <li class="li code"   v-if=" form.loginType==1">  
                    <text class="name"  style="font-size: 14px;color: rgb(168, 123, 56);">验证码</text>  
                    <input v-if="form.loginType==1" style="width: 300rpx;margin-left: 20px;color: #FFFFFF;"  placeholder-style="font-size:13px" maxlength="6"  type="number" v-model="form.code" placeholder="请输入收到的验证码">  
                    <text class="get-code new-theme-color forget"  style="font-size: 14px;color: rgb(168, 123, 56);" data-status=0  @click="sendSmsCode">{{text}}</text>  
                </li>  
                <view style="display: flex;align-self:center;">  
                    <text @click="qiehuan" style="margin: 0 auto;border-radius: 20px; border: 1px solid #5D5C60;color: #FFFFFF;  padding-left: 10px; padding-right: 10px; padding-top:10px;padding-bottom:10px;font-weight: bold;font-size: 14px;">  
                            {{form.loginType==1?"密码登录":"验证码登录"}}  
                    </text>  

                </view>   
            </ul>   
        </view>  
    <!-- #ifndef APP-NVUE -->  
    </view>   
        </view>   
    <!-- #endif-->    

</template>  

<script>  
    var time;  
    export default {  
        data() {  
            return {  
                form:{  
                    phone:"",  
                    password:"",  
                    device_id:"",  
                    code:"",  
                    loginType:0  
                },  
                not_allowed:false,  
                text:"发送验证码",  
                msgtext:"",  
                mobileInfo:{}  
            }  
        },  
        created() {  

        },  
        methods: {  
            qiehuan(){  
                this.form.code = '';  
                this.form.password = '';  
                this.form.loginType=this.form.loginType == 0 ? 1:0;   

            },  

        }  
    }  
</script>  
<style lang="scss">  
.login-bg {  
    position: fixed;  
    top: 0;  
    left: 0;  
    width: 100vw;  
    height: 100vh;  
    /* background-image: url('../image/login_bg.jpg'); */  
    /* background-color: #EEEFF1; */  
   /* background-repeat: no-repeat;  
    background-size: 100%; */  
    padding: 10px;  
    font-size: 14px;  
    overflow-y: auto;  
    box-sizing: border-box;  
}  

.input-wrap {  
    background: rgba(0, 0, 0, 0);  
    width: calc(100% - 20px) !important;  
    margin-left: 10px !important;  
    ;  
}  

input {  
    color: #fff !important;  
}  

.new-btn {  
    /* border: 1px solid #03A9F4;; */  
    /* border: 1px solid #AAA;; */  
    font-size: 14px;  
}  

/* 第三方登录 */  
.other-login {  
    position: fixed;  
    bottom: 10vw;  
    width: calc(100vw - 20px);  
}  

.line-wrap {  
    position: relative;  
}  

.line {  
    width: 30%;  
    height: 1px;  
    background: #CCCCCC;  
}  

.line-wrap .tip {  
    color: #999999;  
    font-size: 12px;  
    padding: 0 20px;  
}  

.login-img img {  
    width: 36px;  
    margin: 15px 10px;  
}  

.input-wrap {  
    margin-top: 50vw;  
}  

/* 登录input */  
.input-wrap .li {  
    /* color: #eee; */  
    color: #253B3E;  
    padding: 12px 20px;  
    margin-right: 12px;  
    display: flex;  
    flex-direction: row;  
    align-items: center;  
    position: relative;  
    border-radius: 60px;  
    margin-bottom: 20px;  
    background: rgba(153, 149, 149, 0.466);  
}  

.input-wrap .li span {  
    width: 80px;  
}  

.input-wrap .li span.name {  
    font-weight: bold;  
}  

.input-wrap .li input {  
    padding-left: 10px;  
    /* color: #eee; */  
    color: #253B3E;  
}  

.input-wrap .li input::placeholder {  
    color: #AEB3B7;  
}  

.input-wrap .li.footer {  
    background: #AAA;  
    border-bottom: none;  
    padding: 5px 10px;  
}  

.input-wrap .li.footer span {  
    width: auto;  
}  

/* 忘记密码 */  
.input-wrap .forget {  
    position: absolute;  
    right: 10px;  
    text-align: right;  
    font-size: 12px;  
}  

/* 协议 */  
.xieyi {   
    /* color: #eee; */  
    /* color: #253B3E; */  
    color: #999999;  
    font-size: 12px;  
    /* margin: 20px 0; */  
}  

.xieyi a {  
    color: #2196f3;  
}  

.box {  
    width: 15px;  
    height: 15px;  
    margin-right: 10px;  
}  

.check .box {  
    background-image: url('@/static/image/select.png');  
    background-repeat: no-repeat;  
    background-color: #A87B38;  
    background-size: 100% 100%;  
}  

/* 下一步 */  
.next-btn {  
    background: rgba(250, 159, 202, 0.2);  
    /* color: #fff; */  
    color: #253B3E;  
    border: 1px solid;  

}  
    input{color: #FFFFFF;}  
 .login-bg {  
     background-color: #000;  
            padding: 10px 0;  
            width: 100vw;  

            /*  #ifndef APP-PLUS */  
            padding-top: 40px;  
            /* #endif */  
            /*  #ifdef APP-PLUS */  
            padding-top: 20px;  
            /* #endif */  
            image{width: 120px;height: 120px;}  
        }  
        .logo{width: 100%;justify-self: center;align-items: center;}  

        .input-wrap {  
            margin-top: 10px;  
        }  
</style>

操作步骤:

点击验证码切换

预期结果:

清空input输入方式。重新填写

实际结果:

没有清空Input

bug描述:

我想点验证码登录就取消掉上一个input。结果取消不掉。也改不了。没有注销掉上一个input。用v-show v-if都不行

2022-10-15 17:12 负责人:DCloud_UNI_GSQ 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

已记录问题后续优化,已加分感谢反馈!
临时方案:用v-if切换,$nextTick延迟一下

this.$nextTick(()=>{  
    this.form.loginType=this.form.loginType == 0 ? 1:0;   
})

该问题目前已经被锁定, 无法添加新回复