vue´°²å¼þʵս´úÂë

ʱ¼ä£º2013.02.08 ·¢²¼ÈË£ºkasezb
vue´°²å¼þʵս´úÂë

Òѽâ¾öÎÊÌâ

¹È¸èkasezbÓû§ÔÚ2013.02.08Ìá½»Á˹ØÓÚ¡°¹Ë³Çvue´°²å¼þʵս´úÂ롱µÄÌáÎÊ£¬»¶Ó­´ó¼ÒÓ¿Ô¾·¢±í×Ô¼ºµÄ¹Ûµã¡£Ä¿Ç°¹²ÓÐ1¸ö»Ø´ð£¬×îºó¸üÐÂÓÚ2025-02-27T10:43:45¡£Ï£Íû´ó¼ÒÄܹ»°ïÖúËý¡£

ÏêϸÎÊÌâÃèÊö¼°ÒÉÎÊ£ºÆÚ´ýÄúµÄ´ð°¸£¬Ð»ÁË,Ï´ÎÓÐʶù±ðÍüÁËÕÒÎÒ £¡

Ï£ÍûÒÔϵĻشð£¬Äܹ»°ïÖúÄã¡£

µÚ1¸ö»Ø´ð

Óû§Ãû£º**rongcheng  

vue×öÒƶ¯¶Ë¾­³£Åöµ½´°µÄÐèÇó,ÕâÀïдһ¸ö¹¦Äܼòµ¥µÄvue´°

popup.vue

<template><divúֽ¼þ³¤Îå·âÄÑÃÀÇóclass="popup-wrapper"v-show="visible"@click="hide"><divclass="popup-text">{{text}}</diÇ°ÆóÎÄÂɸְå̸Ìâ·­v></div></template>

×é¼þhtml½á¹¹,Íâ²ãdivÀ´×Ôposition:fixed**,ÄÚ²ãdiv´¡ÄÇÆÈÅиú²ì¹Ø¼ÃÔõÏÔʾ´°ÄÚÈÝ

exportdefault{name:'popup',propÎÊ´ðs:{text:{//ÎÄ×ÖÄÚÈÝtype:String,default:''},time:{//ÏÔʾµÄʱ³¤type:Number,default:3e3},},data(){return{visible:false}},methods:{open(){thisס.visible=trueclearTimeout(this.timeout);this.$emit('show')if(thi¶îѽÒæÐòs.time>0){this.timeout=setTimeout(()=>{this.hide()},this.time)}},hide(){this.visible=falsethis.$emit('hide')clearTimeout(this.timeoÒòÇëÊ··þ·Ö¸»ÅÅ»»Ã´ut);}}}

popup.vueÖ»ÓÐ2¸öÊôÐÔ:Îı¾ºÍÏÔʾʱ¼ä¡£×é¼þÏÔʾÒþ²ØÓÉ**ÊôÐÔvisible¿ØÖÜÊÊÔòÂð³ÇÖØѧÑôÖÆ£¬Ö»±©Â¶¸øÍâ½çopenºÍhide2¸ö·½·¨£¬2¸ö·½·¨´¥·¢¶ÔÓ¦µÄʼþ

²âÊÔÒ»ÏÂ

<template><popupref="popup"text="´°ÄÚÈÝ":tiÓ¦¼ÆÓ¢ÈçͶ¸Ãme="1e3"></popup></templaÕ¾¹»¼¼Æóµ**ÆÄ£Çú²¢te><script>iÁ˱ä×ø»ìÓ¡¾«ÕÆÄÍÅàmportPopupfrom'@/components/popup'this.$refs.***.open²ãÒìÑø¶û´Ó¸Äºú()</script>

²å¼þ»¯

×é¼þ¹¦ÄÜдºÃÁË£¬µ«ÊÇÕâÖÖµ÷Ó÷½Ê½ÏԵúÜÀÛ׸¿´¾«¡£¾Ù¸öÀý×Ólayer.js²ÝÐÐÅ£´´Å®µÄµ÷ÓþÍÊÇ***.open()ûÓÐimport£¬Ã»ÓÐref²Ë˵¿Ú¸±ÎÞ»¥Î»Æë¼Û·¹£¬µ±È»ÒªÏÈÈ«¾ÖÒýÓÃlayer¡£ÎÒÃÇдµÄ´°Äܲ»ÄÜÕâô·½±ãÄØ£¬Îª´ËÐèÒª°Ñpopup¸Äд³Évue²å¼þ¡£
˵ÊDzå¼þ£¬µ«ÄÜÅäÖÃÊôÐÔµ÷Ó÷½·¨µÄ»¹ÊÇ×é¼þ±¾Éí£¬¾ßÌåÊÇʵÀý»¯µÄ×é¼þ£¬ÀíÖÁ¶øÇÒÕâ¸öʵÀý±ØÐëÊÇÈ«¾Öµ¥Àý£¬ÕâÑù²»Í¬vueÎļþ»½ÆðpopupµÄʱºò²Å²»»á´ò¼Ü

Éú**Àý

//p°¡Ê¦lugins/popupVm.jsimportPopupfrom'@/components/popup'let$vmexportconsÒ»´ý»ÓºÚ¼Ê·Û³ÔÉÆtfactory=(Vue)=>{if(!$vm){letPopu¿×p=Vue.extend(PopupComponent)$vm=newPopup({el:document.createElement('div')})document.body.appendChild($vm.$el)}return$vm}

×é¼þʵÀý»¯ºóÊÇÌí¼ÓÔÚbodyÉϵģ¬props²»ÄÜдÔÚhtmlÀïÐèÒªjsÈ¥¿ØÖÆ£¬ÕâÀïд¸ö·½·¨ÈÃÊôÐÔĬÈÏÖµ¼ÌÐø·¢»Ó×÷ÓÃ

//plugins/util.j**portconstsetProps=($vm,options)=>{constdefaults={}Object.keys($vm.$options.props).forEach(k=>{defaults[k]=$vm.$options.props[k].default})const_options=_.assign({},defaults,options)for(letiin_options){$vm.$props[i]=_options[i]}}//plugins/popupPlugin.jsimport{factory}from'./popupVm'import{setProps}from'./util'exportdefault{install(Vue){let$vm=factory(Vue);constpopup={open(options){setProps($vm,options)//**ʼþtypeofoptions.onShow==='function'&&$vm.$once('show',options.onShow);typeofoptions.onh**ide==='function'&&$vm.$once('hide',options.onh**ide);$***.open();},hide(){$vm.hide()}£¬//Ö»ÅäÖÃÎÄ×Ötext(text){***.open({text})}}Vue.prototype.$popup=popup}}

ÔÚmain.jsÄÚ×¢²á²å¼þ

//main.jsimportVuefrom'vue'importPopupPluginfrom'@/plugins/popupPlugin'Vue.use(PopupPlugin)ÔÚvue¿ò¼ÜÄÚµ÷Óþͷdz£·½±ãÁË<script>this.$popup.text('´°ÏûÏ¢')</script>

ÒÔÉϾÍÊDZ¾ÎĵÄÈ«²¿ÄÚÈÝ£¬Ï£Íû¶Ô´ó¼ÒµÄѧϰÓÐËù°ïÖú£¬Ò²Ï£Íû´ó¼Ò¶à¶àÖ§³Ö½Å±¾Ö®¼Ò¡£

Äú¿ÉÄܸÐÐËȤµÄÎÄÕÂ:Vue×Ô¶¨Òå´°Ö¸ÁîµÄʵÏÖ´úÂëvueµÄtoast´°×é¼þʵÀýÏê½âvue´°×é¼þʹÓ÷½·¨vue´°ÏûÏ¢×é¼þµÄʹÓ÷½·¨vue.extendʵÏÖalertģ̬¿ò´°×é¼þʹÓÃVue×é¼þʵÏÖÒ»¸ö¼òµ¥´°Ð§¹ûVUE2ʵÏÖʼþÇý¶¯´°Ê¾ÀýºÜ°ôµÄvue´°×é¼þ¹ØÓÚvue.js´°×é¼þµÄ֪ʶµã×ܽá