vue3利用teleport实现简单的模态框代码

本案例利用VUE3的teleport实现了简单的模态框代码，将模态框生成的代码放在了VUE模块的外面，body的里面，这样z-index更加容易控制。并利用双向绑定实现了点击子组件灰色遮罩，隐藏自己，利用slot插槽实现了自定义模态框的内容。
注意：Vue 3 建议对组件中所有发出的事件 emit 进行记录 emits 。如果你声明了 emits 选项，并且发送的事件没有被 emits 记录，则会收到一个警告：
[Vue warn]: Component emitted event "update:showModel" but it is neither declared in the emits option nor as an "onUpdate:showModel" prop.

模态框组件代码：

<template>
    <teleport to="body">
        <div v-show="showModel">
            <div class="mask" @click="$emit('update:showModel', false)"></div>
            <div class="model">
                <h1>{{title}}</h1>
                <div class="content">
                    <slot></slot>
                </div>
            </div>
        </div>
    </teleport>
</template>

<script>
export default {
    // 这里要保留，否则会报警告
    emits: ['showModel'],
    props:['showModel', 'title'],
}
</script>

<style scoped>
.mask{width: 100%; height: 100%; background-color: rgba(0, 0, 0, .2); position: fixed; top:0; left: 0;}
.model{position: absolute; width: 300px; height: 300px; transform: translate(-50%, -50%); z-index: 2; background: #fff; left: 50%; top:50%;}
.model h1{font-weight: normal; margin: 0; text-align: center; font-size: 18px; padding: 20px 0;}
.model .content{padding:10px 20px 20px; font-size: 14px;}
</style>

父组件调用模态框：

<template>
    <button @click="showModel = true">弹出模态框</button>
    <model v-model:showModel="showModel" :title="modelTitle">model内容</model>
</template>

<script>
import Model from './Model'
export default {
    components:{
        Model
    },
    data(){
        return {
            showModel: false,
            modelTitle: 'model标题'
        }
    },
}
</script>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！