car-number-vue3/lib/carNumber.umd.min.js

一款基于vue3的车牌号输入控件，支持自定义输入框

(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["carNumber"]=t(require("vue")):e["carNumber"]=t(e["Vue"])})("undefined"!==typeof self?self:this,(function(e){return function(e){var t={};function o(c){if(t[c])return t[c].exports;var r=t[c]={i:c,l:!1,exports:{}};return e[c].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=e,o.c=t,o.d=function(e,t,c){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:c})},o.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__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 c=Object.create(null);if(o.r(c),Object.defineProperty(c,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)o.d(c,r,function(t){return e[t]}.bind(null,r));return c},o.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s="fb15")}({8875:function(e,t,o){var c,r,n;(function(o,i){r=[],c=i,n="function"===typeof c?c.apply(t,r):c,void 0===n||(e.exports=n)})("undefined"!==typeof self&&self,(function(){function e(){var t=Object.getOwnPropertyDescriptor(document,"currentScript");if(!t&&"currentScript"in document&&document.currentScript)return document.currentScript;if(t&&t.get!==e&&document.currentScript)return document.currentScript;try{throw new Error}catch(p){var o,c,r,n=/.*at [^(]*\((.*):(.+):(.+)\)$/gi,i=/@([^@]*):(\d+):(\d+)\s*$/gi,l=n.exec(p.stack)||i.exec(p.stack),s=l&&l[1]||!1,a=l&&l[2]||!1,u=document.location.href.replace(document.location.hash,""),d=document.getElementsByTagName("script");s===u&&(o=document.documentElement.outerHTML,c=new RegExp("(?:[^\\n]+?\\n){0,"+(a-2)+"}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*","i"),r=o.replace(c,"$1").trim());for(var b=0;b<d.length;b++){if("interactive"===d[b].readyState)return d[b];if(d[b].src===s)return d[b];if(s===u&&d[b].innerHTML&&d[b].innerHTML.trim()===r)return d[b]}return null}}return e}))},"8bbf":function(t,o){t.exports=e},"8fb7":function(e,t,o){"use strict";o("ab95")},ab95:function(e,t,o){},e3f4:function(e,t,o){},fb15:function(e,t,o){"use strict";if(o.r(t),"undefined"!==typeof window){var c=window.document.currentScript,r=o("8875");c=r(),"currentScript"in document||Object.defineProperty(document,"currentScript",{get:r});var n=c&&c.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);n&&(o.p=n[1])}var i=o("8bbf");const l=Object(i["withScopeId"])("data-v-509926e0");Object(i["pushScopeId"])("data-v-509926e0");const s={class:"car__number__container"},a={key:0,class:"keyboard__container"},u={class:"keybord__header"},d={class:"keyboard__body"},b={key:0,class:"keyboard__body__province__list"},p={key:1},f={class:"keyboard__body__letter__list"},h={class:"keyboard__body__letter__list"},y={class:"keyboard__body__letter__list__surplus"},k={class:"keyboard__body__bottom"},m=Object(i["createVNode"])("i",{class:"iconfont-cjc icon-cjc-delete delete__btn"},null,-1);Object(i["popScopeId"])();const O=l((e,t,o,c,r,n)=>(Object(i["openBlock"])(),Object(i["createBlock"])("div",s,[r.visible?(Object(i["openBlock"])(),Object(i["createBlock"])("div",{key:0,onClick:t[1]||(t[1]=e=>n.clickMask()),class:"mask__container",style:{backgroundColor:o.maskBackground}},null,4)):Object(i["createCommentVNode"])("",!0),Object(i["createVNode"])("div",{onClick:t[2]||(t[2]=e=>n.open()),ref:"inputContainer"},[Object(i["renderSlot"])(e.$slots,"default",{value:r.inputValue},()=>[Object(i["createVNode"])("div",{class:"input__container",style:{border:"1px solid "+o.borderColor,borderRadius:o.borderRadius+"px",width:o.width+"px",height:o.height+"px",backgroundColor:o.backgroundColor}},[(Object(i["openBlock"])(!0),Object(i["createBlock"])(i["Fragment"],null,Object(i["renderList"])(r.carNumberLength,e=>(Object(i["openBlock"])(),Object(i["createBlock"])("div",{class:"input__box",key:e,style:{fontSize:o.fontSize+"px",color:o.fontColor}},[e!=r.carNumberLength?(Object(i["openBlock"])(),Object(i["createBlock"])("div",{key:0,class:"line",style:{backgroundColor:o.borderColor}},null,4)):Object(i["createCommentVNode"])("",!0),Object(i["createTextVNode"])(" "+Object(i["toDisplayString"])(r.inputValue[e-1]),1)],4))),128))],4)],!0)],512),Object(i["createVNode"])(i["Transition"],{name:"keyboard"},{default:l(()=>[r.visible?(Object(i["openBlock"])(),Object(i["createBlock"])("div",a,[Object(i["createVNode"])("header",u,[Object(i["createVNode"])("span",{onClick:t[3]||(t[3]=Object(i["withModifiers"])(e=>n.cancel(),["stop"]))},"清空"),Object(i["createVNode"])("span",{onClick:t[4]||(t[4]=Object(i["withModifiers"])(e=>n.submit(),["stop"]))},"关闭")]),Object(i["createVNode"])("div",d,["ABC"===r.keybordType?(Object(i["openBlock"])(),Object(i["createBlock"])("ul",b,[(Object(i["openBlock"])(!0),Object(i["createBlock"])(i["Fragment"],null,Object(i["renderList"])(r.provinceList.slice(0,30),e=>(Object(i["openBlock"])(),Object(i["createBlock"])("li",{onClick:Object(i["withModifiers"])(t=>n.inputWord(e),["stop"]),class:"button",key:e},Object(i["toDisplayString"])(e),9,["onClick"]))),128))])):(Object(i["openBlock"])(),Object(i["createBlock"])("div",p,[Object(i["createVNode"])("ul",f,[(Object(i["openBlock"])(!0),Object(i["createBlock"])(i["Fragment"],null,Object(i["renderList"])(r.letterList.slice(0,10),e=>(Object(i["openBlock"])(),Object(i["createBlock"])("li",{onClick:Object(i["withModifiers"])(t=>n.inputWord(e),["stop"]),class:"button",key:e},Object(i["toDisplayString"])(e),9,["onClick"]))),128))]),Object(i["createVNode"])("ul",h,[(Object(i["openBlock"])(!0),Object(i["createBlock"])(i["Fragment"],null,Object(i["renderList"])(r.letterList.slice(10,20),e=>(Object(i["openBlock"])(),Object(i["createBlock"])("li",{onClick:Object(i["withModifiers"])(t=>n.inputWord(e),["stop"]),class:"button",key:e},Object(i["toDisplayString"])(e),9,["onClick"]))),128))]),Object(i["createVNode"])("ul",y,[(Object(i["openBlock"])(!0),Object(i["createBlock"])(i["Fragment"],null,Object(i["renderList"])(r.letterList.slice(20,29),e=>(Object(i["openBlock"])(),Object(i["createBlock"])("li",{onClick:Object(i["withModifiers"])(t=>n.inputWord(e),["stop"]),class:"button",key:e},Object(i["toDisplayString"])(e),9,["onClick"]))),128))])])),Object(i["createVNode"])("div",k,[Object(i["createVNode"])("div",{onClick:t[5]||(t[5]=Object(i["withModifiers"])(e=>n.toggle(),["stop"])),class:"other__button"},Object(i["toDisplayString"])(r.keybordType),1),Object(i["createVNode"])("ul",{class:"keyboard__body__bottom__item__list",style:{columnCount:"ABC"===r.keybordType?7:5}},[(Object(i["openBlock"])(!0),Object(i["createBlock"])(i["Fragment"],null,Object(i["renderList"])(n.surplusList,e=>(Object(i["openBlock"])(),Object(i["createBlock"])("li",{onClick:Object(i["withModifiers"])(t=>n.inputWord(e),["stop"]),class:"button",key:e},Object(i["toDisplayString"])(e),9,["onClick"]))),128))],4),Object(i["createVNode"])("div",{onClick:t[6]||(t[6]=Object(i["withModifiers"])(e=>n.deleteOne(),["stop"])),class:"other__button"},[m])])])])):Object(i["createCommentVNode"])("",!0)]),_:1})])));o("e3f4");var j={name:"CarNumber",props:{width:{type:Number,default:200},height:{type:Number,default:30},borderColor:{type:String,default:"#959595"},backgroundColor:{type:String,default:"transparent"},borderRadius:{type:Number,default:0},fontColor:{type:String,default:"#959595"},fontSize:{type:Number,default:16},defaultCarPlate:{type:String},maskBackground:{type:String,default:"transparent"},clickMaskCloseKeyBoard:{type:Boolean,default:!0},isNewEnergy:{type:Boolean,default:!1}},data(){return{visible:!1,inputValue:[],carNumberLength:7,keybordType:"ABC",placehoderDom:null,isOcclusion:!1,provinceList:["京","津","渝","沪","冀","晋","辽","吉","黑","苏","浙","皖","闽","赣","鲁","豫","鄂","湘","粤","琼","川","贵","云","陕","甘","青","蒙","桂","宁","新","藏","使","领","警","学","港","澳"],letterList:[1,2,3,4,5,6,7,8,9,0,"A","B","C","D","E","F","G","H","J","K","L","M","N","P","Q","R","S","T","U","V","W","X","Y","Z"]}},watch:{isNewEnergy:{handler(e){this.carNumberLength=e?8:7},immediate:!0},defaultCarPlate:{handler(e){if(e){this.inputValue=[];for(let t=0,o=e.length;t<o;t++)this.inputValue.push(e[t])}},immediate:!0},inputValue:{handler(){let e=this.isNewEnergy?8:7;0===this.inputValue.length&&(this.keybordType="ABC"),this.inputValue.length>0&&this.inputValue.length<e&&(this.keybordType="返回")},immediate:!0,deep:!0},visible(e){e?(this.checkOcclusion()&&(this.placehoderDom.style.display="block"),this.isOcclusion&&window.scrollTo(0,250)):(this.isOcclusion&&document.body.scrollIntoView({block:"start",behavior:"smooth"}),this.placehoderDom.style.display="none")}},computed:{surplusList(){return"ABC"===this.keybordType?this.provinceList.slice(29,36):this.letterList.slice(29,34)}},created(){if("undefined"===window)throw new Error("不支持非window环境");this.placehoderDom=document.createElement("div"),this.placehoderDom.style.cssText="height: 260px; width: 100%; background: red; opacity: 0",this.placehoderDom.style.display="none",document.body.appendChild(this.placehoderDom)},methods:{close(){this.visible=!1},open(){this.visible=!0},cancel(){this.inputValue=[],this.$emit("submit",this.inputValue.join(""))},submit(){this.$emit("submit",this.inputValue.join("")),this.close()},toggle(){let e=this.isNewEnergy?7:6;this.inputValue.length>0&&this.inputValue.length<e||(this.keybordType="ABC"===this.keybordType?"返回":"ABC")},deleteOne(){this.inputValue.pop()},inputWord(e){if(this.isNewEnergy){if(8===this.inputValue.length)return}else if(7===this.inputValue.length)return;this.inputValue.push(e)},checkOcclusion(){const e=document.documentElement.clientHeight,t=document.documentElement.scrollHeight,o=this.$refs.inputContainer.getBoundingClientRect().top,c=this.$refs.inputContainer.scrollHeight;return this.isOcclusion=c+250+o>=e,c+250+o>=e&&t===e},clickMask(){this.clickMaskCloseKeyBoard&&this.submit()}}};o("8fb7");j.render=O,j.__scopeId="data-v-509926e0";var g=j;g.install=function(e){e.component(g.name,g)};var _=g;const B=[_],v=function(e){B.map(t=>e.component(t.name,t))};var C={install:v,CarNumber:_};t["default"]=C}})}));