VUE_vant密码弹窗

谁践踏了优雅 2022-12-10 08:55 296阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70_pic_center]

<van-popup v-model="passshow">
        <div class="popup">
            <div class="popup_title">
                <div class="popup_title_">请输入支付密码</div>
            </div>
            
            <van-password-input :value="password" :focused="showKeyboard" @focus="showKeyboard = true" />
            <div class="popup_yes" @click="onpaymentyes">确认</div>
        </div>
    </van-popup>
    <div class="popup_">
        
        <van-number-keyboard :show="showKeyboard" @input="onInput" @delete="onDelete" @blur="showKeyboard = false" />
    </div>

data() { 
        return { 
          passshow: false,     //密码弹窗
          showKeyboard: false,    //数字键盘显示隐藏
          
          password:"",      //支付密码
        }
     },
    methods:{ 
        //密码输入函数
        onInput(key) { 
            this.password = (this.password + key).slice(0, 6);
        },
        onDelete() { 
            this.password = this.password.slice(0, this.password.length - 1);
        },
        //确定密码
        onpaymentyes(){ 
    		console.log("确定支付"+this.password)
    	}
     }

.popup{ 
        width: 350px;
        height: 280px;
        padding-top: 16px;
        text-align: center;
        border-radius: 7px;
    }
    .van-popup--center{ 
        border-radius: 7px;
        overflow: hidden;
    }
    .popup_title{ 
        height: 49px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size:16px;
        font-family:Source Han Sans CN;
        font-weight:500;
        color:rgba(51,51,51,1);
    }
    .popup_title_{ 
        text-align: center;
    }
    .popup_yes{ 
        margin: 0 auto;
        margin-top: 50px;
    }
    .popup_{ 
        position: fixed;
        bottom: 0;
        z-index: 99999;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/9300ce33f4fa415da7def6e15080a3a9.png