封装dialog弹框全流程，收藏便于寻找！

哎呀，2023年了，回首望去做前端都已经四年了，自从22年被裁以后是工作一直找不到，那该怎么办呢？开摆呗，还能怎么办。后来在家里就闲得无聊，就萌生出来一个想法：“为什么不自己尝试封装一下那些市面上的UI框架呢？”。

不做不知道，谁知道最后还就照葫芦画瓢做出来了，其实最开始脑子里的奇思妙想特别多，我想着：“市面上的弹框好像都没有自定义拖拽的设计，不行我就搞一个独属于自己的UI，这玩意说不定之后就能用到呢。”但是出于某些原因，这个想法被自己摒弃了（实际是自己懒，不想写罢了）。但是，伟大的开源精神告诉我，程序员，咱们就要勇于奉献技术，市面上有，那就当复习，市面上没有呢，就奉献给后面各个奋斗在开发一线的同行们，其实理科出身的我并不会编辑文案，所以废话也不说太多，我直接就把整块代码全部粘上去喽（ps：文件使用Vue3来书写的，如果想要用其他框架来写的话，看着大体思路照葫芦画瓢就行了。）

<template>
    <transition name="wz-dialog">
        <div v-if="props.showMask" class="wz-dialog">
            <div ref="wzDialogMaskRef" @click="openDialog(false)" class="wz-dialog-mask"></div>
            <div ref="wzDialogRef" :style="`width:${props.width}`" class="wz-dialog-box">
                <slot><slot>
            </div>
        </div>
    </transition>
</template>
<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
const props = defineProps({
    showMask: {
        type: Boolean,
        default: false
    },
    width: {
        type: Number,
        default: 200
    }
})
const emits = defineEmits(['update:showMask'])
const wzDialogRef = ref()
const wzDialogMaskRef = ref()
const openDialog = bol => {
    emits('update:showMask', bol)
}
</script>
<style lang="scss" scoped>
.wz-dialog {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;

    .wz-dialog-mask {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #0000004d;
    }

    .wz-dialog-box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
}

.wz-dialog-enter,
.wz-dialog-leave-to {
    opacity: 0;
    top: -20px;
}

.wz-dialog-enter-active,
.wz-dialog-leave-active {
    transition: all 0.5s;
}
<style>

 具体内部的操作实际上是这样的：
1.动画部分我使用的是vue自带的功能来进行实现，实际上就是渐隐渐出加上一个从上到下的这么一个效果。功能很简单，具体看一下就OK了。
2.在props和emit中我接收和导出了一个名叫：“showMask”的值，这个值戴上了采用了双绑的方式，所以直接引入以后不需要特殊照顾这个值我就可以再组件内部来进行弹框的显示和隐藏部分，这会便于我们在实际开发中进行操作弹框也便于我组件内部调用这个变量的值。

3.props中接收到一个名为：“width”的值，这个值的功效实际上只是为了便于控制弹框的固定大小，当然他拥有一个默认值，若未接收到参值的情况下他将默认视为200。

以上其实就是一个简易的dialog，其实这是一个不完美的组件，甚至可以看成是一个失败品，因为实际上“wzDialogMaskRef”的盒子是一个遮罩层，而遮罩层的是否存在的功能并未给在代码中提及，这个功能可能是我忘了，但实现其实也很简单，添加一个双绑数据进行遮罩层是否需要的判断就OK了。

写着写着都七点了，不说了，掏出我两个大洋一大捆的挂面，今天又是满满一大碗。干饭人干饭魂，吃饭还是要积极一点的。那么看完的同学别忘了吃饭哦，后面有其他复现出来的组件说不定还会发表文章，那么我们回头见~

“我于杀戮之中盛放 亦如黎明中的花朵” ---------- 烬