vue彈窗組件的樣子
我們先看一下，我們要實現出來的彈窗組件長什么樣子：
吶，我們要用vue組件實現的彈窗就是這個樣子，跟我們用js插件實現的效果一樣，下面我們開始講述怎么實現一個通用的vue彈窗組件。
實現vue彈窗組件需要的知識
是vue組件，當然最基礎的是vue的知識，我假設大家是有一定vue功底的，然后你還需要了解：
1、vue的事件系統，vue組件間的單項數據流，props從父組件向子組件傳遞數據，子組件通過事件emit向父組件傳遞事件，父組件通過on監聽子組件的事件來處理具體事務。
2、具名插槽slot，通過name屬性來接收不同的父組件傳遞過來的內容，具名插槽接收兩個數據，一是彈窗的標題，二是彈窗的顯示內容。
vue彈窗組件的實現代碼
vue彈窗的具體實現代碼采用單頁面組件的形式寫的，具體代碼如下：
<template>
<div class='md-cont' v-show='showstate'>
<div class='md-wrapper' >
<div class='md-title'>
<slot name='tlt' >
標題
</slot>
</div>
<div class='md-text'>
<slot name='text' >
這里是彈框內容
</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；兩個按鈕觸發兩個事件，這兩個事件通過$emit上傳到父組件。根據父組件傳遞過來的type屬性來決定是否顯示取消按鈕。
對于具名插槽和$emit事件系統不理解的可以去vue官網查看，這里不多做贅述了。
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'>確認</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確認彈窗"
}
},
methods:{
alerts(){
this.showa=true;
},
confirms(){
this.showc=true;
this.msg="我有兩個按鈕，是confirm確認彈窗";
},
okfall(){
this.showa=false;
},
okfall2(){
this.msg="點擊了確認按鈕，2秒后彈窗關閉";
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標簽使用彈窗組件；
在彈窗組件上通過type來設置彈窗的特性；
通過:showstate屬性來標識彈窗的打開和關閉；
通過@took來設置確定按鈕點擊后的操作；
通過@tocancel來確定取消按鈕點擊后的操作;
在Modal標簽中通過內容上的slot屬性來標識內容是標題還是顯示內容，slot='tlt'中的文字將會作為彈窗標題顯示，slot='text'的文字將會作為彈窗的正文顯示；
在這里你也可以通過{{msg}}插值表達式的形式來把內容和父組件的數據綁定到一塊；
在script中我們通過data中的兩個變量showa和showb來標識彈框的打開和關閉；
頁面中的按鈕事件中通過設置showa和showb的值來打開和關閉彈窗。
vue彈窗組件結語
這樣一個vue彈窗組件就算完成了，使用簡單靈活，哪里需要引入到里面就可以使用了，而且其中的內容和標題可以自由設置，而且vue彈窗組件相對于js彈窗插件來說實現起來更簡單，更清晰。只是我們需要很好的掌握vue提供的特性以及能夠按照vue所在的思想框架進行思考。而vue開中的重要思想就是：我們操作數據，頁面變化dom操作交給vue來處理。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
