vue输入支付密码调起键盘功能

直接上Demo

<template>
    <div>
        <div @click="jump">点击付款</div>
        <div class="bg">
            <div class="pay-tool">
                <div class="pay-tool-title border-bottom">
                    <span class="icon icon-back" @click="backHandle"></span><strong>请输入交易密码</strong>
                </div>
                <div class="pay-tool-content">
                    <div class="pay-tool-inputs">
                        <div class="item" v-for="(i,index) in items" :key="index">
                            <span class="icon_dot" v-if="password[i]"></span>
                        </div>
                    </div>
                    <div class="pay-tool-link">
                        <router-link class="link" to="/getP">忘记密码？</router-link>
                    </div>
                </div>
                <div class="pay-tool-keyboard">
                    <ul>
                        <li @click="keyUpHandle($event)" v-for="(val,index) in keys" :key="index">
                        {{ val }}
                        </li>
                        <li class="del" @click="delHandle">
                            <span class="icon-del">删除</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
    </div>
</template>

关注我的微信公众号【前端基础教程从0开始】，加我微信，可以免费为您解答问题。回复“1”，拉你进程序员技术讨论群。回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”，领取300G前端，Java，微信小程序，Python等资源，让我们一起学前端。

<script>
import $ from "jquery";
import { MessageBox } from 'mint-ui';

 const keys = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, '', 0]
 // let sendFlag = true // 防止重复发送密码
 export default {
    data () {
        return {
            items: [0, 1, 2, 3, 4, 5],
            keys: keys(),
            password: [],
            popupVisible:''
        }
    },
    methods: {
        jump(){
            $('.bg').css({'top':'0','transition-duration':'0.5s'})
            $('.bg').bind("click", function (e) {
                if($(e.target).closest(".pay-tool").length>0){
                    $(".bg").css({'top':'0','transition-duration':'0.5s'});
                }else{
                    $(".bg").css({'top':'100%','transition-duration':'0.5s'});
                }
            });    
                    
        },
        backHandle () {
            this.clearPasswordHandle() // 返回时清除password
            this.$emit('backFnc') // 返回上级
        },
        keyUpHandle (e) {
            let text = e.currentTarget.innerText
            let len = this.password.length
            if (!text || len >= 6) return
            this.password.push(text)
            this.ajaxData()
        },
        delHandle () {
            if (this.password.length <= 0) return false
            this.password.shift()
        },
        ajaxData () {
            if (this.password.length >= 6) {
                if(parseInt(this.password.join(' ').replace(/\s/g, '')) === 111111){
                    console.log('支付成功！'+parseInt(this.password.join(' ').replace(/\s/g, '')))
                }else{
                    MessageBox.confirm('',{
                        title: '提示',
                        message: '支付密码输入错误！',
                        showCancelButton: true,
                        confirmButtonText:'忘记密码',
                        cancelButtonText:"重新输入"
                    }).then(action => {
                        console.log('忘记密码')
                        this.clearPasswordHandle()//忘记密码时重新输入
                    }).catch(err=>{
                        console.log('取消')
                        this.clearPasswordHandle()//取消时重新输入
                    });
                    
                }
            }
            return false
        },
        clearPasswordHandle: function () {
            this.password = []
        }
    }
}
</script>

<style lang="less">
.bg{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 100%;
    right:0;
    bottom:0;
    left: 0;
    background-color: #333;
    .pay-tool {
        width: 100%;
        height: 8.52rem;
        background-color: #fff;
        overflow: hidden;
        position: absolute;
        bottom: 0;
        &-title {
            width: 100%;
            height: 0.94rem;
            padding: 0 0.36rem;
            line-height: 0.94rem;
            text-align: center;
            overflow: hidden;
            .icon {
                float: left;
                margin-top: 0.325rem;
            }
            strong {
                font-size: 0.36rem;
            }
        }
        &-content {
            .pay-tool-inputs {
                width: 6.51rem;
                height: 1.04rem;
                margin: 0.58rem auto 0;
                border: 1px solid #b9b9b9;
                border-radius: 0.12rem;
                box-shadow: 0 0 1px #e6e6e6;
                display: flex;
                .item {
                    width: 16.66666666%;
                    height: 1.04rem;
                    border-right: 1px solid #b9b9b9;
                    line-height: 0.74rem;
                    text-align: center;
                    float: left;
                    &:last-child {
                        border-right: none;
                    }
                    .icon_dot {
                        display: inline-block;
                        width: 0.20rem;
                        height: 0.20rem;
                        background-color: #333;
                        border-radius: 50%;
                    }
                }
            }
            .pay-tool-link {
                padding: 0.24rem 0.36rem 0;
                text-align: right;
                .link {
                font-size: 0.3rem;
                color: #3c8cfb;
                }
            }
        }
        .pay-tool-keyboard {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            ul {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                li {
                    width: 33%;
                    height: 1.0145rem;
                    line-height: 1.0145rem;
                    text-align: center;
                    border-right: 1px solid #aeaeae;
                    border-bottom: 1px solid #aeaeae;
                    font-size: 0.36rem;
                    font-weight: bold;
                    list-style: none;
                    &:nth-child(1), &:nth-child(2), &:nth-child(3) {
                        border-top: 1px solid #eee;
                    }
                    &:nth-child(3), &:nth-child(6), &:nth-child(9), &:nth-child(12) {
                        border-right: none;
                    }
                    &:nth-child(10), &:nth-child(11), &:nth-child(12) {
                        border-bottom: none;
                    }
                    &:nth-child(10), &:nth-child(12), &:active {
                        background-color: #d1d4dd;
                    }
                    &:nth-child(12):active {
                        background-color: #fff;
                    }
                }
            }
        }
    }
}
</style>

main.js中定义rem适配

const setHtmlFontSize = () => {
  const htmlDom = document.getElementsByTagName('html')[0];
  let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
  if (htmlWidth >= 750) {
    htmlWidth = 750;
  }
  if (htmlWidth <= 320) {
    htmlWidth = 320;
  }
  htmlDom.style.fontSize = `${htmlWidth / 7.5}px`;
};
window.onresize = setHtmlFontSize;
setHtmlFontSize();//1rem==100px