当前位置：首页 > Web前端 > vue.js

Element2Notification组件源码分析

时间：2023-03-31 19:56:09 vue.js

浠嬬粛Notification缁勪欢Notification甯哥敤鏉ュ叏灞€鏄剧ず閫氱煡鎻愰啋淇℃伅銆傛湰鏂囧皢鍒嗘瀽鍏舵簮鐮佸疄鐜帮紝鑰愬績闃呰锛岀浉淇′細瀵逛綘鏈夋墍甯姪銆傪煍楃粍浠舵枃妗ｉ€氱煡馃敆gitee婧愮爜鏇村缁勪欢鍒嗘瀽瑙侌煈夝煋欵lement2婧愮爜鍒嗘瀽缁勪欢姒傝銆侼otificationvsMessageNotification鍦ㄥ姛鑳介厤缃拰婧愮爜瀹炵幇涓婁笌Message闈炲父鐩镐技锛屾墍浠ヤ竴浜涢噸澶嶇殑鍐呭鏈枃涓嶅啀璇﹁堪銆備负浜嗘洿濂界殑鐞嗚В锛岃鍏堥槄璇籑essage缁勪欢鐨勫疄鐜板拰Message鏈嶅姟鐨勫疄鐜般€侻essage甯哥敤浜庝富鍔ㄦ搷浣滃悗鐨勫弽棣堟彁绀猴紝鍙互鎻愪緵鎴愬姛銆佽鍛娿€侀敊璇瓑鍙嶉淇℃伅銆傛樉绀哄湪椤堕儴涓ぎ骞惰嚜鍔ㄦ秷澶憋紝鏄竴绉嶈交閲忕骇鐨勪笉鎵撴柇鐢ㄦ埛鎿嶄綔鐨勬彁绀烘柟寮忋€侼otification甯哥敤浜庢樉绀哄叏灞€閫氱煡鎻愰啋娑堟伅銆傛洿澶嶆潅鐨勯€氱煡鍐呭銆傜郴缁熶富鍔ㄦ帹閫併€傛偓鍋滃嚭鐜板湪椤甸潰鐨勪竴瑙掋€傜敤娉曚笌Message缁勪欢鐩稿悓锛屽皢Notification浣滀负鏈嶅姟鏉ヨ皟鐢ㄣ€傝皟鐢ㄦ柟娉曟槸Notification(options)锛岀粍浠朵负姣忕绫诲瀷瀹氫箟浜嗚嚜宸辩殑鏂规硶锛屾瘮濡侼otification.success(options)锛屽彲浠ヨ皟鐢∟otification.closeAll()鎵嬪姩鍏抽棴鎵€鏈夊疄渚嬨€俹ptions鍙傛暟閰嶇疆椤癸紝杩欓噷涓嶅啀璇︾粏璇存槑锛岃瑙佺粍浠舵枃妗otification#options銆傚綋缁勪欢搴撳畬鍏ㄥ鍏ュ悗锛岀洿鎺ヤ娇鐢╰his.$notify(options)銆?/packages\notification\index.jsimportNotificationfrom'./src/main.js';exportdefaultNotification;//src/index.jsconstinstall=function(Vue,opts={}){Vue.prototype.$notify=Notification;};//瀹屽叏瀵煎叆this.$notify(options);//鍗曠嫭寮曠敤import{Notification}from'element-ui';閫氱煡锛堥€夐」锛夛紱缁勪欢婧愮爜DOM缁撴瀯缁勪欢Notification鐨凞OM灞傜骇涓嶢lert闈炲父鐩镐技銆?transitionname="el-notification-fade">{{message}}

鍚嶄负el-notification1锔忊儯鐨?div>鍏冪礌鐨勬牴鑺傜偣锛屼娇鐢╰ransition瀹炵幇杞満鏁堟灉锛屽寘鎷袱涓瓙鑺傜偣:2锔忊儯宸﹁竟鐨勫浘鏍?锔忊儯鍙宠竟鐨勬枃瀛楀唴瀹瑰尯銆?锔忊儯鏍囬5锔忊儯璇存槑鏂囧瓧6锔忊儯鍏抽棴鎸夐挳锛堜娇鐢ㄧ粷瀵瑰竷灞€瀹氫綅锛変笅鍥炬槸缁勪欢Alert鐨凞OM灞傛缁撴瀯锛岄潪甯哥浉浼笺€傝鎯呰闃呰涓婇潰婧愮爜鍒嗘瀽涓殑Alert銆傜粍浠跺嚱鏁颁簨浠剁洃鍚櫒銆傚畠鍙互鏄痶ransitionend鎴朼nimationendnotification銆傚姛鑳界殑瀹炵幇涓巑essage绫讳技銆備笅闈富瑕佽鏄庡尯鍒紝绫讳技鐨勪唬鐮佷笉鍐嶈禈杩般€?/packages\notification\src\main.vue鐢熷懡鍛ㄦ湡&浜嬩欢鍚屾秷鎭粍浠讹紝褰撴寕杞藉悗锛岃皟鐢ㄦ柟娉晄tartTimer寮€鍚畾鏃跺櫒锛屽疄鐜板疄渚嬭嚜鍔ㄥ叧闂紝鎸傝浇鍚庢坊鍔爇eydown浜嬩欢鐩戝惉銆傚湪瀹炰緥琚攢姣佷箣鍓嶏紝keydown浜嬩欢鐩戝惉鍣ㄥ皢琚Щ闄ゃ€傛牴鑺傜偣涓嶄粎缁戝畾浜唌ouseenter鍜宮ouseleave浜嬩欢锛岃繕缁戝畾浜哻lick浜嬩欢锛岀敤浜庤皟鐢ㄥ疄渚嬭鐐瑰嚮鏃剁殑浼犲叆鍥炶皟鍑芥暟銆俢lick(){if(typeofthis.onClick==='function'){this.onClick();}}锛岀粍浠秚ransition涓嶇粦瀹歛fter-leave閽╁瓙鍑芥暟锛岃€屾槸鍦ㄧ洃鍚櫒涓坊鍔犱竴涓猼ransitionend浜嬩欢鐩戝惉鍣紝璋冪敤鏂规硶destroyElement杩涜缁勪欢鍏抽棴鍚庣殑閿€姣佸伐浣溿€?/watchlistenerclosed(newVal){if(newVal){this.visible=false;this.$el.addEventListener('transitionend',this.destroyElement);//娣诲姞杩囨浮鏁堟灉浜嬩欢鐩戝惉鍣▆}//methoddestroyElement(){this.$el.removeEventListener('transitionend',this.destroyElement);//鍘婚櫎杞満鏁堟灉浜嬩欢鐩戝惉鍣?/vmdestroy&&removeel}锛屾柟娉昸eydown涓嶄粎瀹炵幇浜嗘寜ESC閿叧闂秷鎭粍浠讹紝杩樻敮鎸佹寜backspacedetele閿敤浜庢竻绌哄畾鏃跺櫒绛夐敭鐢ㄤ簬鎭㈠瀹氭椂鍣ㄣ€俴eydown(e){//8閫€鏍奸敭46鍒犻櫎娓呴櫎璁℃椂鍣╥f(e.keyCode===46||e.keyCode===8){this.clearTimer();}elseif(e.keyCode===27){//esc鍏抽棴娑堟伅if(!this.closed){this.close();}}else{this.startTimer();//resumesthetimer}}positionoffset灞炴€у畾涔変簡瀹炰緥鐨勫脊鍑轰綅缃紝鏀寔鍥涚閫夐」锛歵op-right锛宼op-left锛宐ottom-right锛宐ottom-left锛岄粯璁や负top-right銆傜粍浠朵娇鐢ㄧ粷瀵瑰畾浣嶏紝鏍规嵁灞炴€osition鐨勫€兼潵纭畾涓婁笅宸﹀彸杈圭晫鍋忕Щ灞炴€с€傝绠楀睘鎬erticalProperty鐢ㄤ簬鍐冲畾涓婁笅鍋忕Щ灞炴€ф槸浣跨敤top杩樻槸bottom锛涜绠楀睘鎬ositionStyle鏍规嵁verticalProperty鍊肩敓鎴愬唴鑱旀牱寮弔op/bottom:20px銆倂erticalProperty(){return/^top-/.test(this.position)?'top':'bottom';},positionStyle(){return{[this.verticalProperty]:`${this.verticalOffset}px`};}宸﹀彸鍋忕Щ浣跨敤璁＄畻灞炴€orizo鈥嬧€媙talClass鐢熸垚绫诲悕right鎴栫寮€銆俬orizo鈥嬧€媙talClass(){returnthis.position.indexOf('right')>-1?'right':'left';}锛岀浉鍏虫牱寮忓畾涔夛細.el-notification.right{right:16px}.el-notification.left{left:16px}Notification鐨勬湇鍔″疄鐜板湪source涓婂拰Message闈炲父鐩镐技浠ｇ爜瀹炵幇銆傚叿浣撶殑鍔熻兘娴佺▼瑙ｉ噴璇风湅鍓嶉潰鐨凪essage鏈嶅姟瀹炵幇锛岃繖閲屼笉鍐嶈禈杩般€傛簮浠ｇ爜鐨勭畝鍖栫粨鏋勫涓嬨€備唬鐮佸垱寤轰竴涓嚱鏁扮被鍨嬬殑瀵硅薄Notification锛屽悓鏃剁粰瀵硅薄娣诲姞灞炴€ф柟娉昪lose銆乧loseAll銆亀arning銆乮nfo銆乪rror锛屽鍑哄璞otification銆?/packages\notification\src\main.jsconstNotificationConstructor=Vue.extend(Main);//缁勪欢鏋勯€犲嚱鏁發etinstance;//缁勪欢瀹炰緥letinstances=[];//瀛樺偍鎵€鏈夌粍浠跺疄渚嬫暟缁刲etseed=1;//鐢ㄤ簬澧炲姞璁℃暟constNotification=function(options){//logic...};['success','warning','info','error'].forEach(type=>{//logic...});Notification.close=function(id,userOnClose){//閫昏緫...};Notification.closeAll=function(){//閫昏緫...};瀵煎嚭榛樿閫氱煡锛汵otification鏀寔鑷畾涔夊脊鍑轰綅缃紝鍙互浠庡睆骞曠殑鍥涗釜瑙掍腑鐨勪换鎰忎竴涓脊鍑猴紝浣嗘墍鏈夊疄渚嬮兘瀛樺偍鍦ㄥ悓涓€涓暟缁勪腑銆傚湪鏍峰紡璁＄畻杩囩▼涓紝澧炲姞浜嗕竴涓柊鐨勯€昏緫鏉ュ尯鍒嗕綅缃浉鍚岀殑鍏冪礌銆傚湪鍑芥暟Notification涓紝鏍规嵁灞炴€osition杩囨护鍏冪礌涓暟锛岃绠楀亸绉婚噺銆傚嵆浣挎湭璁剧疆鍋忕Щ鍊硷紝缁勪欢鐨勯粯璁ゅ亸绉婚噺涔熸槸16銆俢onstNotification=function(options){//...constposition=options.position||'鍙充笂';//...璁﹙erticalOffset=options.offset||0;instances.filter(item=>item.position===position).forEach(item=>{verticalOffset+=item.$el.offsetHeight+16;});鍨傜洿鍋忕Щ閲?=16锛沬nstance.verticalOffset=verticalOffset;//...};鍦ㄥ嚱鏁癱lose涓紝褰撳疄渚嬭鍒犻櫎鏃讹紝閲嶆柊璁＄畻鍙渶瑕佽皟鏁寸储寮曞€煎ぇ浜庡綋鍓嶅疄渚嬬储寮曠殑鍋忕Щ閲忥紝鏍规嵁灞炴€osition杩囨护鍏冪礌锛屾牴鎹绠楀嚭鐨勫睘鎬erticalProperty鏇存柊DOM鍏冪礌鏍峰紡銆侼otification.close=function(id,userOnClose){//...//鏁版嵁鏇存柊鍚庣殑鍋忕Щ閲忚绠梒onstposition=instance.position;constremovedHeight=instance.dom.offsetHeight;for(leti=index;i

上一篇：vueaxios包取消请求

下一篇：mac修改hosts、域名和ip绑定，vueInvalidHostheader

Element2Notification组件源码分析相关文章

最新推荐

猜你喜欢