vue图片预览组件hevue-img-preview2.5更新，增加了键盘控制，节流，等待图片加载等功能，看看idea功能

澶у濂斤紝涔嬪墠鎴戜滑锛堝叾瀹炲彧鏈夋垜鑷繁锛屼负浠€涔堬紵鐢ㄦ垜浠€庝箞鏍凤紵鍙兘鏄亣瑁呮垜鏈夊洟闃燂紝涔熷彲鑳藉彧鏄负浜嗚〃杈攫煂濓級鍙戝竷hevue-img-preview2.0鐗堟湰锛屽鍔犱簡澶氬浘棰勮鍔熻兘锛屾敹鍒板ソ璇勬潵鑷敤鎴凤紙鍏跺疄涓嶆槸鐢ㄦ埛锛夌殑璇勮锛屾垜浠殑浜у搧缁忕悊锛堝叾瀹炴槸鎴戯級澧炲姞浜嗕竴浜涘姛鑳藉苟鎺ㄥ嚭浜?.5鐗堟湰锛屾垜浠潵鐪嬬湅鏈夊摢浜涙柊鍔熻兘浠ュ強濡備綍瀹炵幇瀹冧滑O锛堚埄_鈭╋級O鏈鏇存柊鐨勭増鏈彿:2.5.2澧炲姞閿洏鎺у埗鍔熻兘锛屾帶鍒堕€€鍑洪瑙堛€佺炕椤点€佹棆杞€佺缉鏀剧瓑銆傚鍔犲浘鐗囧姞杞姐€佸姞杞藉け璐ョ殑鏄剧ず鏁堟灉锛屼慨澶峼-index鏄剧ず灞傛涓嶅楂樼殑闂銆傛病瀹夎鐨勫悓瀛﹀彲浠ョ洿鎺ュ畨瑁咃紝宸茬粡瀹夎鐨勫悓瀛﹀彲浠ュ甫涓婄増鏈彿鏇存柊npmihevue-img-preview@2.5.2--save璇︾粏浠嬬粛鏂囩珷锛歨ttps://juejin.im/post/5ee6377b51882542ea2b50ecGitHub鍦板潃锛歨ttps://github.com/heyongsheng/hevue-img-preview娣诲姞閿洏浜嬩欢鐨勯渶姹傚強鍘熷洜鐢变簬璇ョ粍浠舵槸PC绔殑鍥剧墖棰勮缁勪欢锛屾垜浠殑鐢ㄦ埛鑷劧鏄疨C绔敤鎴凤紝鎵€浠ラ儴鍒嗙敤鎴峰繀椤讳娇鐢∟otebooks锛岃繖閮ㄥ垎鏈変簺浜哄彲鑳戒範鎯敤瑙︽懜鏉垮姞閿洏鏉ユ搷浣溿€傞€氬父PC鐨勫睆骞曟瘮杈冨ぇ锛岃鐢ㄦ埛鐨勬墜鎸囧湪瑙︽懜鏉夸笂澶氬姩鍑犳銆傛寜閽Щ鍔ㄥ埌涓嬩竴涓寜閽紝绉诲姩鍒板叧闂寜閽潪甯歌垂鍔涳紙鍗充娇鏈夐紶鏍囷紝涔熷緢涓嶆柟渚匡級锛屾墍浠ユ垜浠创蹇冨湴寮曞叆浜嗛敭鐩樻帶鍒跺姛鑳姐€傚疄鐜颁簡缁勪欢鍑犱箮鎵€鏈夌殑鍔熻兘锛岀湡棣欙紒璁╂垜浠湅鐪嬫垜浠紵澶х殑宸ョ▼甯堬紙鎴栨垜锛夋槸濡備綍瀹炵幇瀹冪殑銆備唬鐮佸疄鐜版彁绀猴細濡傛灉涓嶅叧蹇冧唬鐮侊紝鍙湅鎬濊矾锛屽拷鐣ヤ唬鐮侀儴鍒嗐€備笉鎰熷叴瓒ｏ紝涔熷笇鏈涘ぇ瀹惰€愬績鐨勫線涓嬬湅锛岃涓嶅畾鑳戒粠涓鍒颁竴浜涙€濊矾鍛紵娉ㄦ剰锛屾湰鏂囨墍鏈変唬鐮佷慨鏀瑰潎鍩轰簬2.0鐗堟湰鐨勪唬鐮併€備粠鎴戠殑GitHub涓嬭浇鍘嗗彶鐗堟湰鐨勬簮鐮佸姣旈槄璇伙紝璁╃敤鎴烽€夋嫨鏄惁浣跨敤閿洏浜嬩欢銆傞鍏堬紝鎴戜滑瑕佸厖鍒嗚€冭檻鐢ㄦ埛銆傚氨绠楁垜浠姞浜嗚繖涓姛鑳斤紝涔熻鐪嬬敤鎴锋槸鍚﹂渶瑕併€傚彟澶栵紝鎴戜滑杩欓噷娣诲姞鐨勯敭鐩樹簨浠跺彲鑳戒細瑕嗙洊鐢ㄦ埛榛樿鐨勯敭鐩樹簨浠舵垨鑰呭鑷撮噸澶嶈Е鍙戯紝鎵€浠ヤ竴瀹氳璁╃敤鎴烽€夋嫨鏄惁寮€鍚繖涓姛鑳姐€傛垜浠彲浠ユ妸杩欎釜switch浣滀负涓€涓厤缃」锛岃鐢ㄦ埛璋冪敤Whenpassinginprops:{...keyboard:{//鏄惁寮€鍚敭鐩樹簨浠秚ype:Booleandefault:false//榛樿涓嶅紑鍚瘆}//Then缁勪欢瑙﹀彂鏃跺垽鏂槸鍚﹀紑鍚痠f(this.keyboard){document.addEventListener('keydown',fn)//fn涓洪敭鐩樹簨浠跺悕}//娉ㄦ剰濡傛灉寮€鍚敭鐩樹簨浠堕渶瑕佹敞閿€鍏抽棴缁勪欢鏃秈f(this.keyboard){document.removeEventListener('keydown',fn)//fn鏄敭鐩樹簨浠剁殑鍚嶇О}鍋氫竴涓畝鍗曠殑闃叉姈鍔熻兘娉ㄦ剰鍥犱负浣滆€呮棤鐭ワ紝浠栨病鏈?鍐欎唬鐮佺殑鏃跺€欎笉鐭ラ亾鑺傛祦锛屽彧鐭ラ亾闃叉姈锛屾墍浠ヤ笉鐭ラ亾涓嬮潰杩欏嚑绉嶆儏鍐垫槸鍚︾湡鐨勭鍚堣妭娴佸満鏅紝浣嗘槸瀹炲湪鏄噿寰楁敼浜嗐€傛偍鍙互鍙傝€冩娈典互渚涘弬鑰冦€傜瓑鎴戜簡瑙ｄ簡闃叉姈鍜岃妭娴佷箣鍚庯紝鎴戜細涓撻棬鍐欎竴绡囨枃绔犺涓€涓嬨€傚彲浠ョ湅鍒颁笂闈㈡垜浠坊鍔犵殑鏄痥eydown浜嬩欢锛屼篃灏辨槸濡傛灉鐢ㄦ埛涓嶆澗鎵嬶紝鍙互涓€鐩磋Е鍙戣繖涓簨浠躲€傜敱浜庢垜浠湪鍥剧墖鐨勭缉鏀惧拰鏃嬭浆涓姞鍏ヤ簡鍔ㄧ敾鏁堟灉锛屾墍浠ユ墽琛屾椂闂翠负0.3s锛屾墍浠ュ綋閿洏浜嬩欢鎸佺画鏃讹紝涓ゆ瑙﹀彂鐨勯棿闅旀椂闂村皬浜?.3s鏃讹紝灞忓箷灏变細鎶栧姩锛屾墍浠ヨ繖閲屾垜浠鍋氫竴涓畝鍗曠殑闃叉姈/**杩欐浠ｇ爜灏辨槸涓嬮潰鐨勪緥瀛愶紝璇峰厛鐪嬩笅闈?fn[function]闇€瑕侀槻鎶栧姛鑳?delay[number]姣锛屽幓鎶栧懆鏈熷€?/functiondebounce(fn,delay){lettimer=null//浣跨敤闂寘returnfunction(){if(timer){clearTimeout(timer)//杩涘叆杩欎釜鍒嗘敮璇彞锛岃鏄庡綋鍓嶅浜庤鏃惰繃绋嬩腑锛屽啀娆¤Е鍙戠浉鍚岀殑浜嬩欢銆傛墍浠ヨ鍙栨秷褰撳墠璁℃椂锛岄噸鏂板紑濮嬭鏃秚imer=setTimeOut(fn,delay)}else{timer=setTimeOut(fn,delay)//杩涘叆杩欎釜鍒嗘敮琛ㄧず褰撳墠涓嶆槸璁℃椂锛岀劧鍚庡紑濮嬭鏃秨}}Traditional闃叉姈鍔熻兘鏄鏋滅敤鎴峰湪鎸囧畾鏃堕棿鍐呰繛缁Е鍙戜簨浠讹紝鍙湁鐢ㄦ埛鏈€鍚庝竴娆¤Е鎽镐簨浠舵墠浼氱敓鏁堛€傛瘮濡傛垜浠寚瀹氱殑鏃堕棿鏄?.5s锛岀敤鎴疯Е鍙戜簡涓€涓簨浠讹紙姣斿鐐瑰嚮浜嬩欢锛夛紝鍦?.5s鍐呭鏋滃啀娆¤Е鍙戜簨浠讹紝绗竴涓簨浠跺氨涓嶄細鎵ц銆傚鏋滅敤鎴峰湪绗簩娆′簨浠惰Е鍙戝悗0.5s鍐呰Е鍙戜簡鍚屼竴涓簨浠讹紝鍒欒浜嬩欢鐩村埌鐢ㄦ埛鏈€鍚庝竴娆¤Е鍙戝悗鎵嶄細鎵ц璇ヤ簨浠跺彧鏈夊湪0.5s鍐呮病鏈夎Е鍙戝悓涓€涓簨浠舵椂鎵嶄細鎵ц璇ヤ簨浠讹紙鍏蜂綋浠ｇ爜璇峰弬鑰冧笂闈㈢殑浠ｇ爜锛屽鏋滄兂浜嗚В鏇村鍙互鑷鎼滅储锛夈€備絾鏄垜浠繖閲屾樉鐒朵笉鑳借繖鏍峰仛銆傚鏋滅敤鎴疯繛缁偣鍑伙紝閭ｄ箞杩欎釜浜嬩欢姘歌繙涓嶄細琚墽琛屻€傛垜浠渶瑕佽鐢ㄦ埛瑙﹀彂鐨勪簨浠跺厛鐢熸晥锛岀劧鍚庡湪鎸囧畾鐨勬椂闂村唴鍐嶆瑙﹀彂銆傛椂闂翠笉浼氱敓鏁堬紝绛夊埌鎸囧畾鐨勬椂闂磋繃鍘汇€傜劧鍚庤杩欎釜浜嬩欢琚Е鍙戙€?/鐜板湪鎴戜滑鍦╠ata涓畾涔変竴涓彉閲忔潵鎺у埗鎴戜滑鐨勪簨浠舵槸鍚﹀彲浠ヨ瑙﹀彂銆傝繖閲屼笉鑰冭檻灏佽闃叉姈鍔熻兘銆傚悗闈㈠彲浠ュ崟鐙璇撮槻鎶栥€俢anRun:true//榛樿涓簍rue锛屼簨浠舵槸绗竴娆rigger鍙互瑙﹀彂//鐒跺悗鎴戜滑瀹氫箟闃叉姈鍑芥暟keyHandleDebounce(e){if(this.canRun){//濡傛灉this.canRun涓虹湡锛岃瘉鏄庡嚱鏁板綋鍓嶅彲浠ユ墽琛屻€倀his.keyHandle(e)//keyHandle涓洪敭鐩樿Е鍙戜竴涓簨浠讹紝涓嬮潰浼氳this.canRun=false//鍑芥暟鎵ц鍚庯紝涓€娈垫椂闂村唴涓嶈兘鍐嶆鎵цsetTimeout(()=>{this.canRun=true//缁忚繃鎴戜滑璁剧疆鐨勬椂闂村悗锛岃缃畉his.canRun鍙樹负true锛屽嚱鏁板彲浠ュ啀娆℃墽琛寎,300)//杩欓噷鎴戜滑鍥哄畾鎸囧畾鐨勯棿闅斾簨浠朵负0.3s锛屼篃灏辨槸animationexecutiontime}},//杩欐椂鍊欐垜浠彲浠ユ坊鍔犳垨鑰呯Щ闄ら敭鐩樹簨浠剁殑鍦版柟锛屽皢閿洏浜嬩欢鐨勮Е鍙戞敼涓鸿Е鍙戦槻鎶栦簨浠禿ocument.addEventListener('keydown',this.keyHandleDebounce)document.removeEventListener('keydown',this.keyHandleDebounce)杩欐牱鎴戜滑灏卞彲浠ヨ揪鍒伴槻鎶栧拰鎸佺画瑙﹀彂閿洏浜嬩欢鐨勭洰鐨勶紝鐩戝惉閿洏浜嬩欢灏变笉鐢ㄥ璇翠簡銆傚彧瑕佺洃鍚敤鎴锋寜涓嬬浉搴旂殑鎸夐挳锛岀劧鍚庤Е鍙戠浉搴旂殑浜嬩欢鍗冲彲銆傞渶瑕佹敞鎰忕殑鏄紝涓婁竴寮犲拰涓嬩竴寮犲浘鐗囧彧鏈夊湪澶氬浘棰勮鐢熸晥鏃舵墠鏈夋晥锛岃繖閲屾垜浠笉浣跨敤鈫戔啌鈫愨啋閿潵鏀惧ぇ銆佺缉灏忋€佷笂涓€椤点€佷笅涓€椤碉紝鑰屾槸浣跨敤wsad閿潵鎿嶄綔鐩稿簲鐨勫姛鑳姐€備负浠€涔堝憿锛屽綋鐒舵槸灏介噺鎶婂姛鑳介敭鏀惧湪宸︽墜杈癸紝濡傛灉鍔熻兘閿殑宸﹀彸涓よ竟閮芥暎寮€閭ｈ鏈夊涓嶆柟渚匡紝杩欐牱涔熸柟渚跨敤鎴峰乏鍙虫搷浣?鍙虫墜鍦ㄨЕ鎽告澘涓婃帶鍒跺浘鐗囩殑绉诲姩锛堝叾瀹炴槸鍥犱负涓婁笅閿細瀵艰嚧椤甸潰婊氬姩锛屼絾鏄瑪鑰呭苟娌℃湁鎵惧埌寰堝濂界殑鏂规硶锛夛紝涓轰粈涔堜笉鎺у埗鍥剧墖鐨勭Щ鍔ㄥ憿锛熷綋鐒舵槸鍥犱负瑙ｆ斁浜嗙敤鎴风殑鍙虫墜锛屾墍浠ョ敤瑙︽帶鏉挎垨鑰呴紶鏍囩Щ鍔ㄩ兘寰堟柟渚匡紒鑰屼笖鐢ㄩ敭鐩樻帶鍒剁Щ鍔ㄨ窛绂讳篃涓嶅ソ锛屼綋楠屼笉鏄緢濂絢eyHandle(e){vare=window.event||evarkey=e.keyCode||e.鍝釜||e.charCodeswitch(key){case27://escthis.close()breakcase65://閿產-previousif(this.multiple){this.toogleImg(false)}breakcase68://dkey-涓嬩竴涓猧f(this.multiple){this.toogleImg(true)}breakcase87://wkey-enlargethis.scaleFunc(0.15)breakcase83://skey-shrinkthis.scaleFunc(-0.15)breakcase81://qkey-閫嗘椂閽堟棆杞瑃his.rotateFunc(-90)breakcase69://ekey-椤烘椂閽堟棆杞?rotateFunc(90)breakcase82://rkey-resetkeythis.initImg()breakdefault:break}}澧炲姞绛夊緟鍥剧墖鍔犺浇鐨勬晥鏋滃洜涓洪儴鍒嗗浘鐗囨潵鑷綉缁滄垨鏈嶅姟鍣ㄥ姞杞斤紝鐢变簬鍥剧墖澶у皬鎴栫綉閫熸參鍙兘鏄浘鐗囧姞杞芥參鐨勫師鍥犮€備负浜嗚壇濂界殑鐢ㄦ埛浣撻獙锛屾垜浠渶瑕佸悜鐢ㄦ埛灞曠ず鍔犺浇鏁堟灉銆傚鏋滅敱浜庡悇绉嶅師鍥狅紙缃戠粶涓嶅ソ銆佸浘鐗囧湴鍧€鏃犳晥绛夛級瀵艰嚧鍥剧墖鍔犺浇澶辫触锛屾垜浠篃瑕佺粰鐢ㄦ埛涓€涓弽棣堟晥鏋溿€傞鍏堬紝淇姝ゅ鐨勯敊璇€備箣鍓嶏紝鎴戜滑鐩存帴淇敼prop涓紶閫掔殑url鍊笺€傚綋鐒讹紝杩欎笉鏄爣鍑嗗寲鐨勩€傛垜浠笉鑳界洿鎺ユ洿鏀瑰瓙缁勪欢涓璸rop涓殑鍊笺€備慨鏀逛簡锛岃櫧鐒朵笉鐭ラ亾涓轰粈涔堟病鏈夋姤閿欍€?姝ｅソ鎴戜滑瑕佸疄鐜扮瓑寰呭浘鐗囧姞杞界殑鏁堟灉锛岃繖绉嶄笉瑙勮寖鐨勬搷浣滀篃寰堝鏄撹В鍐炽€?/棣栧厛鎴戜滑鍦╠ata涓畾涔変竴涓彉閲廼mgurlimgurl:''//鐒跺悗鎴戜滑鐢ㄨ繖涓浛鎹㈡垜浠綋鍓嶆樉绀虹殑鍥剧墖鐨勫湴鍧€锛堣繖涓彃浠跺彧鏈変竴涓猧mg鍏冪礌锛屽鍥鹃瑙堟槸閫氳繃淇敼杩欏紶鍥剧墖鐨剈rl瀹炵幇){this.imgState=2//鍥剧墖鍔犺浇鎴愬姛锛岄〉闈㈡樉绀哄浘鐗噒his.imgurl=url}img.onerror=()=>{this.imgState=3//鍥剧墖鍔犺浇澶辫触锛屾樉绀哄姞杞藉け璐}}//杩欎釜缁勪欢璋冪敤鍚庯紝鎴戜滑闇€瑕佷互鐢ㄦ埛鐨剈rl涓哄弬鏁拌皟鐢ㄤ笂闈㈢殑鍖呬慨鏀瑰浘鐗囧湴鍧€鐨勫嚱鏁癷f(this.multiple){//imgList涓哄鍥鹃瑙堟椂鏄剧ず鐨勫浘鐗囨暟缁刬f(Array.isArray(this.imgList)&&this.imgList.length>0){//nowImgIndex鏄粯璁ゅ浘鐗囨暟缁勪腑鏄剧ず鍥剧墖鐨勪笅鏍囷紝濡傛灉鐢ㄦ埛涓嶄紶锛岄粯璁や负0锛堝嵆绗竴涓級this.imgIndex=Number(this.nowImgIndex)||0//this.url=this.imgList[this.imgIndex]//鍦ㄧ洿鎺ヤ慨鏀箄rl涔嬪墠锛岃繖閲屾敼涓鸿皟鐢ㄥ嚱鏁皌his.changeUrl(this.imgList[this.imgIndex])}else{console.error('imgList涓虹┖鎴栨牸寮忎笉姝ｇ‘')}}else{//濡傛灉涓嶆槸澶氬浘灞曠ず锛岀洿鎺ヨ幏鍙栫敤鎴蜂紶鍏ョ殑url鍗冲彲this.changeUrl(this.url)}鍒囨崲鍒颁笂涓€涓竴寮犲拰涓嬩竴寮犵焊鐨勫湴鏂逛篃瑕佹敼鎴愯皟鐢ㄥ嚱鏁扮殑鏂规硶锛堣兘鎴浘鎴戝氨涓嶈创浠ｇ爜浜嗭級銆傝嚦姝ゆ垜浠鍦ㄥ姞杞斤紝鍔犺浇瀹屾垚锛屽畬鎴愬姞杞藉け璐ョ殑鏁堟灉銆傚叾瀹炶繖閲岃繕鏈変竴涓棶棰橈紝灏辨槸濡傛灉鎴戜滑缁х画鍒囨崲涓ゅ紶鍥剧墖鐨勮瘽锛屽彲鑳戒細鍚屾椂鍔犺浇涓ゅ紶鍥剧墖锛岀劧鍚庡氨浼氬嚭鐜颁袱寮犲浘鐗囦緷娆″姞杞界殑闂銆傝繖鏃跺€欐瘡寮犲浘鐗囧姞杞芥垨鑰呭姞杞藉け璐ラ兘浼氫慨鏀瑰姞杞界姸鎬侊紝鐢氳嚦浼氬鑷存樉绀洪敊璇浘鐗囩殑鎯呭喌锛岃繖閲屾垜浠ヤ负闃叉姈鎴栬€呰妭娴佺殑鏂规硶閮借В鍐充笉浜嗭紝鎵€浠ユ垜鍙兘鏀瑰彉涓绘剰銆傚鏋滄湁鍒囨崲鍥剧墖锛岄偅鑲畾鏄鍥鹃瑙堬紝鎴戜滑闇€瑕佹樉绀虹殑鏄敤鎴锋渶鍚庣偣鍑荤殑銆傚綋鏃跺垏鎹㈢殑鍥剧墖锛屾墍浠ユ垜浠彧闇€瑕佸湪淇敼鍥剧墖鍦板潃鐨勬椂鍊欎紶鍏ュ綋鍓嶅浘鐗囩殑涓嬫爣锛屽姞杞藉畬鎴愬悗锛屽垽鏂綋鍓嶅姞杞界殑鍥剧墖鐨勪笅鏍囨槸鍚︽槸涔嬪墠鍔犺浇鐨勫浘鐗囩殑涓嬫爣褰撳墠闇€瑕佹樉绀哄彧闇€鏍囪鍗冲彲//this.changeUrl(this.imgList[this.imgIndex])this.changeUrl(this.imgList[this.imgIndex],this.imgIndex)//鐒跺悗鏀瑰彉changeUrlchangeUrl(url,index){this.imgState=1letimg=newImage()img.src=urlimg.onload=()=>{if(index!=undefined&&index==this.nowImgIndex){this.imgState=2this.imgurl=url}elseif(index==undefined){this.imgState=2this.imgurl=url}}img.onerror=()=>{if(index!=undefined&&index==this.nowImgIndex){this.imgState=3}elseif(index==undefined){this.imgState=3}}}锛屽ぇ鍔熷憡鎴愶紝杩欓噷灏变笉鏄剧ず娴嬭瘯缁撴灉浜嗭紝鍙嶆鏄垚鍔熶簡銆傛枃涓湁寰堝涓嶆垚鐔熺殑鍦版柟锛岃繕闇€瑕佸ぇ瀹跺澶氭寚鏁欙紝璋㈣阿锛岃阿璋Q锛?378431028寰俊锛歨eyongsheng1996