vue自定义简易封装弹框组件

最新推荐文章于 2024-09-03 20:44:01 发布

self_challenge

最新推荐文章于 2024-09-03 20:44:01 发布

阅读量746

点赞数

文章标签： vue.js javascript vue

本文链接：https://blog.csdn.net/self_challenge/article/details/106481904

版权

<template>
    <div class="box">
        <div class="shade" v-show="maskLayer"/>
        <div class="showElementBox" @click.self="closeEvent && closeTier()">
            <div class="showElementTier">
                <slot>内容区域</slot>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            maskLayer:true, // 遮罩层是否显示
            closeEvent: true, // 遮罩层是否点击关闭组件
            parentFact: {} // 父组件实例
        }
    },
    mounted () {
      if (this.$attrs.hide != null) this.maskLayer = false
      if (this.$attrs.closeTier!= null) this.closeEvent = false
      this.parentFact = this.$parent
    },
    methods: {
      closeTier () {
        this.parentFact.popUp = false
      }
    }
}
</script>

组件内部放置一个solt标签可以在外部插入元素自定义结构，另外自定义了两个属性hide、closeTier。在父组件的子标签上添加 hide 可以隐藏遮罩层，默认true。closeTier属性控制点击遮罩层是否关闭关闭弹框，默认 true。
该组件在mounted钩子函数中判断 closeTier 是否存在，存在则将 closeEvent 属性改为 false，达到函数禁用的效果，相反不存在即默认为 true ，通过在mounted 函数中保存父组件的实例，点击相应函数调用父组件实例控制子组件状态的属性并修改，改变弹框状态，并且省略了子传父的回调步骤。

<style scoped>
.box {
    width:100%;
    height:100vh;
    position: absolute;
    top:0;
    left:0;
}
.shade {
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    position: absolute;
}
.showElementBox {
    width:100%;
    height:100%;
    position: absolute;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}
.showElementTier {
    width:55%;
    height:20%;
    background:white;
    border:0.3vw solid rgb(245,245,245);
}
</style>