vue-payment是什么？

一个基于vue框架的支付弹窗插件

先睹为快

安装

npm install vue-payment -S

使用

import payment from 'vue-payment';  // 引用
Vue.use(payment);   // 注入

然后直接当组件一样用

<payment></payment>

export default {
  name: 'app',
  data () {
    return {
        payShow: false,
        payStatus: false,
        payTitle:"请输入支付密码"
    }
  },
  methods:{
    payClick:function(){
        // 显示支付键盘
        this.payShow = true;
    },
    submitFns:function(value){
        // 关闭键盘
        if(value=='123456'){
            //密码正确
            setTimeout(function(_this){
                _this.payStatus = true;
            },100,this)
        }else{
            // 密码错误
            setTimeout(function(_this){
                _this.payStatus = false;
            },100,this)
        }
    }
  },
}

传参

<payment 
   :payShow="payShow" 
   :payStatus="payStatus" 
   :payTitle = "payTitle"
   @paySubmit="submitFns" 
   @payClose="payShow=false"
   >
</payment>

key	value	说明
payShow	Boolean	弹出框是否显示
payStatus	Boolean	支付状态（支付成功or支付失败）
payTitle	String	弹出框标题

方法

name	说明
paySubmit	提交时触发，密码当参数返回
payClose	点击关掉支付框触发

博客

• ps 插件代码已开源，如需扩展其它功能，可自行添加