• pc端自定义密码支付框组件(仿支付宝)


    最近在写几个基于Vue的后台管理系统,期间碰到支付的问题,找了好久都没找着,索性就自己写一个,欢迎指教;

    废话不多说,直接上代码:

    1、主要用到js的一些基础知识(很底层);

    2、全局注册支付框组件(必须的嘛);

    import payBox from './components/payBox';

    Vue.component('payBox',payBox)

    3、组件代码(重点,行不行全靠它了)

    <template>
        <div class="pay_box">
            <div class="modelBox" v-if="dialogShow">
                <div class="payDialog">
                    <div class="head">请输入支付密码</div>
                    <div class="password">
                        <input v-model='inputPass' id='input' ref='myInput' type='text' autofocus="autofocus" maxlength='6' class='inputPass' />
                        <form>
                            <input v-model='myPassword.myPassword1' type='password' maxlength='1' readonly="readonly" />
                            <input v-model='myPassword.myPassword2' type='password' maxlength='1' readonly="readonly" />
                            <input v-model='myPassword.myPassword3' type='password' maxlength='1' readonly="readonly" />
                            <input v-model='myPassword.myPassword4' type='password' maxlength='1' readonly="readonly" />
                            <input v-model='myPassword.myPassword5' type='password' maxlength='1' readonly="readonly" />
                            <input v-model='myPassword.myPassword6' type='password' maxlength='1' readonly="readonly" />
                        </form>
                        <div class="tip" v-if="psdWrong">
                            支付密码错误,请输入6位数字支付密码
                        </div>
                    </div>
                    <div class="footer">
                        <el-button type="primary" @click='cancel'>取 消</el-button>
                        <el-button type="primary" @click='confirm'>确 定</el-button>
                    </div>
                </div>
            </div>
        </div>
    </template>
    
    <script>
        export default {
            props:{
                dialogShow:{
                    type: Boolean
                }
            },
            data() {
                return {
                    inputPass: '',
                    unbindForm: {
                        pay_pass: ''
                    },
                    myPassword: {
                        myPassword1: '',
                        myPassword2: '',
                        myPassword3: '',
                        myPassword4: '',
                        myPassword5: '',
                        myPassword6: ''
                    },
                    psdWrong: false,
    
                    unbind_rules: {
                        pay_pass: [{
                            required: true,
                            message: '请输入密码',
                            trigger: 'blur'
                        }]
                    },
                    options: [],
                    pass: ''
                }
            },
            created() {
                // this.showUp();
            },
            watch: {
                inputPass() {
                    this.show();
                    var patt = /^[0-9]*$/g;
                    this.psdWrong = !patt.test(this.inputPass);//表单校验,输入错误时给出提示
                },
                dialogShow(){//确保每次打开窗口聚焦到输入框
                    this.showUp();
                }
            },
            methods: {
                show() {//用户输入显示
                    var myInputPass = this.inputPass;
                    var arr = myInputPass.split('');
                    var obj = this.myPassword;
                    var index = 0;
                    for (var i in obj) {
                        obj[i] = arr[index];
                        index++
                    }
                },
                cancel() {
                    this.inputPass = '';
                    this.$emit('closeDialog',false)
                },
                confirm() {
                    alert('输入的密码是:'+this.inputPass);
                    this.inputPass = '';
                    this.$emit('closeDialog',false);
                },
                showUp() {
                    //保证焦点始终在表单上
                    this.$nextTick(() => {
                        this.$refs.myInput.focus();
                    })
                    document.addEventListener("mousedown", (e) => {
                        if (e.target.id !== "input") {
                            e.preventDefault()
                        }
                    }, false);
                }
            }
        }
    </script>
    
    <style>
        .pay_box {
            position: relative;
        }
        /* 支付对话框 */
        .pay_box .modelBox {
             100%;
            height: 100%;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow: auto;
            margin: 0;
            background-color: rgba(0, 0, 0, .3);
        }
    
        .pay_box .payDialog {
            background-color: #fff;
            border: 1px solid #ccc;
            position: absolute;
             480px;
            height: auto;
            top: 30%;
            left: 37.5%;
            z-index: 999;
        }
    
        .pay_box .payDialog .inputPass {
            position: absolute;
            z-index: -999;
            right: 25%;
            top: 40%;
            border: transparent;
        }
        .pay_box .payDialog .inputPass:focus{
            outline:none;
        }
    
        .pay_box .payDialog form {
            margin-left: 10%;
             76%;
            display: flex;
            height: 48px;
            justify-content: space-between;
        }
    
        .pay_box .payDialog form>input {
             48px;
            height: 48px;
            text-align: center;
            
        }
    
        .pay_box .head,
        .pay_box .password,
        .pay_box .footer {
            padding: 20px 40px;
            text-align: center;
        }
    
    
        .pay_box .password>form>input {
            font-size: 30px;
        }
    
        .pay_box .tip {
            color: darkorange;
            font-size: smaller;
        }
    </style>

    4、使用(激动人心的时刻到了)

    <template>
        <div>
            <el-button type="primary" @click='showUp'>去支付</el-button>
            <pay-box :dialogShow='flag' @closeDialog='close'></pay-box>
        </div>
    </template>
    
    <script>
        export default{
            data(){
                return{
                    flag: false
                }
            },
            methods:{
                showUp(){
                    this.flag = true;
                },
                close(val){
                    this.flag = false;
                }
            }
        }
    </script>
    
    <style>
    </style>

    5、差点忘了,效果图如下(有图有真相)

    6、好了,打完收工。

    7、源码下载地址

  • 相关阅读:
    输出字体颜色 "<li><font color=red>" + ......+ "</font>"
    sass跨文件重写变量
    sass兼容IE8透明度方法
    关于CSS中对IE条件注释的问题
    css规范
    transition代替简单的animation注意事项
    zepto触摸事件解决方法
    fullpage.js小技巧
    php访问全局变量
    好的列表布局
  • 原文地址:https://www.cnblogs.com/sherlock-Ace/p/10802263.html
Copyright © 2020-2023  润新知