vue自定义指令实现加载效果v-load（不带Vue.extend）
.box{width:160px;楂樺害锛?0px锛涜竟妗嗭細2px瀹炲績#666锛沚ox-sizing:border-box;}缃戠珯鏁堟灉婕旂ず锛歨ttp://ashhuai.work:8888/#/myLoadGitHub浠撳簱鍦板潃浠ｇ爜锛歨ttps://github.com/shuirongsh...鍔犺浇鎬濊矾鍒嗘瀽瀹炵幇鍔犺浇鏁堟灉锛屼竴鑸湁涓ょ鏂瑰紡锛氱涓€绉嶆槸锛氬垱寤轰竴涓姞杞界粍浠讹紝鐒跺悗閫氳繃Vue.extend()鏂规硶缁ф壙涓€涓姞杞界粍浠朵娇鐢紝姣斿浣滆€呯殑鏂囩珷鏂囩珷锛歨ttps://segmentfault.com/a/11...绗簩绉嶆槸锛氱洿鎺ヤ娇鐢ㄥ懡浠ゅ湪闇€瑕佸姞杞界殑dom涓婂垱寤轰竴涓猯oadingdom鍏冪礌锛屽苟鎸囧畾鐩稿簲鐨勬牱寮忋€傝繖绡囨枃绔犳槸鍏充簬绗簩涓€傜湅涓€涓嬫晥鏋滃浘v-load鏁堟灉鍥惧疄鐜版楠や竴锛氭坊鍔犺嚜瀹氫箟鎸囦护鍋囪鎴戞湁涓€涓猟om鍏冪礌锛屾垜缁欏畠娣诲姞涓€涓嚜瀹氫箟鎸囦护v-load="loading"锛岀粦瀹氫竴涓叿浣撶殑甯冨皵鍔犺浇锛岀敤鏉ユ帶鍒跺姞杞藉拰鍏抽棴111
loading:true.box{width:160px;楂樺害锛?0px锛沚order:2pxsolid#666;}涓嬮潰鎴戝皢鍦ㄨ嚜瀹氫箟鎸囦护鐨勭浉鍏抽挬瀛愬嚱鏁颁腑鎿嶄綔dom鍏冪礌銆傚叧浜庤嚜瀹氫箟鎸囦护鐨勫熀纭€鐭ヨ瘑锛屽彲浠ラ槄璇诲畼鏂规枃妗ｏ紝鎴栬€呭弬鑰冪瑪鑰呬箣鍓嶅叧浜庤嚜瀹氫箟鎸囦护鐨勬枃绔狅細https://segmentfault.com/a/11...绗簩姝ワ細涓虹洰鏍囧厓绱犲垱寤哄瓙鍏冪礌鍦ㄨ嚜瀹氫箟鎸囦护鐨勫垵濮嬪寲bind閽╁瓙鍑芥暟涓璬om鐢ㄤ簬鍔犺浇锛屾垜浠彲浠ュ緱鍒拌繖涓猟om鍏冪礌锛岄鍏堝杩欎釜鐩爣鍏冪礌杩涜鐩稿瀹氫綅锛岃鐢ㄤ簬鍔犺浇鐨勫瓙鍏冪礌dom鍘荤粷瀵瑰畾浣嶏紝浣跨敤杩欎釜鐩稿瀹氫綅瀵圭埗鍏冪礌鐨勫紩鐢╞ind(el,binding){consttarget=el;//鐖跺厓绱犵殑鐩稿瀹氫綅target.style.position="relative";//瀛愬厓绱犵殑閬僵灞傞儴鍒唋etloadChild=document.createElement("div");loadChild.className="loadClass";}涓婇潰浠ｇ爜涓紝缁欏姞杞藉瓙鍏冪礌loadChild璧嬩簡涓€涓牱寮忕被鍚峫oadClass銆傛湅鍙嬩滑鍦ㄨ繖閲屽彲鑳戒細鏈夌枒闂€傝繖涓嚜瀹氫箟鎸囦护鐨勬牱寮忔€庝箞鍐欙紵鑷畾涔夋寚浠や腑娌℃湁鏍峰紡鏍囩锛熸槸鐨勶紝鑷畾涔夋寚浠や腑涓嶈兘鐩存帴鍐欐牱寮忥紝涓嶈繃娌″叧绯伙紝鎴戜滑鍙互鍏堝啓涓€涓猚ss鏍峰紡锛岀劧鍚庡鍏ヤ娇鐢紝濡備笅锛?/寮曞叆鎷嗗垎鏍峰紡锛屾柟渚縤mport'./鍦ㄨ嚜瀹氫箟鎸囦护涓璱ndex.css'bind(el,binding){......loadChild.className="loadClass";}杩欑鎯呭喌涓媍lassName鐨勬牱寮忓彲浠ュ湪./index.css鏂囦欢涓缃鍏ュ悓绾х洰褰曞锛宭oadClass鏍峰紡濡備笅锛?loadClass{/*100%瀹介珮*/position:absolute;椤堕儴锛?锛涘簳閮細0锛涘乏锛?锛涘彸锛?锛?*榛樿鑳屾櫙棰滆壊鍜岄鑹?/background-color:rgba(255,255,255,0.99);棰滆壊锛?0b6ed0锛?*浣跨敤display:none杩涜閫忔槑杩囨浮锛?/涓嶉€忔槑搴︼細0銆?;杩囨浮锛氬叏閮?.3s锛?*灞呬腑*/display:flex;瀵归綈椤圭洰锛氬眳涓紱justify-content:center;}娉ㄦ剰杩欎釜鏁堟灉鏄湪loading鐨勬椂鍊欏惎鐢ㄥ拰娑堝け鐨勶紝娌℃湁浣跨敤vue鑷甫鐨則ransition缁勪欢transition锛屾垜浠彲浠ヤ娇鐢╰ransparencywithdisplay:none;璁剧疆瀹冦€傛敞鎰忓姞杞借浠ョ埗鍏冪礌涓鸿竟鐣屾潵鎺у埗锛屼絾鏄笉鑳藉叏灞忓姞杞姐€傜劧鍚庡湪鍒濆鍖栫殑鏃跺€欐鏌-load缁戝畾鐨勫€兼槸true杩樻槸false锛屽悓鏃舵坊鍔犱竴涓敤浜庨殣钘忕殑绫诲悕锛歭oad-hide锛屽皢鍔犺浇鐨刣om鍏冪礌杩藉姞鍒扮洰鏍囩埗鍏冪礌涓娿€俵oadChild.classList.add('load-hide')//娣诲姞绫诲悕target.appendChild(loadChild);//棰濆鍔犺浇neutron鍏冪礌/*閫氳繃閫忔槑搴﹀疄鐜拌繃娓″姩鐢?/.load-hide{opacity:0;}杩欐牱灏卞畬鎴愪簡鍒濆鍔犺浇銆傚綋v-load缁戝畾鐨勫€间负false鏃讹紝浼氳闅愯棌銆傜涓夋锛氱粍浠舵洿鏂版椂锛屾坊鍔犳垨绉婚櫎鍔犺浇闅愯棌绫诲悕){//v-load缁戝畾鐨勫€间负true锛屽幓鎺夎繖涓被鍚嶏紝鍙互鐪嬪埌loadChild.style.display='flex'setTimeout(()=>{loadChild.classList.remove('load-hide')},0);}else{//褰撶粦瀹氬€间负false鏃讹紝娣诲姞杩欎釜绫诲悕骞堕殣钘廳omloadChild.classList.add('load-hide')setTimeout(()=>{loadChild.style.display='none'},360);}}锛屾敞鎰忎负浠€涔堜笂闈㈢殑浠ｇ爜娌℃湁鐩存帴闅愯棌锛岃€屾槸鐢ㄤ竴涓畾鏃跺櫒Extend360姣鍐嶉殣钘忥紝鍥犱负浣滆€呰缃殑鍔犺浇dom鐨勮繃娓℃椂闂存槸0.3绉掞紝涔熷氨鏄瓑鍒伴€忔槑杩囨浮瀹屾垚锛岀劧鍚庨殣钘弆oadingdom锛岃繖鏍风湅璧锋潵鏇磋嚜鐒躲€?loadClass{杩囨浮锛氭墍鏈?.3绉掞紱鑷虫锛屾垜浠殑v-load鑷畾涔夋寚浠ょ殑鍔犺浇鏁堟灉灏卞垵姝ュ畬鎴愪簡銆備絾鏄姛鑳藉皯浜嗙偣锛岃嚜瀹氫箟鍔犺浇鏃惰繕鏄兂鍘诲姩鎬佹帶鍒讹細鑷畾涔夊姞杞藉浘鏍囧悕绉帮紝鑷畾涔夊姞杞芥枃瀛楋紝鑷畾涔夊姞杞芥枃瀛楅鑹诧紝鑷畾涔夊姞杞借儗鏅壊锛岄偅鎬庝箞鍔炲憿锛熷疄鐜扮鍥涙锛氫紭鍖栬嚜瀹氫箟鍛戒护锛屾敮鎸佷紶鍏ユ洿澶氬弬鏁版鏃讹紝鎴戠殑v-load鑷畾涔夊懡浠や笉闇€瑕佺粦瀹氬竷灏斿€笺€傚彲浠ヨ€冭檻缁戝畾涓€涓璞★紝閫氳繃鎺у埗杩欎釜瀵硅薄鐨勫叿浣撳€兼潵鍔ㄦ€佹帶鍒跺姞杞芥晥鏋溿€傚師濮嬭嚜瀹氫箟鎸囦护缁戝畾锛歷-load=loading//typeofloading=='boolean'鐜板湪鑷畾涔夋寚浠ょ粦瀹氾細v-load=loading2//typeofloading2=='object'
222 //濡傛灉瑕佹洿澶氱殑閰嶇疆椤癸紝浼犱竴涓璞★紝娉ㄦ剰鎸囧畾瀛楁loading2:{value:true,icon:"el-icon-eleme",//鑷畾涔夊姞杞藉浘鏍囧悕绉皌ext:"Guestofficerwaitamoment...",//Customloadingtextcolor:"red",//鑷畾涔夊姞杞芥枃瀛楅鑹瞓gColor:"#baf",//CustomLoadbackgroundcolor}浼犲弬鎸囧畾瀵瑰簲棰嗗煙銆傚湪鑷畾涔夊懡浠や腑鎺ユ敹鍙傛暟鏃讹紝蹇呴』鍦ㄧ浉鍏崇殑閽╁瓙涓帴鏀跺苟澶勭悊杩欎簺鍙傛暟銆傚浣曞鐞嗚繖浜涘弬鏁帮紵鍒ゆ柇v-load缁戝畾鐨剉alue鐨勭被鍨嬶紝鏄竷灏斿€艰繕鏄璞★紝浣跨敤nativejs鍒涘缓dom鍏冪礌杩涜涓嶅悓鐨勬搷浣滐紝鑰冭檻鎬ц兘缁檇om鍏冪礌璧嬬被鍚嶏紙鎴栬€呭鍒犵被鍚嶏級鍥犳锛屽彲浠ヤ娇鐢ㄦ枃妗ｅ垎鐗囦紭鍖杁ocument.createDocumentFragment()鏈€鍚庝涪鍒癿ask灞傜殑dom涓畬鎴愪唬鐮併€傝嚜瀹氫箟鎸囦护鏍峰紡鏂囦欢index.css.loadClass{/*瀹介珮100%*/position:absolute;椤堕儴锛?锛涘簳閮細0锛涘乏锛?锛涘彸锛?锛?*榛樿鑳屾櫙棰滆壊鍜岄鑹?/background-color:rgba(255,255,255,0.99);棰滆壊锛?0b6ed0锛?*瀵规樉绀轰娇鐢ㄩ€忔槑杩囨浮锛氭棤锛?/涓嶉€忔槑搴︼細0.8锛涜繃娓★細鍏ㄩ儴0.3s锛?*绂佺敤鏂囨湰閫夋嫨*/user-select:none;鏄剧ず锛氬脊鎬э紱瀵归綈椤圭洰锛氬眳涓紱justify-content:center;}/*閫氳繃閫忔槑搴﹀疄鐜扮殑杩囨浮鍔ㄧ敾*/.load-hide{opacity:0;}.loadClass>i{margin-right:4px;}鑷畾涔夊懡浠ょ殑js鏂囦欢index.js娉ㄦ剰鑷畾涔夊懡浠ら渶瑕佹敞鍐屽悗鎵嶈兘浣跨敤//importSplit鏍峰紡锛屾柟渚胯嚜瀹氫箟鍛戒护浣跨敤import'./index.css'exportdefault{//鍒濆鍖栫粦瀹歞omhookfunctionbind(el,binding){const鐩爣=el锛?/浼犻€掑弬鏁扮被鍨嬪垽鏂彉閲廲ontrolletflag;璁﹊sObj;if(typeofbinding.value=='boolean'){flag=binding.鍊糹sObj=false}if(typeofbinding.value=='object'){flag=binding.value.valueisObj=true}//鍙湁鏈塪om鍏冪礌鎵嶅仛鎿嶄綔if(target){//鐖跺厓绱爐arget鐨勭浉瀵瑰畾浣?style.position="鐩稿";//瀛愬厓绱犻伄缃╁眰閮ㄥ垎letloadChild=document.createElement("div");loadChild.className="loadClass";//绋嶅井浼樺寲鍒涘缓鏂囨。鐗囨鐨勬€ц兘letfragment=document.createDocumentFragment()//grandchildelement1loadingiconpartletiSun=document.createElement("i");iSun.className=isObj?binding.value.icon:"el-icon-loading";//瀛欏厓绱?鏂囨湰鎻愮ず閮ㄥ垎letspanSun=document.createElement("span");spanSun.innerHTML=isObj?binding.value.text:'Loading...'//浣跨敤鏂囨。鐗囨缁勮iSun鍜宻panSunfragment.appendChild(iSun);fragment.appendChild(spanSun);//灏嗘枃妗ｇ墖娈典涪鍏ュ瓙鍏冪礌閬僵灞俵oadChild.appendChild锛堢墖娈碉級锛?/鏍峰紡鍒ゆ柇璁剧疆if(isObj){loadChild.style.color=binding.value.colorloadChild.style.backgroundColor=binding.value.bgColor}//濡傛灉涓篺alse锛屽垯闅愯棌if(!flag){loadChild.classList.add('load-hide')loadChild.style.display='none'}//鐖跺厓绱犳坊鍔犲瓙鍏冪礌閬僵灞倁singtarget.appendChild(loadChild);}},//dom缁勪欢鏇存柊鎿嶄綔鎺у埗鏄剧ず鍜岄殣钘廲omponentUpdated(el,binding,vnode,oldVnode){letflag=typeofbinding.value=='boolean'?binding.value:binding.value.valueletloadChild=el.querySelector('.loadClass')if(flag){loadChild.style.display='flex'setTimeout(()=>{loadChild.classList.remove('鍔犺浇-闅愯棌')},0);}else{loadChild.classList.add('load-hide')setTimeout(()=>{loadChild.style.display='鏃?},360);}},}杩欓噷浣跨敤鑷畾涔夊姞杞芥寚浠?template>
