vue3与vue2自定义弹窗组件

vue2弹窗写法

<template>
  <div class="modal-wrapper" v-if="visible" @click.self="handlerClickBg">
    <div class="default-dialog">
      <h3>宗营镇镇情简介</h3>
    </div>
  </div>
</template>

<script>
export default {
  name: "profileDialog",
  props:{
    visible: {
      default: false,
      type: Boolean
    }
  },
  methods: {
    handlerClickBg(){
      this.$emit('update:visible', false)
    }
  }
}

</script>

<style lang="scss" scoped>
.modal-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100;

  // 默认样式
  .default-dialog {
    position: absolute;
    border-radius: 5px;
    background: #062264;
    color: white;
    padding: 10px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 200px;
    min-height: 100px;
    max-height: calc(100% - 100px);
    width: calc(100% - 200px);
    font-size: 20px;
    text-align: center;
    overflow: auto;

    p {
      text-indent: 2em;
    }
  }
}

/* 过渡动画 */
.dialog-enter-active,
.dialog-leave-active {
  transition: all 0.25s ease;
}
.dialog-enter-from,
.dialog-leave-to {
  opacity: 0;
}
</style>

使用

<!-- 简介弹窗 -->
<profile-dialog :visible.sync="profileVisible" />

vue3写法

<template>
<teleport to="body">
  <transition 
    enter-active-class="animate__animated animate__fadeIn"
    leave-active-class="animate__animated animate__fadeOut">
    <div class="modal-bg" v-show="visible" @click.self="handlerClose" @mousewheel.prevent>
      <div class="modal-content">
        <!-- 头部区域 -->
        <button class="close" @click="handlerClose">关闭</button>
        <div class="modal-title">标题</div>
        <div class="modal-body">
          <!-- 插槽 -->
          <slot></slot>
        </div>
      </div>
    </div>
  </transition>
</teleport>
</template>

<script>
import {defineComponent, ref} from "vue";

export default defineComponent({
  name: 'MapDialog',
  // 定义抛出的事件名称
  emits: ["update:visible"],
  props: ['visible'],
  methods: {
    handlerClose() {
      this.$emit("update:visible",false)
    },
  },
})
</script>

<style lang="less" scoped>

.modal-bg {
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.5);   

  .modal-content  {
    position: absolute;
    width: 25%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color:white;
    border-radius: 6px;
    overflow: hidden;

    .close {
      position: absolute;
      right: 5px;
      top: 5px;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #333333;
      text-align: center;
      cursor: pointer;
      user-select: none;
      background-color: blue;
    }

    .modal-title {
      height:40px;
      line-height: 40px;
      width:100%;
      background-color: #F3F3F3;
    }

    .modal-body {
      min-height: 100px;
    }
  }
}

/* 过渡动画 */
/* .v-enter 
.v-leave-to {
  opacity: 0;
  transform: translateY(100px);
}

.v-enter-active 
.v-leave-active {
  transition: all 13.5s ease;
} */

</style>

父组件中使用组件

<map-dialog 
    :visible="visible" 
    @update:visible="visible = $event">
    <div style="height: 100px;">xxxx</div>
</map-dialog>

Or

<map-dialog 
    v-model:visible="visible" 
    <div style="height: 100px;">xxxx</div>
</map-dialog>

为什么不使用 .sync 修饰符

官网也解释说明了，不再支持.sync ，这时候我们不用.sync修饰符 使用@update:show="shows = event " 添 加 到 dialog 组 件 上 ， 这 时 候 就 可 以 使 用 event"添加到toast组件上，这时候 就可以使用event"添加到toast组件上，这时候就可以使用emit来改变props的值了

小手动起来，拷贝、关注、收藏、点赞 皆可！！！

欢迎有问题留言交流哦~