当前位置：首页 > Web前端 > HTML

H5仿原生app短信验证码vue2.0组件附源码地址

时间：2023-03-29 12:44:15 HTML

涓€銆佸紑鍙戣儗鏅骇鍝佽璁＄瑕佹眰鍒朵綔涓€涓豢鍘熺敓app鐭俊楠岃瘉鐮佺粍浠躲€傝姳浜嗕袱涓皬鏃舵墠鎼炲嚭涓€涓繕鍙互锛屾敮鎸佸睆骞曠殑缁勪欢銆傝嚜閫傚簲锛屽彲浠ョ敤鍦ㄥ脊妗嗛噷锛屼篃鍙互鐢ㄥ湪鑷繁灏佽鐨剉ue缁勪欢閲岋紝甯屾湜鑳藉府鍒伴偅浜涜浜у搧鍘嬫Θ鐨勫悓瀛︼紝鍝堝搱銆傪煒勬牳蹇冩€濇兂鏄敤涓€涓緭鍏ユ浣跨敤css3鍜宼ranslate灞炴€э紝姣忔杈撳叆鍚庡悜鍙崇Щ鍔ㄤ竴涓崟浣嶄綅缃紝鐩村埌杈撳叆鍚庨獙璇佺爜鏁伴噺娑堝け銆傜劧鍚庡畾涔変竴涓暟缁剆msCodeList锛屽垵濮嬪寲鏃秔ush瀵硅薄smsCodeList=[{val:'',isError:''}]2.椋炲彂璇濅笉澶氳锛屽厛鐪媎emo3.浠ｇ爜瑙ｉ噴//html浠ｇ爜{{title}}

{{item.val}}

灏辨槸绠€鍗曠殑鍑犺html缁撴瀯锛岀敤鏉ユ覆鏌撴爣棰樺拰杈撳叆妗嗕互鍙婇獙璇佺爜缁勪欢js浠ｇ爜涔熷緢绠€鍗?/鍏堝畾涔変竴浜涘垵濮嬮粯璁ゅ€硷紝鍥犱负榛樿灏辨槸鎸夌収6璁ヾefaultCodeNum=6letdefaultMoveUnit=17.2letdefaultInputPL=7letdefaultSmsCodeItemWidth=14exportdefault{name:"VueSmsCheckCode",directives:{focus:{inserted:function(el){el.focus()}}},props:{title:{type:String,default:'Pleaseentertheverificationcode'},codeNum:{//楠岃瘉鐮佷釜鏁皌ype:Number,default:6},isError:{//楠岃瘉鐮侀敊璇樉绀洪敊璇彁绀簍ype:Boolean,default:false},errorColor:{type:String,default:'#D81A1A'}},data(){return{smsCodeList:[],//楠岃瘉鐮佽緭鍏ユ暟瀛楁樉绀哄湪div涓奿nputValue:'',//杈撳叆妗嗙殑鍊約msValue:'',//楠岃瘉鐮佸畬鎴愬悗鐨勬€诲彉閲弇oveUnit:17.2,//杈撳叆浣嶇Щ鍗曚綅inputBoxActive:0,//褰撳墠杈撳叆妗嗙殑浣嶇Щ浣嶇疆currentIndex:0,//褰撳墠楠岃瘉鐮佺殑绱㈠紩isShowInputBox:true,//鏄惁鏄剧ず杈撳叆妗唀rror:false,//楠岃瘉鐮侀敊璇孩鏃梕rrorColorDefault:'#b1b1b1',//榛樿閿欒杈撳叆妗嗛鑹瞫tyle:{//榛樿鏍峰紡inputPL:0,//杈撳叆padding-left鍊約msCodeItemWidth:0,//楠岃瘉鐮佹樉绀篿tem鐨勫搴︼紙鑷€傚簲锛墋}},created(){this.reDomRender()//鍒濆鍖栨椂锛屾牴鎹紶鍏ョ殑楠岃瘉鐮佷釜鏁伴噸鏂版覆鏌撶粍浠讹紙閲嶆柊璁＄畻姣忎釜dom鐨勪綅缃€佸搴︾瓑锛塼his.compareList()//pushdefaultdatathis.inputPaving()//鎵嬫満楠岃瘉鐮佽嚜鍔ㄥ～鍏呮椂鑷姩骞抽摵鏁版嵁},methods:{reDomRender(){this.style={inputPL:Math.round(defaultCodeNum/(this.codeNum/defaultInputPL)),smsCodeItemWidth:Math.round(defaultCodeNum/this.codeNum*defaultSmsCodeItemWidth)}this.moveUnit=Math.round(defaultCodeNum/(this.codeNum/(defaultMoveUnit-.3333)))},compareList(){for(leti=0;i{this.$refs.refInout.focus()})},//褰撻獙璇佺爜琚偣鍑绘椂锛宨nputBoxActive锛屽€艰鏁ｅ竷鍦ㄦ瘡涓緭鍏ユinputPaving(){letv=this.inputValueif(v.length>0){v.split('').forEach((item,index)=>{if(index<=v.length){this.smsCodeList[index].val=itemconstinputPosition=(index+1)*this.moveUnitthis.inputBoxActive=inputPosition>=100?100:inputPositionthis.currentIndex=index+1this.smsValue+=itemthis.inputValue=''濡傛灉(index+1===this.codeNum){this.isShowInputBox=falsethis.sendFun()}}})}},onKeyDown(e){letkey=e.key;e.returnValue=!(key==='e'||key==='E'||key==='+'||key==='-');},onKeyUp(e){if(this.currentIndex<1)returnif(e.code==='Backsp鐜嬬墝'||e.key==='Backspace'){//閫€鏍紅his.currentIndex=this.currentIndex-1this.inputBoxActive=this.inputBoxActive-this.moveUnitthis.smsCodeList=this.smsCodeList.map((val,index)=>{if(index===this.currentIndex){val.val=''val.isError=this.isErrorreturnval}returnval})}},handleClick(){this.$refs.refInout.focus()},sendFun(){this.$emit('finish',this.smsValue)}},watch:{inputValue(v){//鐩戝惉杈撳叆妗嗙殑杈撳叆鍊糹f(!v)return//鍒濆鍖栨椂锛岀偣鍑昏蒋閿洏楠岃瘉鐮佽嚜鍔ㄥ～鍐欒緭鍏ユ暟鎹甶f(v.length>1){this.inputPaving()return;}this.inputBoxActive=this.inputBoxActive+this.moveUnitthis.smsCodeList.map((val,index)=>{if(this.currentIndex===index){if(val){//褰撳墠杈撳叆鐨勪綅缃娇绾㈣壊搴曟爮鍒濆鍖杤al.isError=false}val銆倂al=vreturnval}returnval})this.currentIndex+=1this.inputValue=''if(this.currentIndex>=this.codeNum){//褰撴渶鍚庝竴涓暟瀛楀彂閫佹椂this.isShowInputBox=falsethis.smsCodeList.forEach(val=>{this.smsValue+=val.val})this.sendFun()}},isError(v){//鐩戝惉楠岃瘉鐮佹槸鍚﹂敊璇痶his.error=vif(v){this.smsCodeList.map(value=>{value.isError=truereturnvalue})this.initAll()}}}}鍓╀笅鐨勫氨鏄痗ssnpminstallvue-sms-check-code--savelatestversion1.0.1(2022/5/25)甯歌鎿嶄綔鍖呬笅杞戒娇鐢ㄥ彟澶栭渶瑕佸畬鏁寸殑浠ｇ爜銆傝鍒癵ithub鎴栬€単itee涓嬭浇寮€婧愶紝鎬荤粨涓€涓嬨€傝繖鐪熺殑寰堣垂鏃堕棿銆傚ソ鐨勮瘽璇穝tar馃埗锔忔湁闂璇峰彂gitee婧愬湴鍧€github婧愬湴鍧€銆傛簮鐮佷腑鏈変緥瀛愶紝浣跨敤鏂规硶寰堢畝鍗曘€傛杩庣偣璧炪€佽瘎璁恒€佽浆鍙?/p>

上一篇：把你的React应用迁移到Vite，它太快了

下一篇：物联网智慧地铁站台数字孪生3D可视化管理系统

H5仿原生app短信验证码vue2.0组件附源码地址相关文章

最新推荐

猜你喜欢