├── .gitignore
├── LICENSE
├── README.md
├── dist
    └── VueInputCode.js
├── example
    ├── app.js
    ├── code.png
    ├── example.html
    └── index.js
├── package.json
├── src
    ├── InputCode.vue
    └── index.js
├── webpack.config.js
├── webpackExample.config.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # OSX
 2 | #
 3 | .DS_Store
 4 | 
 5 | # Xcode
 6 | #
 7 | build/
 8 | *.pbxuser
 9 | !default.pbxuser
10 | *.mode1v3
11 | !default.mode1v3
12 | *.mode2v3
13 | !default.mode2v3
14 | *.perspectivev3
15 | !default.perspectivev3
16 | xcuserdata
17 | *.xccheckout
18 | *.moved-aside
19 | DerivedData
20 | *.hmap
21 | *.ipa
22 | *.xcuserstate
23 | project.xcworkspace
24 | 
25 | # Android/IJ
26 | #
27 | *.iml
28 | .idea
29 | .gradle
30 | local.properties
31 | 
32 | # node.js
33 | #
34 | node_modules/
35 | npm-debug.log
36 | 
37 | # BUCK
38 | buck-out/
39 | \.buckd/
40 | android/app/libs
41 | android/keystores/debug.keystore
42 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 zhouyuexie
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-input-code
 2 | 
 3 | ## 基于Vue2.0+的移动端验证码输入组件.
 4 | 
 5 | <img src="./example/code.png">
 6 | 
 7 | ## 功能预览
 8 | 
 9 | + 输入时回调
10 | + 结果回调
11 | + 自定义错误处理
12 | + 自定义验证码个数
13 | + 样式可控
14 | 
15 | [这里是可爱的Demo](https://quietboys.github.io/vue-input-code/)
16 | 
17 | ## 支持
18 | 
19 | 支持 Vue.js 2.0+.
20 | 
21 | ## 安装和使用
22 | 
23 | ```javascript
24 | npm install vue-input-code --save
25 | ```
26 | 
27 | - 作为全局组件使用
28 | 
29 | ```javascript
30 | //在项目入口文件
31 | import Vue from 'vue';
32 | import VueInputCode from 'vue-input-code';
33 | Vue.component('VueInputCode', VueInputCode)
34 | ```
35 | 
36 | - 作为局部组件
37 | 
38 | ```javascript
39 | //在某个组件中
40 | import VueInputCode from 'vue-input-code'
41 | export default {
42 |   components: {
43 |     VueInputCode
44 |   }
45 | }
46 | ```
47 | 
48 | HTML中使用:
49 | 
50 | ```html
51 | <vue-input-code span-size="20px" type="number" :number="5" height="50px" span-color="#f35252" input-color="#3498db" input-size="24px" :code="code" :getinput="getInput" :success="success"></vue-input-code>
52 | 
53 | <!-- 请在引用vue之后引用组件VueInputCode -->
54 | <script src="/you/local/file/path/vue.min.js"></script>
55 | <script src="/you/local/file/path/VueInputCode.min.js"></script> 
56 | ```
57 | 
58 | ## API
59 | 
60 | | 参数    | 类型    | 说明   |  可选值 | 默认值 |
61 | | ------------- |-------| -----| ----| -------|
62 | | code | 数组 | 用户输入的验证码数组 | — | — |
63 | | type | 字符串 | 用户输入类型 | number,text | number |
64 | | upper-case | Boolean | 类型为text的时候可调整输入的字符串为大写 | true,false | false |
65 | | get-input | 函数 | 用户每次输入后的回调函数,接受一个验证码字符串 | — | — |
66 | | success | 函数 | 用户输入完成后的回调函数,接受一个验证码字符串 | — | — |
67 | | error | 函数 | 用户输入不是预期的值的回调函数,接收一个错误的值 | — | — |
68 | | customValidate | 函数 | 自定义判断用户输入值是否正确,判断输入错误则需返回`false`,正确则返回`true`| — | — |
69 | | span-size | 字符串 | 输入后的字体显示大小 | — | 20px |
70 | | span-color | 字符串 | 输入后的字体显示颜色 | — | #f35252 |
71 | | input-size | 字符串 | 输入框的字体显示大小 | — | 20px |
72 | | input-color | 字符串 | 输入框的字体显示颜色 | — | #000 |
73 | | number | 数字 | 验证码个数 | — | 6 |
74 | | height | 字符串 | 整个框的显示高度 | — | 60px |
75 | 
76 | ## CHANGELOG
77 | 
78 | - version 1.3.1: fixed [issuse](https://github.com/zhouyuexie/vue-input-code/issues/4) about chinese input method bug.
79 | - version 1.5.0: add customValidate
80 | 


--------------------------------------------------------------------------------
/dist/VueInputCode.js:
--------------------------------------------------------------------------------
1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueInputCode=e():t.VueInputCode=e()}(window,function(){return i={},o.m=n=[function(t,e,n){var i=n(3),o=n(4);"string"==typeof(o=o.__esModule?o.default:o)&&(o=[[t.i,o,""]]);var r={insert:"head",singleton:!1};i(o,r);t.exports=o.locals||{}},function(t,e,n){"use strict";t.exports=function(n){var d=[];return d.toString=function(){return this.map(function(t){var e=function(t,e){var n=t[1]||"",i=t[3];if(!i)return n;if(e&&"function"==typeof btoa){var o=function(t){var e=btoa(unescape(encodeURIComponent(JSON.stringify(t)))),n="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(e);return"/*# ".concat(n," */")}(i),r=i.sources.map(function(t){return"/*# sourceURL=".concat(i.sourceRoot||"").concat(t," */")});return[n].concat(r).concat([o]).join("\n")}return[n].join("\n")}(t,n);return t[2]?"@media ".concat(t[2]," {").concat(e,"}"):e}).join("")},d.i=function(t,e,n){"string"==typeof t&&(t=[[null,t,""]]);var i={};if(n)for(var o=0;o<this.length;o++){var r=this[o][0];null!=r&&(i[r]=!0)}for(var u=0;u<t.length;u++){var s=[].concat(t[u]);n&&i[s[0]]||(e&&(s[2]?s[2]="".concat(e," and ").concat(s[2]):s[2]=e),d.push(s))}},d}},function(t,e,n){"use strict";var i=n(0);n.n(i).a},function(t,e,r){"use strict";var n,i,o=function(){return void 0===n&&(n=Boolean(window&&document&&document.all&&!window.atob)),n},u=(i={},function(t){if(void 0===i[t]){var e=document.querySelector(t);if(window.HTMLIFrameElement&&e instanceof window.HTMLIFrameElement)try{e=e.contentDocument.head}catch(t){e=null}i[t]=e}return i[t]}),p=[];function l(t){for(var e=-1,n=0;n<p.length;n++)if(p[n].identifier===t){e=n;break}return e}function d(t,e){for(var n={},i=[],o=0;o<t.length;o++){var r=t[o],u=e.base?r[0]+e.base:r[0],s=n[u]||0,d="".concat(u," ").concat(s);n[u]=s+1;var c=l(d),a={css:r[1],media:r[2],sourceMap:r[3]};-1!==c?(p[c].references++,p[c].updater(a)):p.push({identifier:d,updater:function(e,t){var n,i,o;{var r;o=t.singleton?(r=b++,n=m=m||f(t),i=h.bind(null,n,r,!1),h.bind(null,n,r,!0)):(n=f(t),i=function(t,e,n){var i=n.css,o=n.media,r=n.sourceMap;o?t.setAttribute("media",o):t.removeAttribute("media");r&&btoa&&(i+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(r))))," */"));if(t.styleSheet)t.styleSheet.cssText=i;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(i))}}.bind(null,n,t),function(){!function(t){if(null===t.parentNode)return;t.parentNode.removeChild(t)}(n)})}return i(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;i(e=t)}else o()}}(a,e),references:1}),i.push(d)}return i}function f(t){var e,n=document.createElement("style"),i=t.attributes||{};if(void 0!==i.nonce||(e=r.nc)&&(i.nonce=e),Object.keys(i).forEach(function(t){n.setAttribute(t,i[t])}),"function"==typeof t.insert)t.insert(n);else{var o=u(t.insert||"head");if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(n)}return n}var s,c=(s=[],function(t,e){return s[t]=e,s.filter(Boolean).join("\n")});function h(t,e,n,i){var o,r,u=n?"":i.media?"@media ".concat(i.media," {").concat(i.css,"}"):i.css;t.styleSheet?t.styleSheet.cssText=c(e,u):(o=document.createTextNode(u),(r=t.childNodes)[e]&&t.removeChild(r[e]),r.length?t.insertBefore(o,r[e]):t.appendChild(o))}var m=null,b=0;t.exports=function(t,u){(u=u||{}).singleton||"boolean"==typeof u.singleton||(u.singleton=o());var s=d(t=t||[],u);return function(t){if(t=t||[],"[object Array]"===Object.prototype.toString.call(t)){for(var e=0;e<s.length;e++){var n=l(s[e]);p[n].references--}for(var i=d(t,u),o=0;o<s.length;o++){var r=l(s[o]);0===p[r].references&&(p[r].updater(),p.splice(r,1))}s=i}}}},function(t,e,n){"use strict";n.r(e);var i=n(1),o=n.n(i)()(!1);o.push([t.i,".vue_input_code{width:100%}.vue_input_code .input{width:100%;position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center}.vue_input_code .input>div{border:1px solid #323232;font-weight:900;background-color:white}.vue_input_code .input>div:nth-child(n){border-right:none}.vue_input_code .input>div:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px;border-right:1px solid #323232}.vue_input_code .input>div input{font-size:20px;width:90%;color:#323232;text-align:center;outline:none;border:none;margin-right:5px;-webkit-tap-highlight-color:rgba(255,255,255,0)}.vue_input_code .input .input-code{position:absolute;top:0;left:0;margin-left:1%;border:none;background:none;display:flex;flex-direction:row;justify-content:center;align-items:center}.vue_input_code .input>span{border:1px solid #323232;font-weight:900;background-color:white;display:inline-block;text-align:center;font-size:20px}.vue_input_code .input>span:nth-child(n){border-right:none}.vue_input_code .input>span:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}.vue_input_code .input>span:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px;border-right:1px solid #323232}.vue_input_code .input>span.first{border-top-left-radius:5px;border-bottom-left-radius:5px}.vue_input_code .input .input-code.first{border-top-left-radius:5px;border-bottom-left-radius:5px}.vue_input_code .input .input-code.last{border-top-right-radius:5px;border-bottom-right-radius:5px}\n",""]),e.default=o},function(t,e,n){"use strict";n.r(e);var i={props:{code:{type:Array,default:function(){return[]},required:!0},success:{type:Function,default:function(){}},error:{type:Function,default:function(){}},customValidate:{type:Function,default:void 0},getInput:{type:Function,default:function(){}},spanSize:{type:String,default:"20px"},spanColor:{type:String,default:"#f35252"},inputSize:{type:String,default:"20px"},inputColor:{type:String,default:"#000"},height:{type:String,default:"40px"},number:{type:Number,default:6},type:{type:String,default:"number",validator:function(t){return-1<["number","text"].indexOf(t)}},upperCase:{type:Boolean,default:!1}},data:function(){return{inputCodeNum:0,left:"0",inputCode:"",codeArray:[],blockWidth:(100/this.number).toFixed(4)+"%",blockSize:(100/this.number).toFixed(4),block:[],zIndex:10}},created:function(){for(var t=0;t<this.number;t++)this.block.push(t)},computed:{codeString:function(){var e="";return this.codeArray.map(function(t){e+=t}),e}},methods:{deleteInput:function(){if(this.inputCodeNum===this.number-1)return this.inputCodeNum--,this.left=this.blockSize*this.inputCodeNum+"%",this.codeArray.pop(),this.code.pop(),void this.getInput(this.codeString);0!==this.inputCodeNum&&(this.inputCodeNum--,this.codeArray.pop(),this.code.pop(),this.left=this.blockSize*this.inputCodeNum+"%",this.getInput(this.codeString))},inputCodeEvent:function(){if(!(this.customValidate?this.customValidate:this.isCodeCorrect)(this.inputCode))return this.error(this.inputCode),void(this.inputCode="");this.upperCase&&(this.inputCode=this.inputCode.toUpperCase()),this.inputCodeNum<this.number-1?(this.codeArray.push(this.inputCode),this.code.push(this.inputCode),this.inputCode="",this.inputCodeNum++,this.left=this.blockSize*this.inputCodeNum+"%",this.getInput(this.codeString)):this.inputCodeNum===this.number-1&&(this.inputCodeNum++,this.codeArray.push(this.inputCode),this.code.push(this.inputCode),this.success(this.codeString),this.getInput(this.codeString))},isCodeCorrect:function(t){return!(!t||" "===t)&&(("number"!==this.type||!isNaN(Number(t)))&&(this.type,!0))},blurInput:function(){this.zIndex=-10},focusInput:function(){this.zIndex=10,this.$refs.input_code.focus()}}};n(2);var o,r,u,s,d,c,a,p,l,f,h,m,b=(r=function(){var n=this,t=n.$createElement,i=n._self._c||t;return i("div",{staticClass:"vue_input_code"},[i("div",{staticClass:"input",style:{height:n.height},on:{click:n.focusInput}},[i("div",{staticClass:"input-code",class:{first:0===n.inputCodeNum,last:6===n.inputCodeNum},style:{left:n.left,"z-index":n.zIndex,height:n.height,width:n.blockSize-1+"%"}},["number"===n.type?[i("input",{directives:[{name:"model",rawName:"v-model",value:n.inputCode,expression:"inputCode"}],ref:"input_code",style:{"font-size":n.inputSize,color:n.inputColor},attrs:{type:"tel",autofocus:"",maxlength:"1"},domProps:{value:n.inputCode},on:{keyup:[function(t){return n.inputCodeEvent(t)},function(t){return!t.type.indexOf("key")&&n._k(t.keyCode,"delete",[8,46],t.key,["Backspace","Delete","Del"])?null:n.deleteInput(t)}],blur:n.blurInput,input:function(t){t.target.composing||(n.inputCode=t.target.value)}}})]:[i("input",{directives:[{name:"model",rawName:"v-model",value:n.inputCode,expression:"inputCode"}],ref:"input_code",style:{"font-size":n.inputSize,color:n.inputColor},attrs:{type:"text",autofocus:"",maxlength:"1"},domProps:{value:n.inputCode},on:{keyup:[function(t){return n.inputCodeEvent(t)},function(t){return!t.type.indexOf("key")&&n._k(t.keyCode,"delete",[8,46],t.key,["Backspace","Delete","Del"])?null:n.deleteInput(t)}],blur:n.blurInput,input:function(t){t.target.composing||(n.inputCode=t.target.value)}}})]],2),n._v(" "),n._l(n.block,function(t,e){return i("span",{key:t,class:{first:0===e,last:e===n.number-1},style:{"font-size":n.spanSize,color:n.spanColor,height:n.height,"line-height":n.height,width:n.blockWidth},domProps:{textContent:n._s(n.codeArray[e]?n.codeArray[e]:"")}})})],2)])},s=!(u=[]),a=c=d=null,m="function"==typeof(o=i)?o.options:o,r&&(m.render=r,m.staticRenderFns=u,m._compiled=!0),s&&(m.functional=!0),c&&(m._scopeId="data-v-"+c),a?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),d&&d.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},m._ssrRegister=l):d&&(l=p?function(){d.call(this,(m.functional?this.parent:this).$root.$options.shadowRoot)}:d),l&&(m.functional?(m._injectStyles=l,f=m.render,m.render=function(t,e){return l.call(e),f(t,e)}):(h=m.beforeCreate,m.beforeCreate=h?[].concat(h,l):[l])),{exports:o,options:m}).exports;"undefined"!=typeof window&&window.Vue&&Vue.component("vue-input-code",b);e.default=b}],o.c=i,o.d=function(t,e,n){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)o.d(n,i,function(t){return e[t]}.bind(null,i));return n},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="",o(o.s=5);function o(t){if(i[t])return i[t].exports;var e=i[t]={i:t,l:!1,exports:{}};return n[t].call(e.exports,e,e.exports,o),e.l=!0,e.exports}var n,i});


--------------------------------------------------------------------------------
/example/code.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/obetame/vue-input-code/eff96eaa03587c7f42e76315dbcd59ab7971b6d9/example/code.png


--------------------------------------------------------------------------------
/example/example.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-cn">
 3 | 
 4 | <head>
 5 |   <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
 6 |   <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
 7 |   <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
 8 |         name="viewport"/>
 9 |   <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"></META>
10 |   <META HTTP-EQUIV="Expires" CONTENT="0"></META>
11 |   <title>验证码输入组件</title>
12 |   <style type="text/css">
13 |     header {
14 |       height: 50px;
15 |       background-color: #f35252;
16 |       position: fixed;
17 |       top: 0;
18 |       left: 0;
19 |       width: 100%;
20 |       z-index: 100;
21 |       padding: 0;
22 |       margin: 0;
23 |       text-align: center;
24 |     }
25 | 
26 |     header > span {
27 |       height: 50px;
28 |       line-height: 50px;
29 |       color: white;
30 |       font-size: 18px;
31 |       font-weight: 900;
32 |       display: inline-block;
33 |     }
34 | 
35 |     #app {
36 |       padding-top: 50px;
37 |     }
38 | 
39 |     p {
40 |       color: #c8c8c8;
41 |       text-align: center;
42 |       margin: 10px 0;
43 |     }
44 |   </style>
45 | </head>
46 | 
47 | <body>
48 | <header class="header"><span>验证码输入</span></header>
49 | <div id="app">
50 |   <p>高度40px</p>
51 |   <vue-input-code span-size="20px" type="number" :number="6" height="40px" span-color="#000"
52 |                   input-color="#000" input-size="20px" :code="code" :get-input="getInput"
53 |                   :success="success"></vue-input-code>
54 |   <p>高度60px</p>
55 |   <vue-input-code span-size="20px" type="number" :number="6" height="60px" span-color="#000"
56 |                   input-color="#000" input-size="20px" :code="code1" :get-input="getInput"
57 |                   :error="error" :success="success"></vue-input-code>
58 |   <p>显示颜色</p>
59 |   <vue-input-code span-size="20px" type="number" :number="6" height="40px" span-color="#f35252"
60 |                   input-color="#3498db" input-size="20px" :code="code2" :error="error"
61 |                   :get-input="getInput" :success="success"></vue-input-code>
62 |   <p>字体大小</p>
63 |   <vue-input-code span-size="20px" type="number" :number="6" height="40px" span-color="#f35252"
64 |                   input-color="#3498db" input-size="26px" :code="code3" :error="error"
65 |                   :get-input="getInput" :success="success"></vue-input-code>
66 |   <p>4位验证码大写</p>
67 |   <vue-input-code span-size="20px" :upper-case="true" type="text" :number="4" height="40px"
68 |                   span-color="#f35252" input-color="#3498db" input-size="26px" :error="error"
69 |                   :code="code4" :get-input="getInput" :success="success"></vue-input-code>
70 |   <p>11位手机号</p>
71 |   <vue-input-code span-size="20px" type="number" :number="11" height="40px" span-color="#f35252"
72 |                   input-color="#3498db" input-size="26px" :code="code5" :error="error"
73 |                   :get-input="getInput" :success="success"></vue-input-code>
74 | </div>
75 | <script type="text/javascript" src="./app.js"></script>
76 | </body>
77 | 
78 | </html>
79 | 


--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import VueInputCode from '../src/inputcode.vue';
 3 | // Vue.component('VueInputCode', VueInputCode);
 4 | 
 5 | new Vue({
 6 | 	el:"#app",
 7 | 	data:{
 8 | 		code:[],
 9 | 		code1:[],
10 | 		code2:[],
11 | 		code3:[],
12 | 		code4:[],
13 | 		code5:[],
14 | 		codeString:"",
15 | 		input:""
16 | 	},
17 | 	created(){
18 | 		
19 | 	},
20 | 	methods:{
21 | 		success(code){
22 | 			this.codeString = code;
23 | 		},
24 | 		getInput(code){
25 | 			this.input = code;
26 | 		},
27 | 		error(code){
28 | 			console.log("错误输入:", code)
29 | 		}
30 | 	},
31 | 	components:{
32 | 		VueInputCode
33 | 	}
34 | })


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-input-code",
 3 |   "version": "1.5.0",
 4 |   "description": "基于vue2.0+的验证码输入组件",
 5 |   "main": "src/index.js",
 6 |   "directories": {
 7 |     "example": "example"
 8 |   },
 9 |   "scripts": {
10 |     "start": "NODE_ENV=development webpack",
11 |     "build": "NODE_ENV=production webpack",
12 |     "example": "NODE_ENV=development webpack --config webpackExample.config.js"
13 |   },
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "git+https://github.com/zhouyuexie/vue-input-code.git"
17 |   },
18 |   "browsers": [
19 |     "last 2 versions",
20 |     "last 3 Safari versions"
21 |   ],
22 |   "keywords": [
23 |     "vue",
24 |     "input",
25 |     "code",
26 |     "input-code"
27 |   ],
28 |   "author": "zhouyuexie",
29 |   "license": "MIT",
30 |   "bugs": {
31 |     "url": "https://github.com/zhouyuexie/vue-input-code/issues"
32 |   },
33 |   "homepage": "https://github.com/zhouyuexie/vue-input-code#readme",
34 |   "devDependencies": {
35 |     "@babel/core": "^7.11.6",
36 |     "@babel/plugin-transform-runtime": "^7.11.5",
37 |     "@babel/preset-env": "^7.11.5",
38 |     "@babel/register": "^7.11.5",
39 |     "@babel/runtime": "^7.11.2",
40 |     "babel-eslint": "^10.1.0",
41 |     "babel-loader": "^8.1.0",
42 |     "babel-runtime": "^6.26.0",
43 |     "css-loader": "^4.3.0",
44 |     "ejs-loader": "^0.5.0",
45 |     "eslint": "7.9.0",
46 |     "eslint-loader": "^4.0.2",
47 |     "eslint-plugin-html": "^6.1.0",
48 |     "file-loader": "^6.1.0",
49 |     "html-webpack-plugin": "^4.5.0",
50 |     "node-sass": "^4.14.1",
51 |     "postcss-loader": "^4.0.2",
52 |     "sass-loader": "^10.0.2",
53 |     "style-loader": "^1.2.1",
54 |     "uglifyjs-webpack-plugin": "^2.2.0",
55 |     "underscore": "^1.11.0",
56 |     "url-loader": "^4.1.0",
57 |     "vue": "^2.6.12",
58 |     "vue-hot-reload-api": "^2.3.4",
59 |     "vue-html-loader": "^1.2.4",
60 |     "vue-loader": "^15.9.3",
61 |     "vue-style-loader": "^4.1.2",
62 |     "vue-template-compiler": "^2.6.12",
63 |     "webpack": "^4.44.2",
64 |     "webpack-cli": "^3.3.12",
65 |     "webpack-stream": "6.1.0"
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/src/InputCode.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="vue_input_code">
  3 |     <div class="input" @click="focusInput" :style="{'height':height}">
  4 |       <div
  5 |           class="input-code"
  6 |           :class="{first: inputCodeNum===0, last: inputCodeNum === 6}"
  7 |           :style="{left: left, 'z-index': zIndex, 'height': height, 'width': blockSize - 1 + '%'}">
  8 |         <template v-if="type==='number'">
  9 |           <input
 10 |               ref="input_code"
 11 |               type="tel"
 12 |               :style="{'font-size': inputSize, 'color': inputColor}"
 13 |               @keyup="inputCodeEvent($event)"
 14 |               @blur="blurInput"
 15 |               v-model="inputCode"
 16 |               autofocus
 17 |               maxlength="1"
 18 |               @keyup.delete="deleteInput">
 19 |         </template>
 20 |         <template v-else>
 21 |           <input
 22 |               ref="input_code"
 23 |               type="text"
 24 |               :style="{'font-size': inputSize, 'color': inputColor}"
 25 |               @keyup="inputCodeEvent($event)"
 26 |               @blur="blurInput"
 27 |               v-model="inputCode"
 28 |               autofocus maxlength="1"
 29 |               @keyup.delete="deleteInput">
 30 |         </template>
 31 |       </div>
 32 |       <span
 33 |           v-for="(item,index) in block"
 34 |           :key="item"
 35 |           :style="{'font-size': spanSize, 'color': spanColor, 'height': height, 'line-height': height, 'width': blockWidth}"
 36 |           v-text="codeArray[index] ? codeArray[index] : ''"
 37 |           :class="{'first':index === 0, 'last': index === number - 1}"></span>
 38 |     </div>
 39 |   </div>
 40 | </template>
 41 | 
 42 | <script>
 43 | export default {
 44 |   props: {
 45 |     //接收一个可以改变父组件的数据(引用类型才可以修改,所以这里是引用类型)
 46 |     code: {
 47 |       type: Array,
 48 |       default: () => [],
 49 |       required: true
 50 |     },
 51 |     //用户输入完成后的回调
 52 |     success: {
 53 |       type: Function,
 54 |       default: () => {
 55 |       }
 56 |     },
 57 |     //用户输入错误的时候调用的函数
 58 |     error: {
 59 |       type: Function,
 60 |       default: () => {
 61 |       }
 62 |     },
 63 |     customValidate: {
 64 |       type: Function,
 65 |       default: undefined
 66 |     },
 67 |     //每次输入都回调
 68 |     getInput: {
 69 |       type: Function,
 70 |       default: () => {
 71 |       }
 72 |     },
 73 |     // 显示字体大小
 74 |     spanSize: {
 75 |       type: String,
 76 |       default: "20px"
 77 |     },
 78 |     // 显示字体颜色
 79 |     spanColor: {
 80 |       type: String,
 81 |       default: "#f35252"
 82 |     },
 83 |     //输入框字体大小
 84 |     inputSize: {
 85 |       type: String,
 86 |       default: "20px"
 87 |     },
 88 |     //输入框字体颜色
 89 |     inputColor: {
 90 |       type: String,
 91 |       default: "#000"
 92 |     },
 93 |     height: {
 94 |       type: String,
 95 |       default: "40px"
 96 |     },
 97 |     //验证码个数
 98 |     number: {
 99 |       type: Number,
100 |       default: 6,
101 |     },
102 |     //用户输入类型,有number,text
103 |     type: {
104 |       type: String,
105 |       default: "number",
106 |       validator: (value) => {
107 |         return ['number', 'text'].indexOf(value) > -1;
108 |       }
109 |     },
110 |     // 输入的字母是否需要大写
111 |     upperCase: {
112 |       type: Boolean,
113 |       default: false
114 |     }
115 |   },
116 |   data() {
117 |     return {
118 |       inputCodeNum: 0, //输入框的位置
119 |       left: "0", //输入框距离左边的距离
120 |       inputCode: "", //单次输入的值
121 |       codeArray: [], //输入的值数组
122 | 
123 |       blockWidth: (100 / this.number).toFixed(4) + '%', //每个格子的宽度
124 |       blockSize: (100 / this.number).toFixed(4), //计算用宽度
125 |       block: [], //存放格子
126 | 
127 |       zIndex: 10 //输入框层级(开始默认最高)
128 |     }
129 |   },
130 |   created() {
131 |     for (let i = 0; i < this.number; i++) {
132 |       this.block.push(i);//获取格子数并保持方便循环
133 |     }
134 |   },
135 |   computed: {
136 |     codeString() {
137 |       let data = "";
138 |       this.codeArray.map(item => {
139 |         data += item;
140 |       });
141 |       return data;
142 |     }
143 |   },
144 |   methods: {
145 |     /** 删除输入 */
146 |     deleteInput() {
147 |       if (this.inputCodeNum === this.number - 1) {
148 |         this.inputCodeNum--;
149 |         this.left = (this.blockSize * this.inputCodeNum) + "%";
150 |         this.codeArray.pop();
151 |         this.code.pop();
152 |         this.getInput(this.codeString);//回调
153 |         return;
154 |       }
155 |       if (this.inputCodeNum !== 0) {
156 |         this.inputCodeNum--;
157 |         this.codeArray.pop();
158 |         this.code.pop();
159 |         this.left = (this.blockSize * this.inputCodeNum) + '%'
160 |         this.getInput(this.codeString);//回调
161 |       }
162 |     },
163 |     /** 每次输入的事件 */
164 |     inputCodeEvent() {
165 |       const checkFn = this.customValidate ? this.customValidate : this.isCodeCorrect
166 |       const isCorrect = checkFn(this.inputCode)
167 | 
168 |       if (!isCorrect) {
169 |         this.error(this.inputCode);
170 |         this.inputCode = '';
171 |         return;
172 |       }
173 | 
174 |       if (this.upperCase) {
175 |         this.inputCode = this.inputCode.toUpperCase();
176 |       }
177 | 
178 |       if (this.inputCodeNum < this.number - 1) {
179 |         this.codeArray.push(this.inputCode);
180 |         this.code.push(this.inputCode);
181 |         this.inputCode = '';
182 |         this.inputCodeNum++;
183 |         this.left = (this.blockSize * this.inputCodeNum) + '%';
184 | 
185 |         this.getInput(this.codeString);//回调
186 |       } else {
187 |         if (this.inputCodeNum === this.number - 1) {
188 |           this.inputCodeNum++;
189 |           this.codeArray.push(this.inputCode);
190 |           this.code.push(this.inputCode);
191 |           this.success(this.codeString);//输入完成后回调
192 |           this.getInput(this.codeString);//回调
193 |         }
194 |       }
195 |     },
196 |     isCodeCorrect(code) {
197 |       if (!code || code === ' ') {
198 |         return false;
199 |       }
200 |       if (this.type === "number" && isNaN(Number(code))) {
201 |         return false;
202 |       }
203 |       if (this.type === 'text') {
204 |         return true;
205 |       }
206 | 
207 |       return true;
208 |     },
209 |     /** 失去焦点 */
210 |     blurInput() {
211 |       this.zIndex = -10;
212 |     },
213 |     /** 获得焦点 */
214 |     focusInput() {
215 |       this.zIndex = 10;
216 |       this.$refs.input_code.focus();
217 |     }
218 |   }
219 | }
220 | </script>
221 | 
222 | <style lang="scss">
223 | @mixin display_flex($action) {
224 |   @if $action=='column' {
225 |     display: flex;
226 |     flex-direction: column;
227 |     justify-content: center;
228 |     align-items: center;
229 |   } @else {
230 |     display: flex;
231 |     flex-direction: row;
232 |     justify-content: center;
233 |     align-items: center;
234 |   }
235 | }
236 | 
237 | .vue_input_code {
238 |   width: 100%;
239 | 
240 |   .input {
241 |     width: 100%;
242 |     position: relative;
243 |     @include display_flex('row');
244 | 
245 |     > div {
246 |       border: 1px solid #323232;
247 |       font-weight: 900;
248 |       background-color: white;
249 | 
250 |       &:nth-child(n) {
251 |         border-right: none;
252 |       }
253 | 
254 |       &:last-child {
255 |         border-top-right-radius: 5px;
256 |         border-bottom-right-radius: 5px;
257 |         border-right: 1px solid #323232;
258 |       }
259 | 
260 |       input {
261 |         font-size: 20px;
262 |         width: 90%;
263 |         color: rgb(50, 50, 50);
264 |         text-align: center;
265 |         outline: none;
266 |         border: none;
267 |         margin-right: 5px;
268 |         -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
269 |       }
270 |     }
271 | 
272 |     .input-code {
273 |       position: absolute;
274 |       top: 0;
275 |       left: 0;
276 |       margin-left: 1%;
277 |       border: none;
278 |       background: none;
279 |       @include display_flex("row");
280 |     }
281 | 
282 |     > span {
283 |       border: 1px solid #323232;
284 |       font-weight: 900;
285 |       background-color: white;
286 |       display: inline-block;
287 |       text-align: center;
288 |       font-size: 20px;
289 | 
290 |       &:nth-child(n) {
291 |         border-right: none;
292 |       }
293 | 
294 |       &:first-child {
295 |         border-top-left-radius: 5px;
296 |         border-bottom-left-radius: 5px;
297 |       }
298 | 
299 |       &:last-child {
300 |         border-top-right-radius: 5px;
301 |         border-bottom-right-radius: 5px;
302 |         border-right: 1px solid #323232;
303 |       }
304 |     }
305 | 
306 |     > span.first {
307 |       border-top-left-radius: 5px;
308 |       border-bottom-left-radius: 5px;
309 |     }
310 | 
311 |     .input-code.first {
312 |       border-top-left-radius: 5px;
313 |       border-bottom-left-radius: 5px;
314 |     }
315 | 
316 |     .input-code.last {
317 |       border-top-right-radius: 5px;
318 |       border-bottom-right-radius: 5px;
319 |     }
320 |   }
321 | }
322 | </style>


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import VueInputCode from './InputCode.vue';
2 | 
3 | if (typeof window !== 'undefined' && window.Vue) {
4 | 	Vue.component('vue-input-code', VueInputCode);
5 | }
6 | 
7 | export default VueInputCode;
8 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const {VueLoaderPlugin} = require("vue-loader");
 2 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 3 | 
 4 | const isDev = process.env.NODE_ENV === 'development';
 5 | 
 6 | module.exports = {
 7 |   entry: './src/index.js',
 8 |   mode: process.env.NODE_ENV || 'development',
 9 |   output: {
10 |     library: 'VueInputCode',
11 |     libraryTarget: 'umd',
12 |     path: __dirname + '/dist',
13 |     filename: 'VueInputCode.js'
14 |   },
15 |   resolve: {
16 |     extensions: ['.js', '.vue', '.css']
17 |   },
18 |   externals: {
19 |     vue: 'Vue'
20 |   },
21 |   module: {
22 |     rules: [{
23 |       // 这是处理es6文件
24 |       test: /\.js$/,
25 |       loader: 'babel-loader',
26 |       exclude: /node_modules/,
27 |       options: {
28 |         presets: ['@babel/preset-env'],
29 |         plugins: ['@babel/plugin-transform-runtime']
30 |       }
31 |     }, {
32 |       //这是处理scss文件
33 |       test: /\.scss$/,
34 |       use: ['style-loader', 'css-loader', 'sass-loader']
35 |     }, {
36 |       test: /\.vue$/,
37 |       include: /src/,
38 |       loader: 'vue-loader',
39 |     }, {
40 |       // 这是处理css文件
41 |       test: /\.css$/,
42 |       use: ['style-loader', 'css-loader', 'sass-loader']
43 |     }, {
44 |       test: /\.(png|jpg|gif)$/,
45 |       loader: 'url-loader',
46 |       options: {
47 |         // Inline files smaller then 10kb as base64 dataURL
48 |         limit: 10000,
49 |         // Fallback to file-loader with this naming scheme
50 |         name: '[name].[ext]?[hash]'
51 |       }
52 |     }]
53 |   },
54 |   watch: isDev,
55 |   optimization: {
56 |     minimizer: [
57 |       new UglifyJsPlugin({
58 |         uglifyOptions: {
59 |           output: {
60 |             comments: false
61 |           }
62 |         }
63 |       })
64 |     ]
65 |   },
66 |   plugins: [new VueLoaderPlugin()]
67 | }


--------------------------------------------------------------------------------
/webpackExample.config.js:
--------------------------------------------------------------------------------
 1 | const {VueLoaderPlugin} = require("vue-loader");
 2 | 
 3 | module.exports = {
 4 |   entry: './example/index.js',
 5 |   mode: 'development',
 6 |   output: {
 7 |     library: 'VueInputCode',
 8 |     libraryTarget: 'umd',
 9 |     path: __dirname + '/example',
10 |     filename: 'app.js'
11 |   },
12 |   devtool: 'inline-source-map',
13 |   resolve: {
14 |     alias: {
15 |       'vue$': 'vue/dist/vue.esm.js'
16 |     },
17 |     extensions: ['*', '.js', '.vue', '.json'],
18 |   },
19 |   module: {
20 |     rules: [{
21 |       // 这是处理es6文件
22 |       test: /\.js$/,
23 |       loader: 'babel-loader',
24 |       exclude: /node_modules/,
25 |       options: {
26 |         presets: ['@babel/preset-env'],
27 |         plugins: ['@babel/plugin-transform-runtime']
28 |       }
29 |     }, {
30 |       //这是处理scss文件
31 |       test: /\.scss$/,
32 |       use: ['style-loader', 'css-loader', 'sass-loader']
33 |     }, {
34 |       test: /\.vue$/,
35 |       include: /src/,
36 |       loader: 'vue-loader',
37 |     }, {
38 |       // 这是处理css文件
39 |       test: /\.css$/,
40 |       use: ['style-loader', 'css-loader', 'sass-loader']
41 |     }, {
42 |       test: /\.(png|jpg|gif)$/,
43 |       loader: 'url-loader',
44 |       options: {
45 |         // Inline files smaller then 10kb as base64 dataURL
46 |         limit: 10000,
47 |         // Fallback to file-loader with this naming scheme
48 |         name: '[name].[ext]?[hash]'
49 |       }
50 |     }]
51 |   },
52 |   watch: false,
53 |   plugins: [new VueLoaderPlugin()]
54 | }


--------------------------------------------------------------------------------