vue3使用teleport实现弹窗效果

目录

1、例子：点击出现弹窗

2、样式

3、弹窗遮罩效果如何实现

---

teleport能够将我们的组件html结构移动到指定位置

1、例子：点击出现弹窗

  <button @click="isShow = true">点击出现弹窗</button>
  <div class="showPart" v-if="isShow">
    <teleport to="body">
      <div class="part">
        <h3>姓名：{{ name }}</h3>
        <h3>性别：{{ sex }}</h3>
        <h3>年龄：{{ age }}</h3>
        <button @click="changeInfo">更改</button>
        <h4>
          {{ person.pName }}
        </h4>
        <h4>
          {{ person.pSex }}
        </h4>
        <h4>
          {{ person.pAge }}
        </h4>
        <button @click="isShow = false">关闭弹窗</button>
      </div>
    </teleport>
  </div>

2、样式

.showPart {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.part {
  width: 500px;
  height: 500px;
  background-color: brown;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3、弹窗遮罩效果如何实现

外层嵌套一层div，给外层div设置样式

.showPart {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
}