vue彈窗組件的樣子
我們先看一下，我們要實現(xiàn)出來的彈窗組件長什么樣子：
吶，我們要用vue組件實現(xiàn)的彈窗就是這個樣子，跟我們用js插件實現(xiàn)的效果一樣，下面我們開始講述怎么實現(xiàn)一個通用的vue彈窗組件。
實現(xiàn)vue彈窗組件需要的知識
是vue組件，當(dāng)然最基礎(chǔ)的是vue的知識，我假設(shè)大家是有一定vue功底的，然后你還需要了解：
1、vue的事件系統(tǒng)，vue組件間的單項數(shù)據(jù)流，props從父組件向子組件傳遞數(shù)據(jù)，子組件通過事件emit向父組件傳遞事件，父組件通過on監(jiān)聽子組件的事件來處理具體事務(wù)。
2、具名插槽slot，通過name屬性來接收不同的父組件傳遞過來的內(nèi)容，具名插槽接收兩個數(shù)據(jù)，一是彈窗的標(biāo)題，二是彈窗的顯示內(nèi)容。
vue彈窗組件的實現(xiàn)代碼
vue彈窗的具體實現(xiàn)代碼采用單頁面組件的形式寫的，具體代碼如下：
<template> <div class='md-cont' v-show='showstate'> <div class='md-wrapper' > <div class='md-title'> <slot name='tlt' > 標(biāo)題 </slot> </div> <div class='md-text'> <slot name='text' > 這里是彈框內(nèi)容 </slot> </div> <div class='footer'> <div v-if='type=="confirm"' @click='tocancel' class='md-btn'>取消</div> <div class='md-btn' @click='took'>確定</div> </div> </div> </div></template><script>export default{ name:'modal', props:['type','showstate'], methods:{ tocancel:function(){ this.$emit('tocancel'); }, took:function(){ this.$emit('took'); } }}</script><style scoped>.md-cont{position:fixed;left:0;right: 0;top:0;bottom: 0; z-index: 500;background:rgba(0,0,0,0.3);text-align:center; overflow: hidden;white-space:nowrap;}.md-cont:after{content:"";display:inline-block;width:0;height:100%;visibility: hidden;vertical-align:middle;}.md-wrapper{display:inline-block;vertical-align:middle; background:#fff;color:#333333;font-size:0.34rem; padding-top:0.2rem;border-radius: 0.1rem;max-width:100%;}.md-title{font-size:0.34rem;text-align:center;line-height:0.6rem;}.md-text{font-size:0.25rem;text-align:center;line-height:0.4rem;padding:0.2rem 0.5rem;}.footer{display:flex;border-top:0.01rem solid #E5E5E5; line-height:0.88rem;color:#488BF1;font-size:0.32rem;}.md-btn{flex:1;}.md-btn +.md-btn{border-left:0.01rem solid #E5E5E5;}</style>組件中模版代碼很簡單，其中主要的就是兩個具名插槽slot；兩個按鈕觸發(fā)兩個事件，這兩個事件通過$emit上傳到父組件。根據(jù)父組件傳遞過來的type屬性來決定是否顯示取消按鈕。
對于具名插槽和$emit事件系統(tǒng)不理解的可以去vue官網(wǎng)查看，這里不多做贅述了。
vue彈窗組件的使用
在父組件里面使用彈窗組件也是很方便的，如果你是bootstrap的使用者或者愛好者，你會對這種使用方式感到熟悉和親切。
下面我展示使用代碼：
<template><div> <div class='aft-box'> <div class='aft-flex aft-pd'> <div class='aft-btn' @click='alerts'>alert</div> </div> <div class='aft-flex aft-pd'> <div class='aft-btn aft-blue' @click='confirms'>confirm</div> </div> </div> <Modal type='alert' @took='okfall' :showstate='showa'> <span slot='tlt'>提示</span> <div slot='text'>我是一個alert提示彈窗</div> </Modal> <Modal type='confirm' @took='okfall2' @tocancel='cancelfall' :showstate='showc'> <span slot='tlt'>確認(rèn)</span> <div slot='text'>{{msg}}</div> </Modal></div></template><script>import Modal from './modal'export default{ name:'container', components:{ Modal }, data(){ return { showa:false, showc:false, msg:"我有兩個按鈕，是confirm確認(rèn)彈窗" } }, methods:{ alerts(){ this.showa=true; }, confirms(){ this.showc=true; this.msg="我有兩個按鈕，是confirm確認(rèn)彈窗"; }, okfall(){ this.showa=false; }, okfall2(){ this.msg="點擊了確認(rèn)按鈕，2秒后彈窗關(guān)閉"; setTimeout(()=>{ this.showc=false; },2000); }, cancelfall(){ this.showc=false; } }}</script><style>.aft-box{display:flex;line-height:0.65rem;font-size:0.26rem;color:#333;padding:0.5rem 0;}.aft-flex{flex:1;}.aft-pd{padding:0.5rem 0.1rem;}.aft-btn{display:block;line-height:0.88rem;text-align:Center; color:#fff;border-radius: 0.12rem;background:#FFB63B ;}.aft-blue{background:#488BF1;}</style>這里我們需要先通過import引入modal彈窗組件，再在父組件里面通過components屬性聲明使用此組件。
然后在template模版中通過Modal標(biāo)簽使用彈窗組件；
在彈窗組件上通過type來設(shè)置彈窗的特性；
通過:showstate屬性來標(biāo)識彈窗的打開和關(guān)閉；
通過@took來設(shè)置確定按鈕點擊后的操作；
通過@tocancel來確定取消按鈕點擊后的操作;
在Modal標(biāo)簽中通過內(nèi)容上的slot屬性來標(biāo)識內(nèi)容是標(biāo)題還是顯示內(nèi)容，slot='tlt'中的文字將會作為彈窗標(biāo)題顯示，slot='text'的文字將會作為彈窗的正文顯示；
在這里你也可以通過{{msg}}插值表達(dá)式的形式來把內(nèi)容和父組件的數(shù)據(jù)綁定到一塊；
在script中我們通過data中的兩個變量showa和showb來標(biāo)識彈框的打開和關(guān)閉；
頁面中的按鈕事件中通過設(shè)置showa和showb的值來打開和關(guān)閉彈窗。
vue彈窗組件結(jié)語
這樣一個vue彈窗組件就算完成了，使用簡單靈活，哪里需要引入到里面就可以使用了，而且其中的內(nèi)容和標(biāo)題可以自由設(shè)置，而且vue彈窗組件相對于js彈窗插件來說實現(xiàn)起來更簡單，更清晰。只是我們需要很好的掌握vue提供的特性以及能夠按照vue所在的思想框架進(jìn)行思考。而vue開中的重要思想就是：我們操作數(shù)據(jù)，頁面變化dom操作交給vue來處理。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
