vue-mobile-pay

vue h5 支付密码，带数字键盘，且支持再次输入密码做对比，实现方案

使用说明

小编借助vue-cli和vue的插件功能，实现六位或多位数字键盘密码插件，主要服务于移动端

注意：小编已使用postcss-pxtorem将代码转换为rem，转化基准值为40，请使用者根据实际情况转换，可下载源码，修改.postcssrc.js文件

使用方法

import Vue from 'vue'
import vuePayPwd from 'vue-mobile-pay'

Vue.use(vuePayPwd)

配置

<template>
  <div>
    <span class="pay-btn" @click="topay">去付款</span>
    <vue-pay-pwd 
     :isPay="isPay"
     @close = "payClose"
     :is2times = "false"
     :getPassword = "payPw">
    </vue-pay-pwd>
  </div>
</template>

data () {
    return {
      msg: 'Welcome to my vue-pay-pwd',
      isPay:false,
      pwd:""
    }
  },
   methods: {
      topay(){
        this.isPay = true
      },
      payClose(){
        this.isPay = false
      },
      payPw(pwd){
        this.pwd = pwd.toString()
        console.log(获取密码，pwd)
      }
  },

Props

name	Description	type	default	required
getPassword	拿到一个密码参数，建议必填	Function	function	非
payTitle	标题，建议必填	String	请输入支付密码	非
pay2Title	标题，建议必填	String	请输再次入支付密码	非
pwdDigits	需要支持几位数密码	Number	6	非
highlightColor	数字键盘带你后高亮色值	String	#ccc	非
isPay	是否显示支付密码	Boolean	false	必
is2times	是否两次输入密码	Boolean	false	非
isMess	数字键盘是否乱序	Boolean	false	非

###展示

一次密码

二次密码

感谢您的阅读，欢迎start一起学习