vue3使用transition封装弹窗组件

components/popUp

<template>
    <div class="pop">
        <transition name="fadeBg">
            <div class="pop-bg" v-if="isShow" @click="closePop"></div>
        </transition>
        <transition name="fadeUp">
            <div class="pop-up" v-if="isShow">
                <slot />
            </div>
        </transition>
    </div>
</template>
<script>
    import {
        watchEffect
    } from "vue";
    export default {
        props: {
            isShow: {
                type: Boolean,
                default: false,
            },
        },
        setup(props, context) {
            // 可监听父组件的变化
            watchEffect(() => {
                console.log(props.isShow)
            })
            const methods = {
                closePop() {
                    context.emit('update:isShow', false)
                }
            }
            return {
                ...methods,
            }
        },
    }
</script>

<style src="./popUp.less" lang="less" scoped>
</style>

.pop {
    &-bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 1;
    }

    &-up {
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        height: 100%;
        background: #fff;
        z-index: 5;
    }
}

.fadeUp-enter-active,
.fadeUp-leave-active {
    transition: transform 0.3s ease-in-out;
}

.fadeUp-enter-from,
.fadeUp-leave-to {
    transform: translateX(100%);
}

.fadeBg-enter-active,
.fadeBg-leave-active {
    transition: opacity 0.3s ease-in-out;
}

.fadeBg-enter-from,
.fadeBg-leave-to {
    opacity: 0;
}

vue文件引入

<template>
  <div class="box">
    <button @click="popShow()">打开子组件弹窗</button>
    <popUp v-model:isShow="isShow">弹窗内容</popUp>
  </div>
</template>

<script>
  import {
    reactive,
    toRefs
  } from "vue";
  import popUp from "../../components/popUp/popUp"
  export default {
    components: {
      popUp
    },
    setup() {
      const that = reactive({
        isShow: false
      })
      const methods = {
        popShow() {
          that.isShow = true
        }
      }
      return {
        ...toRefs(that),
        ...methods
      };
    },
  };
</script>