前端学习｜不知道该学什么，不如建一个学习盲盒~

.box-wrapper{width:500px;楂樺害锛?00px锛涗繚璇侀噾锛?鑷姩锛涜竟璺濋《閮細100px锛涙孩鍑?y锛氶殣钘忥紱鏄剧ず锛氱綉鏍硷紱缃戞牸妯℃澘鍒楋細1fr1fr1fr锛沢rid-template-rows:1fr1fr1fr;}.content-item{border-radius:2px;瀹藉害锛?50px锛涢珮搴︼細150px锛涜竟妗嗭細4px瀹炲績閫忔槑锛涘厜鏍囷細鎸囬拡锛泒.content-img{瀹藉害锛?50px锛涢珮搴︼細150px锛沷bject-fit:cover;}.picked{border:4pxsolidrgb(224,216,106);涓嶉€忔槑搴︼細0.8;}浜嬫儏鏄繖鏍风殑锛氭槰澶╁埛璞嗙摚鐪嬪埌鏈嬪弸鍒嗕韩浜嗕竴涓洸鐩掑涔犳柟娉曫煈囨垜瑙夊緱杩欎釜鏂规硶濂斤紒涓嬬彮鍚庢垜閫氬父鎯冲鐐逛笢瑗裤€傚鏋滀笉鏄郴缁熺殑瀛︿範锛屽緢鏈夊彲鑳藉湪銆愮籂缁撳埌搴曡瀛︿粈涔堛€戠殑鏃跺€欙紝绾犵粨鍙樻垚浜嗐€愮畻浜嗭紝涓嬫鍐嶅仛銆戰煒瑰叾瀹炲墠绔殑鍐呭灏卞濡備笅锛氬湪纰庣墖鍖栫殑鏃堕棿閲岋紝瀛︿粈涔堟棤鎵€璋擄紝闅忎究涓€涓鐩紝浜嗚В涓€涓浉鍏崇殑鐭ヨ瘑鐐癸紝鍙瀛︿細浜嗭紝灏卞彲浠ヨ禋鍒伴挶銆備笉濡傜粰鑷繁鎼缓涓€涓墠绔煡璇嗙偣鐩茬洅銆愬儚閭ｇ褰╃エ杞洏銆戯紝杩欐牱鎴戜滑鍦ㄧ鐗囨椂闂存兂瀛︿笢瑗跨殑鏃跺€欙紝灏变笉鐢ㄧ籂缁撳浠€涔堜簡锛屽灏辨槸浜嗙◢寰簡瑙ｄ竴涓嬬洸鐩掞紝鎴戜滑灏卞畬鎴愪簡锛佹渶缁堟晥鏋滃涓嬶細涓昏鐢ㄥ埌锛歷ue2+element-ui甯冨眬鍏堟壘鍑犲紶鑷繁鎯冲涔犵殑鍐呭鐨勭浉鍏冲浘鐗囥€傛垜杩欓噷浣跨敤浜嗙綉鏍煎竷灞€锛?琛?鍒楋細缁欓€変腑鐨勫浘鐗囨坊鍔犱笉鍚屾牱寮忕殑绫诲悕锛屼互鍖哄埆浜庡叾浠栧浘鐗囥€傛垜杩欓噷鍔犱簡杈规鍜岄€忔槑搴︼紙闅忎究浣狅級~绉诲姩鏃剁偣鍑诲浘鐗囩殑澶勭悊閫昏緫鏄細鍙偣鍑讳腑闂寸殑鍥剧墖骞朵笖姝ゆ椂杞洏娌℃湁鏃嬭浆锛岃繘鍏ュ悗缁€昏緫銆傚悗缁€昏緫涔熸瘮杈冪畝鍗曘€傞殢鏈虹敓鎴愯嫢骞叉棆杞鏁帮紝閫愪竴鏃嬭浆銆傚湪鏈€鍚庝竴涓や釜杞集鏃舵斁鎱㈤€熷害銆?/methodshandleClick(order){if(order!==0||this.hasStarted)return//鍙鐞嗕腑闂存寜閽殑鐐瑰嚮浜嬩欢this.start()},start(){//闅忔満鐢熸垚鑻ュ共涓鏁帮紝澶ф3~6鍦坱his.totalSteps=Math.floor(Math.random()*24)+24//宸茬粡璧拌繃鐨勬鏁發ethasRun=0this.move(hasRun)},move(hasRun){constlen=this.contentList.length-1setTimeout(()=>{if(hasRun<=this.totalSteps){if(this.totalSteps-hasRun<2*len){//鍑忔參this.speed=300}elseif(this.totalSteps-hasRun{if(item.order===this.pickedIndex){this.pickedContent=item.name}})//寮瑰嚭閫氱煡鐭ラ亾杩欎釜銆?alert(`浣犱粖澶╁彲浠ヤ簡瑙?{this.pickedContent}锛乣,{confirmButtonText:'Gotit',type:'success',callback:()=>{this.curIndex=1}});}},this.speed)}娌′粈涔堝鏉傜殑锛屽啓鐨勫紑蹇冨搱鍝堬紒锝烇綖锝炲叏閮ㄤ唬鐮?template>