jsp button会提交form表单内容,使用div按钮不会触发,css样式控制设置仿禁用和防抖模式

结构:
                <div  :class="isDisabledFlag? 'disabled': ''" class="email_btn" @click="emailNext">下一步</div>
样式:

    .email_btn {
        display: block;
        margin: 8vw auto 0;
        width: 100%;
        height: 10.66vw;
        line-height: 10.66vw;
        border-radius: 5.33vw;
        background-color: #FF8C00;
        text-align:center;
        color: #FFF;
        font-size: 3.73vw;
    }
    .disabled {
        pointer-events: none;
        cursor: not-allowed;
        opacity: 0.5;
    }
js部分:
  emailNext: function () {
                if(!this.emailValue){
                    vant.Toast('请填写您的邮箱地址')
                    // MessageBox.info("请填写您的邮箱地址");
                    return
                } else{
                    this.isDisabledFlag = true
                    console.log(111)
                    var _this = this;
                    var email = this.emailValue;
                    $.ajax({
                        url:"${rc.contextPath}/url",
                        type: "POST",
                        data:{
                            'email':email
                        },
                        dataType : "json",
                        success:function(data){
                            if(data.errType == "0"){
                                vant.Dialog.confirm({
                                    title: '提示',
                                    confirmButtonColor: '#007AFF',
                                    cancelButtonColor: '#007AFF',
                                    message: '666'
                                }).then(function () {
                                    window.location.href=‘前往下一个页面’;
                                }).catch(function () {
                                    console.log('取消')
                                })
                            } else if(data.errType == "1"){
                                vant.Dialog.alert({
                                    title: '提示',
                                    messageAlign: 'left',
                                    message: data.errMsg
                                })
                            } else if(data.errType == "20"){
                                window.location.href=‘前往下一个页面’
                            }
                            _this.isDisabledFlag = false
                        },
                        error:function (err) {
                            console.log(err)
                            _this.isDisabledFlag = false
                        }
                    });

 

posted @ 2025-04-27 16:42  everseven  阅读(18)  评论(0)    收藏  举报