vue-license-plate/dist/js/index.3a7749f4.js

一款基于vue的车牌号输入控件

(function(e){function t(t){for(var n,l,r=t[0],o=t[1],c=t[2],d=0,p=[];d<r.length;d++)l=r[d],Object.prototype.hasOwnProperty.call(a,l)&&a[l]&&p.push(a[l][0]),a[l]=0;for(n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n]);u&&u(t);while(p.length)p.shift()();return s.push.apply(s,c||[]),i()}function i(){for(var e,t=0;t<s.length;t++){for(var i=s[t],n=!0,r=1;r<i.length;r++){var o=i[r];0!==a[o]&&(n=!1)}n&&(s.splice(t--,1),e=l(l.s=i[0]))}return e}var n={},a={index:0},s=[];function l(t){if(n[t])return n[t].exports;var i=n[t]={i:t,l:!1,exports:{}};return e[t].call(i.exports,i,i.exports,l),i.l=!0,i.exports}l.m=e,l.c=n,l.d=function(e,t,i){l.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},l.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(l.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)l.d(i,n,function(t){return e[t]}.bind(null,n));return i},l.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.p="/";var r=window["webpackJsonp"]=window["webpackJsonp"]||[],o=r.push.bind(r);r.push=t,r=r.slice();for(var c=0;c<r.length;c++)t(r[c]);var u=o;s.push([0,"chunk-vendors"]),i()})({0:function(e,t,i){e.exports=i("c31f")},"42b1":function(e,t,i){"use strict";i("f381")},6961:function(e,t,i){},"890f":function(e,t,i){"use strict";i("ebf3")},c31f:function(e,t,i){"use strict";i.r(t);var n=i("2b0e"),a=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{attrs:{id:"app"}},[i("div",{staticStyle:{height:"100px",width:"100%"}}),i("LicensePlate",{attrs:{borderRadius:6,autoShow:!1},on:{change:e.changeVal},model:{value:e.licensePlate,callback:function(t){e.licensePlate=t},expression:"licensePlate"}}),i("div",{staticStyle:{height:"100px",width:"100%"}}),i("LicensePlate",{attrs:{borderRadius:6,autoShow:!1},on:{change:e.changeVal},model:{value:e.licensePlate,callback:function(t){e.licensePlate=t},expression:"licensePlate"}},[i("div",{staticClass:"custom"},[e._v(e._s(e.licensePlate))])])],1)},s=[],l={name:"App",components:{},data(){return{licensePlate:"川A12345"}},computed:{},mounted(){},methods:{changeVal(e){console.log(e)}}},r=l,o=(i("42b1"),i("2877")),c=Object(o["a"])(r,a,s,!1,null,null,null),u=c.exports,d=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"license-plate_container"},[i("div",{on:{click:e.onSlotClick}},[e._t("default",[i("div",{staticClass:"input_container"},e._l(e.licensePlateLength,(function(t,n){return i("div",{key:t+"_"+e.inputValue[n],staticClass:"input_box",class:e.activeIndex==n?"active":"",style:{borderWidth:e.borderWidth+"px",borderRadius:e.borderRadius+"px",borderColor:""+(e.activeIndex==n?e.borderActiveColor:e.borderColor)},on:{click:function(t){return t.stopPropagation(),e.inputClick(n)}}},[e.inputValue[n]?i("div",{staticClass:"button",style:{borderRadius:e.borderRadius+"px",fontSize:e.fontSize+"px",color:e.fontColor}},[e._v(e._s(e.inputValue[n]))]):e._e()])})),0)])],2),i("transition",{attrs:{name:"keyboard"}},[e.visible?i("div",{staticClass:"keyboard_container"},[i("div",{staticClass:"keyboard_header",on:{click:function(t){return t.stopPropagation(),e.visibleClick(t)}}},[i("i",{staticClass:"iconfont icon-jianpan"})]),i("div",{staticClass:"keyboard_body"},[0==e.activeIndex?i("div",{staticClass:"province_list"},e._l(e.provinceList,(function(t){return i("div",{key:t,staticClass:"key_wrapper",on:{click:function(i){return e.btnClick(t)}}},[i("div",{staticClass:"button"},[e._v(" "+e._s(t)+" ")])])})),0):e._e(),0!=e.activeIndex?i("div",{staticClass:"number_list"},e._l(e.numberList,(function(t,n){return i("div",{key:t,staticClass:"numer_wapper",on:{click:function(i){return e.btnClick(t,1==e.activeIndex)}}},[i("div",{staticClass:"button",class:1==e.activeIndex&&n<10?"disabled":""},[e._v(" "+e._s(t)+" ")])])})),0):e._e(),0!=e.activeIndex?i("div",{staticClass:"number_list"},[e._l(e.letterList,(function(t){return i("div",{key:t,staticClass:"numer_wapper",on:{click:function(i){return e.btnClick(t,"O"==t&&e.activeIndex>1)}}},[i("div",{staticClass:"button",class:"O"==t&&e.activeIndex>1?"disabled":""},[e._v(" "+e._s(t)+" ")])])})),i("div",{staticClass:"numer_wapper delete",on:{click:e.delClick}},[i("div",{staticClass:"button img"},[i("i",{staticClass:"iconfont icon-backspace"})])])],2):e._e()])]):e._e()])],1)},p=[];i("6961");const v=/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳使领]$/;var f={name:"LicensePlate",props:{value:String,autoShow:{type:Boolean,default:!1},borderColor:{type:String,default:"#79aef3"},borderActiveColor:{type:String,default:"#330aec"},borderRadius:{type:Number,default:6},borderWidth:{type:Number,default:1},fontColor:{type:String,default:"#333333"},fontSize:{type:Number,default:16}},components:{},model:{prop:"value",event:"update"},data(){return{licensePlateLength:8,provinceList:["京","津","渝","沪","冀","晋","辽","吉","黑","苏","浙","皖","闽","赣","鲁","豫","鄂","湘","粤","琼","川","贵","云","陕","甘","青","蒙","桂","宁","新","藏","临"],numberList:[0,1,2,3,4,5,6,7,8,9,"警"],letterList:["Q","W","E","R","T","Y","U","O","P","港","澳","A","S","D","F","G","H","J","K","L","挂","学","Z","X","C","V","B","N","M","领"],activeIndex:-1,inputValue:["","","","","","","",""],visible:!1}},computed:{licensePlate(){return this.value}},watch:{value(){this.initLicensePlate()}},async created(){},async mounted(){this.initLicensePlate(),this.autoShow&&(this.activeIndex=0,this.visible=!0)},methods:{initLicensePlate(){this.value&&v.test(this.value)&&(this.inputValue=this.value.split(""))},onSlotClick(){let e=this.inputValue.filter(e=>e).length;this.activeIndex=0==e?0:e-1,this.visible||(this.visible=!0)},inputClick(e){this.activeIndex=e,this.visible||(this.visible=!0)},btnClick(e,t){if(t)return!1;this.$set(this.inputValue,this.activeIndex,""+e),this.activeIndex++,this.activeIndex>7&&(this.visible=!1),this.change()},delClick(){this.inputValue[this.activeIndex]?this.$set(this.inputValue,this.activeIndex,""):(this.$set(this.inputValue,this.activeIndex-1,""),this.activeIndex--),this.change()},visibleClick(){this.visible=!1},change(){let e=this.inputValue.join(""),t=v.test(e);this.$emit("change",{array:this.inputValue.filter(e=>""!==e),value:e,pass:t}),this.$emit("update",e)}},filters:{}},h=f,b=(i("890f"),Object(o["a"])(h,d,p,!1,null,"650f7a5e",null)),_=b.exports;_.install=function(e){e.component(_.name,_)};var m=_;const y=[m],C=function(e){C.installed||y.map(t=>e.component(t.name,t))};"undefined"!==typeof window&&window.Vue&&C(window.Vue);var x={install:C,LicensePlate:m};n["a"].use(x),n["a"].config.productionTip=!1,new n["a"]({render:e=>e(u)}).$mount("#app")},ebf3:function(e,t,i){},f381:function(e,t,i){}});