Repository: yucccc/vue-pay-keyboard
Branch: master
Commit: 52c6cccbed19
Files: 11
Total size: 36.3 KB

Directory structure:
gitextract_0gykpxdb/

├── .babelrc
├── .gitignore
├── README.md
├── dist/
│   └── vue-pay-keyboard.js
├── index.html
├── package.json
├── src/
│   ├── App.vue
│   ├── lib/
│   │   ├── index.js
│   │   └── vue-pay-keyboard.vue
│   └── main.js
└── webpack.config.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .babelrc
================================================
{
  "presets": [
    ["env", { "modules": false }]
  ]
}


================================================
FILE: .gitignore
================================================
.DS_Store
node_modules/
npm-debug.log
yarn-error.log

# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln


================================================
FILE: README.md
================================================
# vue-pay-keyboard

A Vue component to pay-keyboard
一个虚拟数字支付键盘插件

[vue插件开发与发布](https://www.jianshu.com/p/d6855556cd75)

## demo演示

[demo](http://mall.yucccc.com/vuepayboard/)

## 安装

```JS
npm install vue-pay-keyboard -S
```

## 使用

```js
// ES6
import vuePayKeyboard from 'vue-pay-keyboard.js'
// require
var vuePayKeyboard = require('PayKeyboard')

Vue.use(vuePayKeyboard)

// 或者直接使用script导入
<script src="./node_modules/vue/dist/vue-pay-keyboard.js"></script>

// 作为组件的方式使用
<vue-pay-keyboard></vue-pay-keyboard>
```

### 配置

```html
   <vue-pay-keyboard
   ref="pay"
   :is-pay='isPay'
   @pas-end='pasEnd'
   @close='isPay=false'>
    <!-- 自定义支付动画 -->
      <div slot="loading-ani">
        <svg></svg>
      </div>
    </vue-pay-keyboard>
```

```javascript
methods:{
    pasEnd(val) {
      console.log(val);  //得到密码 可能会进行一些加密动作
      setTimeout(() => { // 模拟请求接口验证密码中 ..
        if (val === '111111') { // 密码正确
          this.$refs.pay.$payStatus(true) // 拿到子组件的事件
        } else {
          this.$refs.pay.$payStatus(false)
        }
      }, 1000)
    }
}
```

### Props

|    name    |    Description   |   type   |default|
| -----------------  | ---------------- | :--------: | :----------: |
| highlight-color       | 点击时高亮颜色 |String| #000
| pas-digits        | 密码位数 |Number | 6
| is-pay        | 显示键盘 |Boolean | false
| pay-title        | 支付标题 |String | 请输入支付密码

### Slots 支持自定义插槽

|    name    |    Description   |   type   |default|
| -----------------  | ---------------- | :--------: | :----------: |
| loading-ani       | 支付请求中 || loading
| pay-status        | 支付成功或者失败|| 支付成功

### Events

| name | Description   |
| :--------:   | -----  |
|    pas-end    |  密码输入完毕后触发事件,接收所输密码
|    close    |  关闭键盘


================================================
FILE: dist/vue-pay-keyboard.js
================================================
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("PayKeyboard",[],e):"object"==typeof exports?exports.PayKeyboard=e():t.PayKeyboard=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/dist/",e(e.s=2)}([function(t,e,n){function i(t){n(7)}var o=n(5)(n(1),n(6),i,"data-v-7c990886",null);t.exports=o.exports},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=null;e.default={name:"vue-pay-keyboard",props:{payTitle:{type:String,default:"请输入支付密码"},highlightColor:{type:String,default:"#ccc"},pasDigits:{type:Number,default:6},isPay:{type:Boolean,default:!1}},data:function(){return{keyShow:!0,lodingShow:!1,paySuc:!1,val:[],keyList:[[1,2,3],[4,6,6],[7,8,9]],payStatus:!1}},computed:{payStatusText:function(){return this.payStatus?"支付成功!":"支付失败,请重输密码!"}},methods:{inputEnd:function(t,e){this.unhighLight(t.currentTarget,e)},unhighLight:function(t,e){t.style.backgroundColor=e?"#e8e8e8":"#fff"},highlight:function(t){t.style.backgroundColor=this.highlightColor},inputStart:function(t,e){this.val.length<this.pasDigits?(this.val.push(t),this.val.length===this.pasDigits&&(this.$emit("pas-end",this.val.join("")),this.keyShow=!1,this.lodingShow=!0,this.$refs.loading.classList.add("loading-ani"),this.val=[])):this.$emit("pas-end",this.val.join("")),this.highlight(e.currentTarget)},del:function(){this.val.length>0&&this.val.pop()},close:function(){this.$emit("close")},$payStatus:function(t){var e=this;"boolean"==typeof t&&(this.payStatus=t,this.lodingShow=!1,this.paySuc=!0,i=t?setTimeout(function(){clearTimeout(i),e.$emit("close"),e.keyShow=!0,e.paySuc=!1,e.$refs.loading.classList.remove("loading-ani")},800):setTimeout(function(){clearTimeout(i),e.keyShow=!0,e.paySuc=!1,e.$refs.loading.classList.remove("loading-ani")},800))}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(0),o=n.n(i),a={install:function(t,e){t.component(o.a.name,o.a)}};"undefined"!=typeof window&&window.Vue&&window.Vue.use(a),e.default=a},function(t,e,n){e=t.exports=n(4)(),e.push([t.i,'div[data-v-7c990886],input[data-v-7c990886],span[data-v-7c990886]{-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}input[data-v-7c990886]{background:none;outline:none;border:none;background-color:transparent;border-color:transparent;-webkit-appearance:none}@keyframes loadingRotate-data-v-7c990886{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.title[data-v-7c990886]{text-align:center;height:50px;line-height:50px;margin-bottom:25px;position:relative}.pa[data-v-7c990886]{position:absolute;right:15px;top:50%;transform:translateY(-50%);display:flex;align-content:center;justify-content:center}.loading[data-v-7c990886]{display:flex;align-items:center;justify-content:center}.loading-ani[data-v-7c990886]{animation:loadingRotate-data-v-7c990886 .8s infinite}.pay-box[data-v-7c990886]{z-index:111;position:fixed;left:0;top:0;width:100%;height:100%;overflow-x:hidden;overflow-y:hidden;background-color:rgba(0,0,0,.5);z-index:999}.pay-box>div[data-v-7c990886]{position:absolute;width:100%;height:68%;left:0;bottom:0;color:#363636;background-color:#fff}.v-1px-b[data-v-7c990886],.v-1px-l[data-v-7c990886],.v-1px-t[data-v-7c990886],.v-1px[data-v-7c990886]{position:relative}.v-1px-b[data-v-7c990886]:after{content:" ";bottom:0;border-bottom:1px solid #c7c7c7;transform-origin:0 100%}.v-1px-b[data-v-7c990886]:after,.v-1px-t[data-v-7c990886]:before{position:absolute;left:0;right:0;height:1px;color:#c7c7c7;transform:scaleY(.5)}.v-1px-t[data-v-7c990886]:before{z-index:112;top:0;content:"";border-top:1px solid #c7c7c7;transform-origin:0 0}.v-1px-l[data-v-7c990886]:before{position:absolute;left:0;top:0;bottom:0;width:1px;content:"";border-left:1px solid #c7c7c7;transform:scaleX(.5);color:#c7c7c7;transform-origin:0 0}.v-1px[data-v-7c990886]:before{position:absolute;left:0;top:0;width:200%;height:200%;content:"";border:1px solid #c7c7c7;transform:scale(.5);color:#c7c7c7;transform-origin:left top;z-index:1000}.key-box[data-v-7c990886]{position:absolute;left:0;bottom:0;width:100%;font-size:16px;color:#363636}.key-box .item[data-v-7c990886]{display:flex;text-align:center;line-height:50px;height:50px}.key-box .key[data-v-7c990886]{cursor:pointer;width:100%;height:100%;flex:1}.pas-box[data-v-7c990886]{width:80%;height:45px;display:flex;margin:0 auto;line-height:45px;text-align:center}.pas-box>div[data-v-7c990886]{flex:1;display:flex;align-items:center;justify-content:center}.pas-box>div>input[data-v-7c990886]{width:100%;font-size:18px;text-align:center;height:100%;display:block}.slide-enter-active[data-v-7c990886]{transition:all 10s ease}.slide-enter[data-v-7c990886]{transform:translateY(500px)}',""])},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e<this.length;e++){var n=this[e];n[2]?t.push("@media "+n[2]+"{"+n[1]+"}"):t.push(n[1])}return t.join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var i={},o=0;o<this.length;o++){var a=this[o][0];"number"==typeof a&&(i[a]=!0)}for(o=0;o<e.length;o++){var r=e[o];"number"==typeof r[0]&&i[r[0]]||(n&&!r[2]?r[2]=n:n&&(r[2]="("+r[2]+") and ("+n+")"),t.push(r))}},t}},function(t,e){t.exports=function(t,e,n,i,o){var a,r=t=t||{},s=typeof t.default;"object"!==s&&"function"!==s||(a=t,r=t.default);var c="function"==typeof r?r.options:r;e&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns),i&&(c._scopeId=i);var l;if(o?(l=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),n&&n.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},c._ssrRegister=l):n&&(l=n),l){var d=c.functional,p=d?c.render:c.beforeCreate;d?c.render=function(t,e){return l.call(e),p(t,e)}:c.beforeCreate=p?[].concat(p,l):[l]}return{esModule:a,exports:r,options:c}}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.isPay?n("div",{staticClass:"pay-box"},[t.isPay?n("div",[n("div",{staticClass:"title v-1px-b pr"},[n("span",[t._v(t._s(t.payTitle))]),t._v(" "),n("span",{staticClass:"pa",on:{click:t.close}},[n("svg",{staticClass:"icon",attrs:{t:"1501505446265",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"1904","xmlns:xlink":"http://www.w3.org/1999/xlink",width:"18",height:"18"}},[n("path",{attrs:{d:"M550.659 490.565l324.395-324.386c10.945-10.945 10.945-28.699 0-39.644-10.948-10.95-28.704-10.95-39.648-0.004L511.01 450.916 186.625 126.53c-10.946-10.947-28.703-10.947-39.648 0-10.946 10.95-10.946 28.703 0 39.648l324.385 324.386-324.385 324.401c-10.946 10.944-10.946 28.703 0 39.65 10.945 10.943 28.702 10.943 39.648 0L511.01 530.213l324.396 324.401c10.944 10.944 28.7 10.944 39.648 0 10.945-10.946 10.945-28.705 0-39.649L550.66 490.565z","p-id":"1905"}})])])]),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:t.keyShow,expression:"keyShow"}],staticClass:"pas-box v-1px"},t._l(t.pasDigits,function(e,i){return n("div",{key:i,class:{"v-1px-l":i>0}},[n("input",{attrs:{type:"password",disabled:""},domProps:{value:t.val[i]}})])})),t._v(" "),t.keyShow?n("div",{staticClass:"key-box"},[t._l(t.keyList,function(e,i){return n("div",{key:i,staticClass:"item v-1px-t"},t._l(e,function(e,i){return n("div",{key:i,staticClass:"key",class:{"v-1px-l":0!=i},on:{touchstart:function(n){t.inputStart(e,n)},touchend:function(e){t.inputEnd(e)}}},[t._v("\n                    "+t._s(e)+"\n                ")])}))}),t._v(" "),n("div",{staticClass:"item v-1px-t"},[n("div",{staticClass:"key  ",staticStyle:{background:"#e8e8e8"}}),t._v(" "),n("div",{staticClass:"key v-1px-l",on:{touchstart:function(e){t.inputStart(0,e)},touchend:function(e){t.inputEnd(e)}}},[t._v("0\n                ")]),t._v(" "),n("div",{staticClass:"key v-1px-l",staticStyle:{background:"#e8e8e8"},on:{touchstart:function(e){t.del(e)},touchend:function(e){t.inputEnd(e,"del")}}},[t._v("-\n                ")])])],2):t._e(),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:t.paySuc,expression:"paySuc"}],staticStyle:{"text-align":"center"}},[t._t("pay-status",[t._v("\n                "+t._s(t.payStatusText)+"\n            ")])],2),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:t.lodingShow,expression:"lodingShow"}],ref:"loading",staticClass:"loading"},[t._t("loading-ani",[n("svg",{staticClass:"icon",attrs:{t:"1501508156392",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"1936","xmlns:xlink":"http://www.w3.org/1999/xlink",width:"100",height:"100"}},[n("path",{attrs:{d:"M914.9 682.1c-22 52.1-53.5 98.8-93.7 139s-86.9 71.7-139 93.7c-53.9 22.8-111.1 34.3-170.2 34.3s-116.3-11.5-170.1-34.3c-52.1-22-98.8-53.5-139-93.7s-71.7-86.9-93.7-139C86.4 628.3 74.8 571.1 74.8 512s11.5-116.3 34.3-170.2c22-52.1 53.5-98.8 93.7-139s86.9-71.7 139-93.7c43.3-18.3 88.8-29.4 135.7-33C497 74.6 512 58.4 512 38.9l0 0c0-21.8-18.6-39-40.3-37.3C207.8 22.1 0 242.8 0 512c0 282.8 229.2 512 512 512 269.2 0 489.9-207.8 510.4-471.7 1.7-21.7-15.5-40.3-37.3-40.3l0 0c-19.5 0-35.8 15-37.3 34.4C944.2 593.3 933.2 638.8 914.9 682.1z","p-id":"1937",fill:"#6A8FE5"}})])])],2)]):t._e()]):t._e()},staticRenderFns:[]}},function(t,e,n){var i=n(3);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);n(8)("5601c310",i,!0,{})},function(t,e,n){function i(t){for(var e=0;e<t.length;e++){var n=t[e],i=d[n.id];if(i){i.refs++;for(var o=0;o<i.parts.length;o++)i.parts[o](n.parts[o]);for(;o<n.parts.length;o++)i.parts.push(a(n.parts[o]));i.parts.length>n.parts.length&&(i.parts.length=n.parts.length)}else{for(var r=[],o=0;o<n.parts.length;o++)r.push(a(n.parts[o]));d[n.id]={id:n.id,refs:1,parts:r}}}}function o(){var t=document.createElement("style");return t.type="text/css",p.appendChild(t),t}function a(t){var e,n,i=document.querySelector("style["+x+'~="'+t.id+'"]');if(i){if(h)return v;i.parentNode.removeChild(i)}if(y){var a=f++;i=u||(u=o()),e=r.bind(null,i,a,!1),n=r.bind(null,i,a,!0)}else i=o(),e=s.bind(null,i),n=function(){i.parentNode.removeChild(i)};return e(t),function(i){if(i){if(i.css===t.css&&i.media===t.media&&i.sourceMap===t.sourceMap)return;e(t=i)}else n()}}function r(t,e,n,i){var o=n?"":i.css;if(t.styleSheet)t.styleSheet.cssText=b(e,o);else{var a=document.createTextNode(o),r=t.childNodes;r[e]&&t.removeChild(r[e]),r.length?t.insertBefore(a,r[e]):t.appendChild(a)}}function s(t,e){var n=e.css,i=e.media,o=e.sourceMap;if(i&&t.setAttribute("media",i),g.ssrId&&t.setAttribute(x,e.id),o&&(n+="\n/*# sourceURL="+o.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}var c="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!c)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var l=n(9),d={},p=c&&(document.head||document.getElementsByTagName("head")[0]),u=null,f=0,h=!1,v=function(){},g=null,x="data-vue-ssr-id",y="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());t.exports=function(t,e,n,o){h=n,g=o||{};var a=l(t,e);return i(a),function(e){for(var n=[],o=0;o<a.length;o++){var r=a[o],s=d[r.id];s.refs--,n.push(s)}e?(a=l(t,e),i(a)):a=[];for(var o=0;o<n.length;o++){var s=n[o];if(0===s.refs){for(var c=0;c<s.parts.length;c++)s.parts[c]();delete d[s.id]}}}};var b=function(){var t=[];return function(e,n){return t[e]=n,t.filter(Boolean).join("\n")}}()},function(t,e){t.exports=function(t,e){for(var n=[],i={},o=0;o<e.length;o++){var a=e[o],r=a[0],s=a[1],c=a[2],l=a[3],d={id:t+":"+o,css:s,media:c,sourceMap:l};i[r]?i[r].parts.push(d):n.push(i[r]={id:r,parts:[d]})}return n}}])});
//# sourceMappingURL=vue-pay-keyboard.js.map

================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue-pay-keyboard</title>
  <style>
    /* button { */
      /* border: 1px solid #ccc; */
      /* height: 30px; */
      /* width: 100px; */
    /* } */
  </style>
</head>

<body>
  <div id="app">
    <!-- <button @click="payShow()">点击支付</button>
    <vue-pay-keyboard :is-pay='isPay' @pas-end='pasEnd' @close='isPay=false'></vue-pay-keyboard> -->
  </div>
  <!-- <script src="./node_modules/vue/dist/vue.js"></script> -->
  <!-- <script src="./dist/vue-pay-keyboard.js"></script> -->
   <script src="/dist/vue-pay-keyboard.js"></script>   
</body>
<script>
  // new Vue({
  //   el: '#app',
  //   data() {
  //     return {
  //       isPay: false
  //     }
  //   },
  //   methods: {
  //     payShow() {
  //       this.isPay = true;
  //     },
  //     pasEnd(val) {
  //       console.log(val); //得到密码 可能会进行一些加密动作
  //       // 请求接口 验证密码是否正确
  //     }
  //   }
  // })
</script>

</html>

================================================
FILE: package.json
================================================
{
  "name": "vue-pay-keyboard",
  "description": "A Vue component to pay-keyboard",
  "version": "1.1.5",
  "author": "yucccc <13450003105@163.com>",
  "private": false,
  "license": "MIT",
  "main": "dist/vue-pay-keyboard.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
    "pub": "npm run build && npm publish"
  },
  "dependencies": {
    "vue": "^2.3.3",
    "vue-pay-keyboard": "^1.1.2"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/yucccc/vue-pay-keyboard"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-env": "^1.5.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "node-sass": "^4.5.0",
    "sass-loader": "^5.0.1",
    "vue-loader": "^12.1.0",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}


================================================
FILE: src/App.vue
================================================
<template>
  <div id="app">
    <div class="example">
      <button @click="isPay=true">点击弹出支付键盘</button>
    </div>
  
    <div class="example">
      <button @click="isPay1=true">自定义支付成功与失败动画</button>
    </div>
    <vue-pay-keyboard ref="pay" :is-pay='isPay' @pas-end='pasEnd' @close='isPay=false'>
    </vue-pay-keyboard>
  
    <vue-pay-keyboard ref="pay1" :is-pay='isPay1' @pas-end='pasEnd1' @close='isPay1=false'>
      <div slot="loading-ani">
        <svg t="1501642917555" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1891" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100">
          <path d="M858.88 753.408C858.88 756.5824 861.7984 759.4496 864.9216 759.4496 868.096 759.4496 870.9632 756.5824 870.9632 753.408 870.9632 750.2336 868.096 747.3664 864.9216 747.3664 861.7984 747.3664 858.88 750.2336 858.88 753.408L858.88 753.408ZM725.4528 891.0848C725.4528 894.208 726.784 897.3312 728.9856 899.584 731.2384 901.7856 734.3616 903.0656 737.4848 903.0656 740.6592 903.0656 743.7824 901.7856 745.984 899.584 748.2368 897.3312 749.5168 894.208 749.5168 891.0848 749.5168 887.9104 748.2368 884.7872 745.984 882.5856 743.7824 880.3328 740.6592 879.0528 737.4848 879.0528 734.3616 879.0528 731.2384 880.3328 728.9856 882.5856 726.784 884.7872 725.4528 887.9104 725.4528 891.0848L725.4528 891.0848ZM545.6384 961.9456C545.6384 966.656 547.584 971.3664 550.912 974.6944 554.2912 978.0224 558.9504 979.968 563.712 979.968 568.4224 979.968 573.1328 978.0224 576.4608 974.6944 579.84 971.3664 581.7856 966.656 581.7856 961.9456 581.7856 957.184 579.84 952.4736 576.4608 949.1456 573.1328 945.8176 568.4224 943.872 563.712 943.872 558.9504 943.872 554.2912 945.8176 550.912 949.1456 547.584 952.4736 545.6384 957.184 545.6384 961.9456L545.6384 961.9456ZM352.0512 952.4224C352.0512 958.72 354.6624 964.9664 359.0656 969.4208 363.52 973.8752 369.8176 976.4864 376.064 976.4864 382.3616 976.4864 388.6592 973.8752 393.0624 969.4208 397.5168 964.9664 400.128 958.72 400.128 952.4224 400.128 946.1248 397.5168 939.8784 393.0624 935.424 388.6592 930.9696 382.3616 928.4096 376.064 928.4096 369.8176 928.4096 363.52 930.9696 359.0656 935.424 354.6624 939.8784 352.0512 946.1248 352.0512 952.4224L352.0512 952.4224ZM180.3264 864.3072C180.3264 872.192 183.552 880.0256 189.1328 885.5552 194.7136 891.136 202.496 894.3616 210.3808 894.3616 218.2656 894.3616 226.0992 891.136 231.68 885.5552 237.2096 880.0256 240.4864 872.192 240.4864 864.3072 240.4864 856.4224 237.2096 848.5888 231.68 843.008 226.0992 837.4784 218.2656 834.2016 210.3808 834.2016 202.496 834.2016 194.7136 837.4784 189.1328 843.008 183.552 848.5888 180.3264 856.4224 180.3264 864.3072L180.3264 864.3072ZM61.3888 714.496C61.3888 723.9168 65.28 733.3376 71.936 740.0448 78.6432 746.7008 88.064 750.592 97.4848 750.592 106.9568 750.592 116.3776 746.7008 123.0336 740.0448 129.7408 733.3376 133.632 723.9168 133.632 714.496 133.632 705.024 129.7408 695.6032 123.0336 688.9472 116.3776 682.24 106.9568 678.3488 97.4848 678.3488 88.064 678.3488 78.6432 682.24 71.936 688.9472 65.28 695.6032 61.3888 705.024 61.3888 714.496L61.3888 714.496ZM16.7424 530.5344C16.7424 541.5424 21.2992 552.4992 29.0816 560.2816 36.864 568.064 47.8208 572.6208 58.8288 572.6208 69.888 572.6208 80.8448 568.064 88.6272 560.2816 96.4096 552.4992 100.9664 541.5424 100.9664 530.5344 100.9664 519.4752 96.4096 508.5184 88.6272 500.736 80.8448 492.9536 69.888 488.3968 58.8288 488.3968 47.8208 488.3968 36.864 492.9536 29.0816 500.736 21.2992 508.5184 16.7424 519.4752 16.7424 530.5344L16.7424 530.5344ZM53.4528 347.7504C53.4528 360.3456 58.6752 372.8896 67.584 381.7984 76.4928 390.7072 88.9856 395.8784 101.632 395.8784 114.2272 395.8784 126.72 390.7072 135.68 381.7984 144.5888 372.8896 149.76 360.3456 149.76 347.7504 149.76 335.1552 144.5888 322.6112 135.68 313.7024 126.72 304.7936 114.2272 299.6224 101.632 299.6224 88.9856 299.6224 76.4928 304.7936 67.584 313.7024 58.6752 322.6112 53.4528 335.1552 53.4528 347.7504L53.4528 347.7504ZM163.6352 200.3968C163.6352 214.5792 169.472 228.6592 179.5072 238.6944 189.5424 248.7296 203.6224 254.5664 217.856 254.5664 232.0384 254.5664 246.1184 248.7296 256.1536 238.6944 266.1888 228.6592 272.0256 214.5792 272.0256 200.3968 272.0256 186.2144 266.1888 172.0832 256.1536 162.048 246.1184 152.064 232.0384 146.176 217.856 146.176 203.6224 146.176 189.5424 152.064 179.5072 162.048 169.472 172.0832 163.6352 186.2144 163.6352 200.3968L163.6352 200.3968ZM325.4272 115.968C325.4272 131.7376 331.8784 147.4048 343.04 158.5152 354.2016 169.6768 369.8176 176.128 385.5872 176.128 401.3568 176.128 416.9728 169.6768 428.1344 158.5152 439.296 147.4048 445.7472 131.7376 445.7472 115.968 445.7472 100.2496 439.296 84.5824 428.1344 73.4208 416.9728 62.3104 401.3568 55.808 385.5872 55.808 369.8176 55.808 354.2016 62.3104 343.04 73.4208 331.8784 84.5824 325.4272 100.2496 325.4272 115.968L325.4272 115.968ZM507.136 110.7456C507.136 128.0512 514.2528 145.3056 526.4896 157.5424 538.7776 169.8304 555.9808 176.9472 573.3376 176.9472 590.6432 176.9472 607.8976 169.8304 620.1344 157.5424 632.4224 145.3056 639.5392 128.0512 639.5392 110.7456 639.5392 93.3888 632.4224 76.1856 620.1344 63.8976 607.8976 51.6608 590.6432 44.544 573.3376 44.544 555.9808 44.544 538.7776 51.6608 526.4896 63.8976 514.2528 76.1856 507.136 93.3888 507.136 110.7456L507.136 110.7456ZM673.4848 185.6C673.4848 204.4928 681.2672 223.2832 694.6304 236.6464 707.9936 250.0096 726.784 257.792 745.6768 257.792 764.5696 257.792 783.36 250.0096 796.7232 236.6464 810.0864 223.2832 817.8688 204.4928 817.8688 185.6 817.8688 166.7072 810.0864 147.9168 796.7232 134.5536 783.36 121.1904 764.5696 113.408 745.6768 113.408 726.784 113.408 707.9936 121.1904 694.6304 134.5536 681.2672 147.9168 673.4848 166.7072 673.4848 185.6L673.4848 185.6ZM791.7056 326.1952C791.7056 346.6752 800.1024 367.0016 814.592 381.4912 829.0816 395.9808 849.4592 404.4288 869.9392 404.4288 890.4192 404.4288 910.7456 395.9808 925.2352 381.4912 939.7248 367.0016 948.1728 346.6752 948.1728 326.1952 948.1728 305.664 939.7248 285.3376 925.2352 270.848 910.7456 256.3584 890.4192 247.9616 869.9392 247.9616 849.4592 247.9616 829.0816 256.3584 814.592 270.848 800.1024 285.3376 791.7056 305.664 791.7056 326.1952L791.7056 326.1952ZM838.7072 508.2624C838.7072 530.3296 847.7696 552.2432 863.3856 567.8592 879.0016 583.4752 900.9152 592.5376 922.9824 592.5376 945.0496 592.5376 966.9632 583.4752 982.5792 567.8592 998.1952 552.2432 1007.2576 530.3296 1007.2576 508.2624 1007.2576 486.1952 998.1952 464.2816 982.5792 448.6656 966.9632 433.1008 945.0496 423.9872 922.9824 423.9872 900.9152 423.9872 879.0016 433.1008 863.3856 448.6656 847.7696 464.2816 838.7072 486.1952 838.7072 508.2624L838.7072 508.2624Z" p-id="1892" fill="#d4237a"></path>
        </svg>
      </div>
    </vue-pay-keyboard>
  
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      isPay: false,
      isPay1: false
    }
  },
  methods: {
    pasEnd(val) {
      console.log(val);  //得到密码 可能会进行一些加密动作
      setTimeout(() => { // 模拟请求接口验证密码中 .. 
        if (val === '111111') {
          this.$refs.pay.$payStatus(true) // 传递给子组件
        } else {
          this.$refs.pay.$payStatus(false)
        }
      }, 1000)
    },
    pasEnd1(val) {
      console.log(val);  //得到密码 可能会进行一些加密动作
      setTimeout(() => { // 模拟请求接口验证密码中 .. 
        if (val === '111111') {
          this.$refs.pay1.$payStatus(true)
        } else {
          this.$refs.pay1.$payStatus(false)
        }
      }, 1000)
    }
  }
}
</script>

<style lang="scss">
.example {
  text-align: center;
  margin-bottom: 20px;
  button {
    border: 1px solid #ccc;
    height: 30px;
    background: #fff;
  }
}
</style>


================================================
FILE: src/lib/index.js
================================================
import vuePayKeyboard from './vue-pay-keyboard.vue' // 导入组件
const paykeyboard = {
    install(Vue, options) {
        Vue.component(vuePayKeyboard.name, vuePayKeyboard) // vuePayKeyboard.name 组件的name属性
        // 类似通过 this.$xxx 方式调用插件的 其实只是挂载到原型上而已
        // Vue.prototype.$xxx  // 最终可以在任何地方通过 this.$xxx 调用
        // 虽然没有明确规定用$开头  但是大家都默认遵守这个规定
    }
}
if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(paykeyboard);
}
export default paykeyboard // 导出..

================================================
FILE: src/lib/vue-pay-keyboard.vue
================================================
<template>
    <div class="pay-box" v-if="isPay">
        <!-- <transition v-on:before-enter="beforeEnter"> -->
        <div v-if="isPay">
            <!-- 标题 -->
            <div class="title v-1px-b pr">
                <span>{{payTitle}}</span>
                <span class="pa" @click="close">
                    <svg t="1501505446265" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1904" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18">
                        <path d="M550.659 490.565l324.395-324.386c10.945-10.945 10.945-28.699 0-39.644-10.948-10.95-28.704-10.95-39.648-0.004L511.01 450.916 186.625 126.53c-10.946-10.947-28.703-10.947-39.648 0-10.946 10.95-10.946 28.703 0 39.648l324.385 324.386-324.385 324.401c-10.946 10.944-10.946 28.703 0 39.65 10.945 10.943 28.702 10.943 39.648 0L511.01 530.213l324.396 324.401c10.944 10.944 28.7 10.944 39.648 0 10.945-10.946 10.945-28.705 0-39.649L550.66 490.565z" p-id="1905"></path>
                    </svg>
                </span>
            </div>
            <!--输入的密码-->
            <div class="pas-box v-1px" v-show="keyShow">
                <div v-for="(pas,i) in pasDigits" :key="i" :class="{'v-1px-l':i>0}">
                    <input type="password" :value="val[i]" disabled>
                </div>
            </div>
    
            <!--keyboard-->
            <div class="key-box" v-if="keyShow">
                <div class="item v-1px-t" v-for="(item, i) in keyList" :key="i">
                    <div class="key" v-for="(val, key) in item" :key="key" @touchstart="inputStart(val, $event)" @touchend="inputEnd($event)" :class="{'v-1px-l':key!=0}">
                        {{val}}
                    </div>
                </div>
                <div class="item v-1px-t">
                    <div class="key  " style="background: #e8e8e8"></div>
                    <div class="key v-1px-l" @touchstart="inputStart(0, $event)" @touchend="inputEnd($event)">0
                    </div>
                    <div class="key v-1px-l" style="background: #e8e8e8" @touchstart="del($event)" @touchend="inputEnd($event,'del')">-
                    </div>
                </div>
            </div>
            <div style="text-align: center;" v-show='paySuc'>
                <slot name='pay-status'>
                    {{payStatusText}}
                </slot>
            </div>
            <!-- 密码输入完毕动画 -->
            <div class="loading" v-show="lodingShow" ref="loading">
                <slot name='loading-ani'>
                    <svg t="1501508156392" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1936" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100">
                        <path d="M914.9 682.1c-22 52.1-53.5 98.8-93.7 139s-86.9 71.7-139 93.7c-53.9 22.8-111.1 34.3-170.2 34.3s-116.3-11.5-170.1-34.3c-52.1-22-98.8-53.5-139-93.7s-71.7-86.9-93.7-139C86.4 628.3 74.8 571.1 74.8 512s11.5-116.3 34.3-170.2c22-52.1 53.5-98.8 93.7-139s86.9-71.7 139-93.7c43.3-18.3 88.8-29.4 135.7-33C497 74.6 512 58.4 512 38.9l0 0c0-21.8-18.6-39-40.3-37.3C207.8 22.1 0 242.8 0 512c0 282.8 229.2 512 512 512 269.2 0 489.9-207.8 510.4-471.7 1.7-21.7-15.5-40.3-37.3-40.3l0 0c-19.5 0-35.8 15-37.3 34.4C944.2 593.3 933.2 638.8 914.9 682.1z" p-id="1937" fill="#6A8FE5"></path>
                    </svg>
                </slot>
            </div>
        </div>
        <!-- </transition> -->
    </div>
</template>
<script>
let timer = null;
export default {
    name: 'vue-pay-keyboard',
    props: {
        payTitle: {
            type: String,
            default: '请输入支付密码'
        },
        highlightColor: {// 高亮颜色
            type: String,
            default: '#ccc'
        },
        pasDigits: {// 密码位数
            type: Number,
            default: 6
        },
        isPay: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            keyShow: true,
            lodingShow: false,
            paySuc: false,
            val: [],
            keyList: [
                [1, 2, 3],
                [4, 5, 6],
                [7, 8, 9]
            ],
            payStatus: false
        }
    },
    computed: {
        payStatusText() {
            return this.payStatus ? '支付成功!' : '支付失败,请重输密码!'
        }
    },
    methods: {
        inputEnd(e, d) {
            this.unhighLight(e.currentTarget, d)
        },
        // 恢复默认
        unhighLight(ele, d) {
            if (d) {
                ele.style.backgroundColor = '#e8e8e8'
            } else {
                ele.style.backgroundColor = '#fff'
            }

        },
        // 高亮
        highlight(ele) {
            ele.style.backgroundColor = this.highlightColor
        },
        // 用户输入
        inputStart(val, e) {
            if (this.val.length < this.pasDigits) {
                this.val.push(val)
                if (this.val.length === this.pasDigits) {
                    // 密码输入完毕
                    this.$emit('pas-end', this.val.join(''))
                    this.keyShow = false;
                    this.lodingShow = true;
                    this.$refs.loading.classList.add('loading-ani')
                    this.val = [];
                }
            } else {
                this.$emit('pas-end', this.val.join(''))
            }
            // 设置高亮
            this.highlight(e.currentTarget)
        },
        // 删除输入
        del() {
            if (this.val.length > 0) {
                this.val.pop()
            }
        },
        close() {
            this.$emit('close')
        },
        $payStatus(flag) {
            if (typeof flag != 'boolean') return;
            this.payStatus = flag;
            this.lodingShow = false;
            this.paySuc = true;
            if (flag) {
                timer = setTimeout(() => {
                    clearTimeout(timer)
                    this.$emit('close')
                    this.keyShow = true;
                    this.paySuc = false;
                    this.$refs.loading.classList.remove('loading-ani')
                }, 800)
            } else {
                timer = setTimeout(() => {
                    clearTimeout(timer)
                    this.keyShow = true;
                    this.paySuc = false;
                    this.$refs.loading.classList.remove('loading-ani')
                }, 800)
            }
        }
    }
}
</script>
<style lang="scss" scoped>
div,
span,
input {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
}

input {
    background: none;
    outline: none;
    border: none;
    background-color: transparent;
    border-color: transparent;
    -webkit-appearance: none;
}

@keyframes loadingRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg)
    }
}

.title {
    text-align: center;
    height: 50px;
    line-height: 50px;
    margin-bottom: 25px;
    position: relative;
}

.pa {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-content: center;
    justify-content: center;
}

.loading {
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-ani {
    animation: loadingRotate .8s infinite;
}

.pay-box {
    z-index: 111;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: rgba(0, 0, 0, .5);
    z-index: 999;
    >div {
        position: absolute;
        width: 100%;
        height: 68%;
        left: 0;
        bottom: 0;
        color: #363636;
        background-color: #fff;
    }
}

.v-1px-t,
.v-1px-l,
.v-1px-b,
.v-1px {
    position: relative;
}

.v-1px-b:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #C7C7C7;
    color: #C7C7C7;
    transform-origin: 0 100%;
    transform: scaleY(0.5);
}

.v-1px-t:before {
    z-index: 112;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    content: '';
    border-top: 1px solid #c7c7c7;
    transform: scaleY(.5);
    color: #c7c7c7;
    transform-origin: 0 0;
}

.v-1px-l:before {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    content: '';
    border-left: 1px solid #c7c7c7;
    transform: scaleX(.5);
    color: #c7c7c7;
    transform-origin: 0 0;
}

.v-1px:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    content: '';
    border: 1px solid #c7c7c7;
    transform: scale(.5);
    color: #c7c7c7;
    transform-origin: left top;
    z-index: 1000;
}





































































































/*键盘盒子*/

.key-box {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    font-size: 16px;
    color: #363636;
    .item {
        display: flex;
        text-align: center;
        line-height: 50px;
        height: 50px;
    }
    .key {
        cursor: pointer;
        width: 100%;
        height: 100%;
        flex: 1;
    }
}





































































































/*输入密码框*/

.pas-box {
    width: 80%;
    height: 45px;
    display: flex;
    margin: 0 auto;
    line-height: 45px;
    text-align: center;
    >div {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        >input {
            width: 100%;
            font-size: 18px;
            text-align: center;
            height: 100%;
            display: block;
        }
    }
}

// 进入动画
.slide-enter-active {
    transition: all 10s ease; //   transform: translateY(0px)
}

.slide-enter {
    transform: translateY(500px)
}
</style>


================================================
FILE: src/main.js
================================================
import Vue from 'vue'
import App from './App.vue'
import vuePayKeyboard from './lib/index.js'
// import vuePayKeyboard from './lib/indexvue-pay-keyboard'
Vue.use(vuePayKeyboard)
new Vue({
  el: '#app',
  render: h => h(App)
})


================================================
FILE: webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')

module.exports = {
  // entry: './src/main.js', // 开发时项目入口
  entry: './src/lib/index.js', // 打包发布时入口
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    // filename: 'build.js', // 打包后输出的文件名
    filename: 'vue-pay-keyboard.js', // 我们可不想打包后叫build 多low啊 起一个与项目相对应的
    library: 'PayKeyboard', // library指定的就是你使用require时的模块名，这里便是require("PayKeyboard")
    libraryTarget: 'umd', //libraryTarget会生成不同umd的代码，例如可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的。
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define。
  },
  module: { // loader
    rules: [{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': 'vue-style-loader!css-loader!sass-loader',
            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map' // 生成map文件方便调试
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}