mu-fake-input/dist/mu-fake-input.umd.cjs

vue3验证码输入框组件

(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".fake-input[data-v-86aa1d8b]{display:flex}.fake-input .input-style[data-v-86aa1d8b]{box-sizing:border-box}.fake-input .input-style input[data-v-86aa1d8b]{border:none;box-sizing:border-box;color:#606266;text-align:center;outline:none}.fake-input .input-style--state[data-v-86aa1d8b]{border-color:#409eff}.input-style_frame[data-v-86aa1d8b]{border:1px solid #b9b9b9;border-radius:4px;overflow:hidden}.input-style_line[data-v-86aa1d8b]{border-bottom:1px solid #b9b9b9}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
(function(s,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(s=typeof globalThis<"u"?globalThis:s||self,t(s.MuFakeInput={},s.Vue))})(this,function(s,t){"use strict";const K={class:"fake-input"},w=["onUpdate:modelValue","onKeyup","onKeydown","onClick"],k=((f,y)=>{const o=f.__vccOpts||f;for(const[_,c]of y)o[_]=c;return o})(t.defineComponent({__name:"FakeInput",props:{quantity:{default:6},modelValue:{},type:{default:"frame"},config:{},inputKeys:{default:"all"}},emits:["update:modelValue"],setup(f,{emit:y}){const o=f,_=y,c=t.ref(),u=t.ref([]),$=t.computed({get(){return o.modelValue},set(n){_("update:modelValue",n)}});t.watch(()=>u.value,n=>{let e="";n.forEach(l=>{l.value&&(e+=l.value)}),$.value=e},{deep:!0}),t.watch(()=>o.modelValue,()=>{V()});const h=t.ref(),i=n=>{h.value=n},v=n=>{const e=n;e===0?(c.value[e].focus(),i(e)):u.value[e-1].value===""?v(e-1):(c.value[e].focus(),i(e))},g=n=>{const e=n.key,l=/^[a-zA-Z]$/.test(e),a=/^[0-9]$/.test(e);switch(o.inputKeys){case"all":return l||a;case"letter":return l;case"numeric":return a}},B=(n,e)=>{const l=c.value,a=l[e],d=l[e+1],m=l[e-1];if(g(n))e<Number(o.quantity)-1&&u.value[e].value!==""?(d.focus(),i(e+1)):(a.focus(),i(e));else if(n.key==="Backspace")e!=0&&u.value[e].value===""&&(m.focus(),i(e-1));else{const p=n.target;p.value=p.value.replace(/./g,""),u.value[e].value=""}},z=(n,e)=>{g(n)&&(u.value[e].value=n.key)},V=()=>{u.value=[];for(let n=0;n<Number(o.quantity);n++)u.value.push({value:o.modelValue[n]?o.modelValue[n]:""})};return t.onMounted(()=>{V()}),(n,e)=>(t.openBlock(),t.createElementBlock("div",K,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(u.value,(l,a)=>{var d,m,p,I;return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["input-style",`input-style_${o.type}`,a===h.value?"input-style--state":""]),style:t.normalizeStyle({margin:`0px ${((d=o.config)==null?void 0:d.spacing)??5}px`}),key:a},[t.withDirectives(t.createElementVNode("input",{ref_for:!0,ref_key:"inputRef",ref:c,style:t.normalizeStyle({width:`${((m=o.config)==null?void 0:m.width)??40}px`,height:`${((p=o.config)==null?void 0:p.height)??50}px`,fontSize:`${((I=o.config)==null?void 0:I.fontSize)??16}px`}),type:"text","onUpdate:modelValue":r=>l.value=r,maxlength:"1",onKeyup:r=>B(r,a),onKeydown:r=>z(r,a),onClick:r=>v(a)},null,44,w),[[t.vModelText,l.value]])],6)}),128))]))}}),[["__scopeId","data-v-86aa1d8b"]]);s.FakeInput=k,s.default=k,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});