car-number-keyboard
Version:
车牌号码输入键盘
2 lines • 11 kB
JavaScript
(function(){"use strict";var e={110:function(e,i,r){var t=r(963),s=r(252);const a={class:"keyboardInput"},o={class:"box"};function n(e,i,r,t,n,c){const l=(0,s.up)("carNumberKeyboard");return(0,s.wg)(),(0,s.iD)("div",a,[(0,s._)("div",o,[(0,s.Wm)(l,{value:n.carNo,firstFocus:!0,onOnChange:c.keyboardChange},null,8,["value","onOnChange"])])])}var c={name:"App",data(){return{showInputBox:!0,showKeyboardInputBox:!0,car:["","","","","","","",""],curIndex:-1,carNo:""}},mounted(){setTimeout((()=>{this.carNo="粤A898TV"}),500)},methods:{keyboardChange(e,i){this.car=e,this.curIndex=i,console.log("get val",e,i)},inputClick(e){this.curIndex=e,this.$refs.keyboard.inputItemClick(e)},carNoChar(e){return this.car[e]},keyboardChange(e,i){console.log(e,i),this.carNo=e.join("")}}},l=r(744);const u=(0,l.Z)(c,[["render",n]]);var d=u,h=(r(335),r(577)),A="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAjCAYAAADrJzjpAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHnSURBVHgB1ZiJUcMwEEU/HbgDtgNSgqkASkgJdJBQQeggogLoIJRAB1kqCFQA2nE0XjtxJOuIzZv5k2Mc7YtsS7KAf8oN8lDbLGzukJcvm0+bD5tvZKS22dn8XiEbm8oVTunxlc269530yg/ycdv7zDb3x9coRNr1xAHNHyCU4dFmr+rJ+woRrHqNEK7Di6q7xkimknbs0J7lYKaWFmrlEMQcpIUKI8TnIu04IEB8btICwyOeKr09thEC2byhGfp8MC6Ip0ov1O998oR2nH6HH8aAeK7Lw8AvT2ilQ2sxzojnvqYNhuUJ46UFRk+81I1ocCpPiJMWGEpcX5M5pR0G3VVerLTAUOJ6HUAog0F3mRrbQQwlblRjpSC0k4fr+RgYSnyN8OErBkJ3aZpSi6HEq17DOeVJtS09LveTSajF6I0qC3RPZQ55wqm0w0TWYpwZx3PKE4alHSaiFmNg5swhT/BLO4yq9QQ/jAFxIF3ezQs+aYc5Hr8NOJZxQdwVT5GvMe6hNvR4hkdcKHHDpsIIEBfmJu88gpiLvF5TjfrR1PIbRIgLU8qTqr1HBFPI1+guSZaxm54iv0M7fLHNK5ot4VzbwdI22TygEXc8I2ILTkM4v+IrmZCZNZglmp4uJSuXpTzokC76Bw3lSCVBIC/DAAAAAElFTkSuQmCC";const b=e=>((0,s.dD)("data-v-4eae9b2e"),e=e(),(0,s.Cn)(),e),C={key:0,class:"title"},y={class:"titleCon"},g=["src"],p={class:"keyboardBox"},k={class:"keyboardInputBox"},m=["onClick"],I={class:"keyboardHead"},v={class:"keyboardContent"},w={class:"keyboardList"},f=["onClick"],N={class:"keyboardList"},K=["onClick"],B={class:"keyboardList"},x=["onClick"],H={class:"keyboardList"},E=["onClick"],S=b((()=>(0,s._)("img",{src:A},null,-1))),T=[S];function V(e,i,a,o,n,c){return(0,s.wg)(),(0,s.iD)("div",{class:"contain",onClick:i[4]||(i[4]=(0,t.iM)((()=>{}),["stop"]))},[a.title||a.HkCarNoSupport?((0,s.wg)(),(0,s.iD)("div",C,[(0,s._)("div",y,(0,h.zw)(a.title),1),a.HkCarNoSupport?((0,s.wg)(),(0,s.iD)("div",{key:0,class:"carTypeSwitch",onClick:i[0]||(i[0]=(...e)=>c.changeHKCarNO&&c.changeHKCarNO(...e))},[(0,s._)("img",{src:n.isHKCarNo?r(660):r(761),class:"check",alt:""},null,8,g),(0,s.Uk)(" 港澳车牌")])):(0,s.kq)("",!0)])):(0,s.kq)("",!0),(0,s._)("div",p,[(0,s._)("div",k,[((0,s.wg)(!0),(0,s.iD)(s.HY,null,(0,s.Ko)(n.carNumber.length,((e,i)=>((0,s.wg)(),(0,s.iD)("div",{class:(0,h.C_)(["keyboardInputItem",{active:i==n.curIndex,ani:i==n.curIndex,HK:n.isHKCarNo,newSource:7==i&&!n.carNumber[7]}]),onClick:e=>c.inputItemClick(i)},(0,h.zw)(c.curIndexVal(i)),11,m)))),256))])]),(0,s._)("div",{class:(0,h.C_)(["keyboard",n.showKeyboard?"showKeyboard":""])},[(0,s._)("div",I,[(0,s._)("div",{class:"keyboardClose",onClick:i[1]||(i[1]=(...e)=>c.closeKeyboard&&c.closeKeyboard(...e))},"关闭")]),(0,s._)("div",v,[(0,s._)("div",w,[((0,s.wg)(!0),(0,s.iD)(s.HY,null,(0,s.Ko)(n.firstValue.slice(0,10),(e=>((0,s.wg)(),(0,s.iD)("div",{class:(0,h.C_)(["keyboardItem",{disable:c.disable(e)}]),onClick:i=>c.itemClick(e),key:e},(0,h.zw)(e),11,f)))),128))]),(0,s._)("div",N,[((0,s.wg)(!0),(0,s.iD)(s.HY,null,(0,s.Ko)(n.firstValue.slice(10,20),(e=>((0,s.wg)(),(0,s.iD)("div",{class:(0,h.C_)(["keyboardItem",{disable:c.disable(e)}]),onClick:i=>c.itemClick(e),key:e},(0,h.zw)(e),11,K)))),128))]),(0,s._)("div",B,[((0,s.wg)(!0),(0,s.iD)(s.HY,null,(0,s.Ko)(n.secondValue,(e=>((0,s.wg)(),(0,s.iD)("div",{class:(0,h.C_)(["keyboardItem",{disable:c.disable(e)}]),onClick:i=>c.itemClick(e),key:e},(0,h.zw)(e),11,x)))),128))]),(0,s._)("div",H,[(0,s._)("div",{class:(0,h.C_)(["keyboardItem keyboardButton",{disable:0===n.curIndex||n.isHKCarNo}]),onClick:i[2]||(i[2]=e=>0===n.curIndex||n.isHKCarNo?"":c.changeType("ZH"==n.keyboardType?"EN":"ZH"))},(0,h.zw)("ZH"==n.keyboardType?"ABC":"中文"),3),((0,s.wg)(!0),(0,s.iD)(s.HY,null,(0,s.Ko)(n.thirdValue,(e=>((0,s.wg)(),(0,s.iD)("div",{class:(0,h.C_)(["keyboardItem",{disable:c.disable(e)}]),onClick:i=>c.itemClick(e),key:e},(0,h.zw)(e),11,E)))),128)),(0,s._)("div",{class:"keyboardItem keyboardButton",onClick:i[3]||(i[3]=e=>c.removeItem())},T)])])],2)])}const O="1234567890QWERTYUIOPASDFGHJKLZXCVBNM",Z="京沪粤津冀晋蒙辽吉黑苏浙皖闽赣鲁豫鄂湘桂琼渝川贵云藏陕甘青宁新使领警学港澳";var R={name:"carNumberKeyboard",props:{title:{type:String,default:()=>"请输入车牌号码"},firstFocus:{type:!0,default:()=>!0},value:{type:[String,Array],default:()=>["","","","","","","",""]},HkCarNoSupport:{type:Boolean,default:()=>!0},completeHideKeyboard:{type:Boolean,default:()=>!0},autoCarNoTypeMatch:{type:Boolean,default:()=>!0}},data(){return{isInit:!1,curIndex:-1,isHKCarNo:!1,carNumber:["","","","","","","",""],disableChar:["I","O"],keyboardType:"ZH",firstValue:[],secondValue:[],thirdValue:[],showKeyboard:!1}},created(){this.changeType("ZH"),this.firstFocus&&(this.showKeyboard=!0,this.curIndex=0),document.addEventListener("click",this.bodyClickClose)},beforeDestroy(){document.removeEventListener("click",this.bodyClickClose)},watch:{value:{handler(e){!this.isInit&&e&&(this.isInit=!0,e.length<7&&/^[A-Z0-9]*$/.test(e)&&this.HkCarNoSupport&&this.autoCarNoTypeMatch?(this.isHKCarNo=!0,this.changeType("EN"),this.carNumber=["","","","","",""].map(((i,r)=>e[r]||""))):(this.isHKCarNo=!1,this.changeType("ZH"),this.carNumber=["","","","","","","",""].map(((i,r)=>e[r]||""))))},immediate:!0}},methods:{bodyClickClose(){(this.showKeyboard=!0)&&this.closeKeyboard()},changeHKCarNO(){this.isHKCarNo=!this.isHKCarNo,this.curIndex=0,this.showKeyboard=!0,this.isHKCarNo?(this.changeType("EN"),this.carNumber=["","","","","",""]):(this.changeType("ZH"),this.carNumber=["","","","","","","",""]),this.$emit("onChange",this.carNumber,this.isHKCarNo)},closeKeyboard(){this.showKeyboard=!1,this.curIndex=-1,this.$emit("onClose")},itemClick(e){if(this.isInit=!0,!this.disableChar.includes(e)){if(this.carNumber[this.curIndex]=e,this.$emit("onChange",this.carNumber,this.isHKCarNo),this.carNumber.slice(this.curIndex+1,this.carNumber.length).every((e=>e))){if(this.carNumber.slice(0,this.curIndex).every((e=>e)))this.completeHideKeyboard&&this.closeKeyboard();else for(let e=0;e<this.curIndex;e++)if(!this.carNumber[e]){this.curIndex=Number(e);break}}else for(let e=this.curIndex+1;e<this.carNumber.length;e++)if(!this.carNumber[e]){this.curIndex=Number(e);break}this.changeType(0!==this.curIndex||this.isHKCarNo?"EN":"ZH")}},curIndexVal(e){return 7!=e||7==this.curIndex||this.carNumber[7]?this.carNumber[e]:"新能源"},disable(e){return this.disableChar.includes(e)},inputItemClick(e){this.curIndex=e,this.changeType(0!==this.curIndex||this.isHKCarNo?"EN":"ZH"),this.showKeyboard=!0},changeType(e){"ZH"==e?(this.firstValue=Z.split("").slice(0,20),this.secondValue=Z.split("").slice(20,30),this.thirdValue=Z.split("").slice(30,37)):(this.firstValue=O.split("").slice(0,20),this.secondValue=O.split("").slice(20,29),this.thirdValue=O.split("").slice(29,36)),this.keyboardType=e},removeItem(){this.carNumber[this.curIndex]="",this.curIndex-=this.curIndex>0?1:0,this.changeType(0!==this.curIndex||this.isHKCarNo?"EN":"ZH"),this.$emit("onChange",this.carNumber,this.isHKCarNo)}}};const U=(0,l.Z)(R,[["render",V],["__scopeId","data-v-4eae9b2e"]]);var D=U;D.install=e=>{e.component(D.name,D)};var J=D;const Q=[J],Y=function(e){Y.installed||Q.map((i=>{e.component(i.name,i)}))};"undefined"!==typeof window&&window.Vue&&Y(window.Vue);var F={install:Y,carNumberKeyboard:J};console.log(F),(0,t.ri)(d).use(F).mount("#app")},761:function(e){e.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGvSURBVHgBvVahVsNAEByKIja2Ojq2OgZBBAIQmFp+BIvk4YoFSWyRxSBqqcHU1qaihp3eXrhCk17SJPPePEJz2bnd271doGecoB5Ch2thLlzq39YEaTwRxvq8DyvhlzDT50aCgfBaOILx4F2NrvBrlGuGuhm7oVmVcJlgJLyDCdtEuIAfuLlUn1+Ec9+PnmC8C1Af/OZGbYwOLY51YYrjkaqtqGwB438P41lboKcPcCI1wO6OiAzt4Q0mD67+vqB3XjFvgEhtb0vKekjvmMYfaB/McJZV4gpyF14p3BBTmITcCvJAw44FF6oRUnCoPy7RHeytE1oPCe8L+FjBM/SHfOCqozvYKK77EizyxAqSEbpDrBq5rUOWRILuQEH20qLwWZiMcxde8rrkcWWuoL3WxmjWA8tAW7w2Z6qx0y3YoVkiF2gP1lbRgU6dlxvht/BW//cdK6rEzoXPavefIGEzlo0z0IUb1AO/u1SxifDTfVk2RDGrbOdnE/VtW0y6MczRPGJPlKrGRGYWD5xZRq/nSnfwtUMxhVhW9I4J8oqSu9l3EE7VaNUgzM1McWAQ/gEeFlq1ySGZXwAAAABJRU5ErkJggg=="},660:function(e){e.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIpSURBVHgBvVbNddNAEJ4ZLe+Fm6kAuQO4cQDsVEBSQRCPO6GDUEF84wAvUipwOkBAAbgDlgrQDQjSDjMSshPHisd+Vr73bGl3Z/Tt7M4fwB0DNxF+8v5X7JyLkTAGhoKZCxnP8gQL6zfWEo5TjgOXx4j0QoZxh5iXX45w+S5P7nvYhlCIBoGrCSIewWbIbiNeSfj0w99x5GgqrwPYDh6B3+aJu1hL+PysPBKrMtgB5I5ffnnlzjsJx2l5wIBT2CEQwn6e3MsX4zkZxwz8SfYVw25RINCw9WRqZ8VBTnogUwwYwmk7qC1srAvfoUeI5w7Vc2sLG+v6RWB3rM+aUIJ6ZNTz6gRyJw8+JxGK6x+Ktrco/k8cgBrgcpw/DTpCRo+X01ijz98s9//n9+WQyrJ8BAaESgP5Zs7UOYQqsXxjb8/FJEFuyiZfX9/MGgu4GRhQBY4pimzpS4+ua81cLZgKOVL2JmHoPvpnH8sDMCCKuCCpZ94izEDpKit1jiI6BRPcrA780VnlJTIfGjS8Oo/epxKpw0UuSo0ZyksoDV2z+3AhLv/GoCSXjtNRWqkOSAmrtY3I9a8OfEI3gZ6hRXlOKF7mpXadQ3/I2g5gXi0II8115mZoA/jWumuETcYIh7BjNK3Gor+hq4tamUXAlKaMZMlyX0PLQiKQbVIFOlA0rYXLlhdolbTuCgH3t3SkrGkpFn3MVRgb4eqkqZkdAc7wQ2OZsJysa4T/AXod6sdYbLBXAAAAAElFTkSuQmCC"}},i={};function r(t){var s=i[t];if(void 0!==s)return s.exports;var a=i[t]={exports:{}};return e[t](a,a.exports,r),a.exports}r.m=e,function(){var e=[];r.O=function(i,t,s,a){if(!t){var o=1/0;for(u=0;u<e.length;u++){t=e[u][0],s=e[u][1],a=e[u][2];for(var n=!0,c=0;c<t.length;c++)(!1&a||o>=a)&&Object.keys(r.O).every((function(e){return r.O[e](t[c])}))?t.splice(c--,1):(n=!1,a<o&&(o=a));if(n){e.splice(u--,1);var l=s();void 0!==l&&(i=l)}}return i}a=a||0;for(var u=e.length;u>0&&e[u-1][2]>a;u--)e[u]=e[u-1];e[u]=[t,s,a]}}(),function(){r.d=function(e,i){for(var t in i)r.o(i,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:i[t]})}}(),function(){r.g=function(){if("object"===typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"===typeof window)return window}}()}(),function(){r.o=function(e,i){return Object.prototype.hasOwnProperty.call(e,i)}}(),function(){var e={826:0};r.O.j=function(i){return 0===e[i]};var i=function(i,t){var s,a,o=t[0],n=t[1],c=t[2],l=0;if(o.some((function(i){return 0!==e[i]}))){for(s in n)r.o(n,s)&&(r.m[s]=n[s]);if(c)var u=c(r)}for(i&&i(t);l<o.length;l++)a=o[l],r.o(e,a)&&e[a]&&e[a][0](),e[a]=0;return r.O(u)},t=self["webpackChunkcar_number_keyboard"]=self["webpackChunkcar_number_keyboard"]||[];t.forEach(i.bind(null,0)),t.push=i.bind(null,t.push.bind(t))}();var t=r.O(void 0,[998],(function(){return r(110)}));t=r.O(t)})();
//# sourceMappingURL=index.36c0bfa0.js.map