媒介
最近在運用element-ui框架，用到了Dialog對話框組件，大抵完成的結果，跟我之前自身在挪動端項目內里弄的一個彈窗組件差不太多。然後就想着把這類彈窗組件的完成體式格局與人人分享一下，下面本文會帶着人人手摸手完成一個彈窗組件。
本文重要內容會涉及到彈窗遮罩的完成，slot插槽的運用體式格局，props、$emit傳參，詳細組件代碼也傳上去了。假如喜好的話能夠點波贊/關注，支撐一下，願望人人看完本文能夠有所收成。
個人博客相識一下：
obkoro1.com
組件末了完成的結果
完成步驟
- 先搭建組件的html和css款式，遮罩層和內容層。
- 定製彈窗內容：彈窗組件經由過程
slot插槽吸收從父組件那邊傳過來彈窗內容。 - 定製彈窗款式：彈窗組件經由過程
props吸收從父組件傳過來的彈窗寬度，上下左右的位置。 - 組件開關：經由過程父組件傳進來的
props掌握組件的顯現與隱蔽，子組件封閉時經由過程事宜$emit觸發父組件轉變值。
1.搭建組件的html和css款式。
html構造：一層遮罩層，一層內容層，內容層內里又有一個頭部title和主體內容和一個封閉按鈕。
下面是組件中的html構造，內里有一些背面才要加進去的東西，假如看不懂的話能夠先跳過，
<template>
<div class="dialog">
<!--外層的遮罩 點擊事宜用來封閉彈窗，isShow掌握彈窗顯現 隱蔽的props-->
<div class="dialog-cover back" v-if="isShow" @click="closeMyself"></div>
<!-- transition 這裡能夠加一些簡樸的動畫結果 -->
<transition name="drop">
<!--style 經由過程props 掌握內容的款式 -->
<div class="dialog-content" :style="{top:topDistance+'%',width:widNum+'%',left:leftSite+'%'}" v-if="isShow">
<div class="dialog_head back">
<!--彈窗頭部 title-->
<slot name="header">提醒信息</slot>
</div>
<div class="dialog_main" :style="{paddingTop:pdt+'px',paddingBottom:pdb+'px'}">
<!--彈窗的內容-->
<slot name="main">彈窗內容</slot>
</div>
<!--彈窗封閉按鈕-->
<div class="foot_close" @click="closeMyself">
<div class="close_img back"></div>
</div>
</div>
</transition>
</div>
</template>
下面是組件中的重要的css款式，內里都做了充足的解釋，重要經由過程z-index和background到達遮罩的結果，詳細內容的css能夠依據自身的需求來設置。
<style lang="scss" scoped>
// 最外層 設置position定位
.dialog {
position: relative;
color: #2e2c2d;
font-size: 16px;
}
// 遮罩 設置背景層，z-index值要足夠大確保能掩蓋，高度 寬度設置滿 做到全屏遮罩
.dialog-cover {
background: rgba(0,0,0, 0.8);
position: fixed;
z-index: 200;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
// 內容層 z-index要比遮罩大，不然會被遮掩，
.dialog-content{
position: fixed;
top: 35%;
// 挪動端運用felx規劃
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 300;
}
</style>
—
2. 經由過程slot定製彈窗內容
這一步，只需理解了slot的作用以及用法，就沒有問題了。
單個插槽：
<slot>這是在沒有slot傳進來的時刻，才顯現的彈窗內容</slot>
上面是單個插槽也叫默許插槽，在父組件中運用插槽的準確姿態：
<my-component>
<!--在my-component內里的一切內容片斷都將插進去到slot地點的DOM位置，並且會替代掉slot標籤-->
<!--這兩個p標籤，將替代全部slot標籤內里的內容-->
<p>這是一些初始內容</p>
<p>這是更多的初始內容</p>
</my-component>
ps:假如子組件內里包括slot插槽，那末上面的p標籤的內容將會被拋棄。
簽字插槽：
所謂的簽字插槽，即為slot標籤賦一個name屬性，簽字插槽能夠父組件中差別的內容片斷放到子組件的差別處所，簽字插槽照樣能夠具有一個默許插槽。下面能夠看一下彈窗組件插槽的運用體式格局：
<div class="dialog_head back ">
<!--彈窗頭部 title-->
<slot name="header">提醒信息</slot>
</div>
<div class="dialog_main " :style="{paddingTop:pdt+'px',paddingBottom:pdb+'px'}">
<!--彈窗的內容-->
<slot name="main">彈窗內容</slot>
</div>
在父組件中的運用體式格局：
- 將彈窗組件引入要運用的組件中，並經由過程
components註冊成為組件。 父組件中彈窗組件插槽的運用要領以下。
<dialogComponent> <div slot="header">插進去到name為header的slot標籤內里</div> <div class="dialog_publish_main" slot="main"> 這裡是內容插進去到子組件的slot的name為main內里，能夠在父組件中增加class定義款式，事宜範例等種種操縱 </div> </dialogComponent>
關於組件中用到的插槽的引見就到這裏了，插槽在彈窗組件中的應用是一個典範的栗子，能夠看到插槽作用相稱壯大，而插槽自身的運用並不難，同學們愛上插槽了沒有？
—
3.經由過程props掌握彈窗顯隱&&定製彈窗style
psops是Vue中父組件向子組件通報數據的一種體式格局，不熟悉的小夥伴們能夠看一下props文檔。
由於彈窗組件都是引到別的組件內里去用的，為了合適差別組件場景中的彈窗，所以彈窗組件必需具有肯定的可定製性，不然如許的組件將毫無意義,下面引見一下props的運用體式格局，以彈窗組件為例：
- 起首須要在被傳入的組件中定義props的一些特徵，考證之類的。
然後在父組件中綁定props數據。
<script> export default { props: { isShow: { //彈窗組件是不是顯現 默許不顯現 type: Boolean, default: false, required:true, //必需 }, //下面這些屬性會綁定到div上面 概況參照上面的html構造 // 如： :style="{top:topDistance+'%',width:widNum+'%'}" widNum:{ //內容寬度 type: Number, default:86.5 }, leftSite:{ // 左定位 type: Number, default:6.5 }, topDistance: { //top上邊距 type: Number, default:35 }, pdt:{ //上padding type: Number, default:22 }, pdb:{ //下padding type: Number, default:47 } }, } </script>
父組件中運用體式格局：
<dialogComponent :is-show="status.isShowPublish" :top-distance="status.topNum">
</dialogComponent>
ps：props通報數據不是雙向綁定的，而是單向數據流，父組件的數據變化時，也會通報到子組件中，這就不測着我們不該該在子組件中修正props。所以我們在封閉彈窗的時刻就須要經由過程$emit來修正父組件的數據，然後數據會自動傳到子組件中。
如今基本上彈窗組件都已完成的差不多了，還差一個彈窗的封閉事宜，這裏就涉及到子組件往父組件傳參了。
4.$emit觸發父組件事宜修正數據，封閉彈窗
Vue中在子組件往父組件傳參，許多都是經由過程$emit來觸發父組件的事宜來修正數據。
在子組件中，在點擊封閉，或許遮罩層的時刻觸發下面這個要領：
methods: {
closeMyself() {
this.$emit("on-close");
//假如須要傳參的話，能夠在"on-close"背面再加參數，然後在父組件的函數里吸收就可以夠了。
}
}
父組件中的寫法：
<dialogComponent :is-show="status.isShowPublish" :top-distance="status.topNum" @on-close="closeDialog">
</dialogComponent>
//"on-close是監聽子組件的時候有無觸發，觸發的時刻實行closeDialog函數
methods:{
closeDialog(){
// this.status.isShowPublish=false;
//把綁定的彈窗數組 設為false即可封閉彈窗
},
}能夠用彈窗組件完成以下這類信息展現，或許事宜交互：
彈窗組件代碼
上面是把彈窗的每一個步驟拆分開來，一步步剖析的，每一步都說的比較清晰了，詳細連起來的話，能夠看看代碼，再連繫文章就可以理的很清晰了。
小結：
這個彈窗組件，完成起來一點都不難，我這裏重如果供應了一個完成體式格局，當項目中有須要的話，人人也能夠自身擼一個出來，以上就是本文的內容了，願望同學們看完能有所收成。
願望看完的朋儕能夠點個喜好，也能夠關注一下我，您的支撐是對我最大的勉勵。
末了：如需轉載，請放上原文鏈接並簽名。碼字不容易，謝謝支撐！本人寫文章本着交換紀錄的心態，寫的不好的地方，不撕逼，然則迎接指導。
以上2018.4.21
