溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了vue slot創建一個模態框的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
【1】遮罩層：承載內容，管理樣式布局。
【2】內容層：控制遮罩層的顯示與否。
遮罩層和內容區之間應該解耦。遮罩層和內容區之間應該解耦。遮罩層和內容區之間應該解耦。
遮罩層不依賴于內容區，內容是放置在遮罩層里的，至于內容區里的內容是什么，遮罩層完全不用在意。因此可以在遮罩層里采用插槽。
遮罩層的實現
<div class="common-mask" 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 class="common-btn" @click="close">Close</button> </div> </Vue-Modal>
PS:vue組件模態框實現方式
// 組件代碼
<template>
<div>
<div class="dialog-modal"> <!-- 根元素，z-index 需要高于父容器其他元素 -->
<div class="dialog-wrapper" @click="onClose" v-show="isShow"></div> <!-- 加載一個具有透明度的背景，使根元素透明，子元素會繼承該透明度 -->
<transition name="drop">
<div class="dialog-container" v-show="isShow"> <!-- 模態框容器，z-index 需要高于背景 -->
<span class="close-btn" @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創建一個模態框的方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
