您好,登錄后才能下訂單哦!
這篇文章主要講解了vue slot創(chuàng)建一個(gè)模態(tài)框的方法,內(nèi)容清晰明了,對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會(huì)有幫助。
【1】遮罩層:承載內(nèi)容,管理樣式布局。
【2】?jī)?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 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>
內(nèi)容層的實(shí)現(xiàn)
<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組件模態(tài)框?qū)崿F(xiàn)方式
// 組件代碼
<template> <div> <div class="dialog-modal"> <!-- 根元素,z-index 需要高于父容器其他元素 --> <div class="dialog-wrapper" @click="onClose" v-show="isShow"></div> <!-- 加載一個(gè)具有透明度的背景,使根元素透明,子元素會(huì)繼承該透明度 --> <transition name="drop"> <div class="dialog-container" v-show="isShow"> <!-- 模態(tài)框容器,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>
// 組件使用
//導(dǎo)入模態(tài)對(duì)話框 import modal from './plugins/dialog' // 在使用組件 <modal></modal> <modal @on-close="closeThis('isShowLog')":is-show='isShowLog'><login></login></modal>
看完上述內(nèi)容,是不是對(duì)vue slot創(chuàng)建一個(gè)模態(tài)框的方法有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。