VUE_vant密码弹窗

<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;
}