vue init webpack-simple vue-pay-keyboard

export default {
  name: 'vue-pay-pop',
  props: ['payPopOptions'],
  data () {
   return {
    //可選參數(shù)，支持改變
    //頂部文字
    title: this.payPopOptions.title || '請(qǐng)輸入支付密碼',
    //密碼長(zhǎng)度
    pwdLength: this.payPopOptions.pwdLength || 6,
    //底部刪除按鈕
    del: this.payPopOptions.del || '',
    //默認(rèn)等候文字
    loadingTxt: this.payPopOptions.loadingTxt || '請(qǐng)稍候...',
    //默認(rèn)等候時(shí)間
    loadingTime: this.payPopOptions.loadingTime || 1000,
    //顯示結(jié)果后，多久重回默認(rèn)
    resultTime: this.payPopOptions.resultTime || 1000,
    //成功文字
    successTxt: this.payPopOptions.successTxt || '支付成功',
    //失敗文字
    failTxt: this.payPopOptions.failTxt || '支付失敗',
    //默認(rèn)參數(shù)，無法改變
    //鍵盤數(shù)字(1~9)
    keyBoards: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
    //鍵入的值
    val: [],
    //默認(rèn)輸入框與等待層是否顯示
    status: true
   }
  },
  methods: {
   val2input(item) {
    this.val.push(item)
    if (this.val.length == this.pwdLength) {
     //打開等待層
     this.status = false
     //輸入完畢后將值傳遞給父組件
     this.$emit('inputDown', this.val.join(''))
     //清空數(shù)據(jù)
     this.val = []
    }
   },
   delVal () {
    if (this.val.length > 0) this.val.pop()
   },
   closePay () {
    this.payPopOptions.isShow = false;
   },
   $payStatus(flag = false) {
    const that = this
    //模擬等候feel
    setTimeout(() => {
     if (flag) {
      //成功
      this.loadingTxt = this.successTxt
      //關(guān)閉輸入層，重置等待語
      setTimeout(function() {
       that.payPopOptions.isShow = !flag
       that.status = true
       that.loadingTxt = that.payPopOptions.loadingTxt || '請(qǐng)稍候...'
      }, this.resultTime)
     } else {
      //失敗
      this.loadingTxt = this.failTxt
      //重新打開輸入層，重置等待語
      setTimeout(function() {
       that.status = true
       that.loadingTxt = that.payPopOptions.loadingTxt || '請(qǐng)稍候...'
      }, this.resultTime)
     }
    }, this.loadingTime)
   }
  }
 }

  
點(diǎn)擊彈出支付框
  
 

import vuePayPop from './lib/vue-pay-pop'

export default {
 name: 'app',
 data () {
  return {
   payPopOptions: {
    isShow: false
   },
  }
 },
 components: {
  vuePayPop
 },
 methods: {
  inputDown(val) {
   //模擬檢查數(shù)據(jù)
   setTimeout(() => {
    if (val == '111111') {
     this.$refs.pay.$payStatus(true)
    } else {
     this.$refs.pay.$payStatus(false)
    }
   }, 1000)
  },
  showPayPop() {
   this.payPopOptions.isShow = true;
  }
 }
}

import vuePayPop from './vue-pay-pop.vue'

const PayPop = {
  install(Vue, options) {
    Vue.component(vuePayPop.name, vuePayPop)
  }
}
if (typeof window !== 'undefined' && window.Vue) {
  window.PayPop = PayPop
  Vue.use(PayPop)
}
export default PayPop

import vuePayPop from "vue-pay-pop"
vue.use(vuePayPop)