【1】遮罩層：承載內(nèi)容，管理樣式布局。

【2】內(nèi)容層：控制遮罩層的顯示與否。

遮罩層和內(nèi)容區(qū)之間應(yīng)該解耦。遮罩層和內(nèi)容區(qū)之間應(yīng)該解耦。遮罩層和內(nèi)容區(qū)之間應(yīng)該解耦。

遮罩層不依賴于內(nèi)容區(qū)，內(nèi)容是放置在遮罩層里的，至于內(nèi)容區(qū)里的內(nèi)容是什么，遮罩層完全不用在意。因此可以在遮罩層里采用插槽。

遮罩層的實(shí)現(xiàn)

<div v-if='visible'> <slot name='head'></slot> <slot name='body'></slot> <slot name='foot'></slot> </div>

<style scoped lang=’scss’> .common-mask { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba($color: #000000, $alpha: 0.75); display: flex; justify-content: center; align-content: center; z-index: 4; }</style>

內(nèi)容層的實(shí)現(xiàn)

<Vue-Modal :visible='visible'> <div slot='head'>head</div> <div slot='body'>body</div> <div slot='foot'> <button @click='close'>Close</button> </div> </Vue-Modal>

PS:vue組件模態(tài)框?qū)崿F(xiàn)方式

// 組件代碼

<template><div> <div class='dialog-modal'> <!-- 根元素，z-index 需要高于父容器其他元素 --> <div @click='onClose' v-show='isShow'></div> <!-- 加載一個(gè)具有透明度的背景，使根元素透明，子元素會(huì)繼承該透明度 --> <transition name='drop'> <div v-show='isShow'> <!-- 模態(tài)框容器，z-index 需要高于背景 --> <span @click='onClose'>x</span> <slot><p>hello</p> </slot> </div> </transition> </div></div></template><script> export default { props: { isShow:{type: Boolean,default: false } }, methods: { onClose(){this.$emit(’on-close’); } } }</script><style>.drop-enter-active { transition: all .5s;}.drop-leave-active { transition: all .3s;}.drop-enter { transform: translateY(-500px);}.drop-leave-active { transform: translateY(-500px);} .dialog-modal{ position: absolute; z-index: 5; } .dialog-wrapper { position: fixed; height: 100%; width: 100%; z-index: 5; top: 0; left: 0; bottom: 0; right: 0; } .dialog-wrapper{ background-color: #eee; opacity: .9; } .dialog-container{ position: fixed; z-index:80; top: 10%; left: 25%; width: 50%; /* margin: 0 auto; */ background-color: #eee; border-radius: 3px; box-shadow: 0 5px 15px rgba(0,0,0,.5); } span.close-btn{ padding: 0 5px; float: right; cursor: pointer; font-size: 18px; font-weight: bold; }</style>

// 組件使用

//導(dǎo)入模態(tài)對(duì)話框import modal from ’./plugins/dialog’// 在使用組件<modal></modal><modal @on-close='closeThis(’isShowLog’)':is-show=’isShowLog’><login></login></modal>

總結(jié)

到此這篇關(guān)于如何使用vue slot創(chuàng)建一個(gè)模態(tài)框的文章就介紹到這了,更多相關(guān)vue slot創(chuàng)建模態(tài)框內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！