【1】遮罩層：承載內容，管理樣式布局。

【2】內容層：控制遮罩層的顯示與否。

遮罩層和內容區之間應該解耦。遮罩層和內容區之間應該解耦。遮罩層和內容區之間應該解耦。

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

遮罩層的實現

<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>

內容層的實現

<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組件模態框實現方式

// 組件代碼

<template><div> <div class='dialog-modal'> <!-- 根元素，z-index 需要高于父容器其他元素 --> <div @click='onClose' v-show='isShow'></div> <!-- 加載一個具有透明度的背景，使根元素透明，子元素會繼承該透明度 --> <transition name='drop'> <div v-show='isShow'> <!-- 模態框容器，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>

// 組件使用

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

總結

到此這篇關于如何使用vue slot創建一個模態框的文章就介紹到這了,更多相關vue slot創建模態框內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！