vue 3 Teleport

我们在做vue2项目的时候，往往弹窗设置都挺负责的需要各种z-indx，而vue3推荐的做法是使用Teleport

<!--    index.html--> 
 <body>
    <div id="app"></div>
    <div id="teleport-target"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>

在组件内

<template>
  <p>我是设置页面a</p>
  <button @click="showToast" class="btn">打开 toast</button>
  <!-- to 属性就是目标位置 -->
  <teleport to="#teleport-target">
    <div v-if="visible" class="toast-wrap">
      <div class="toast-msg">我是一个 Toast 文案</div>
    </div>
  </teleport>
</template>

<script setup lang="ts">
  import { getCurrentInstance, inject, watch, ref } from 'vue'; // 子组件
  const instance = getCurrentInstance()
  const _this = instance.appContext.config.globalProperties // 获取全局对象\
  const name = inject('name')
  watch(name, (newValue, oldValue) => {
    console.log(name.value)
  })
  // toast 的封装
  const visible = ref(false);
  let timer;
  const showToast = () => {
    visible.value = true;
    // clearTimeout(timer);
    // timer = setTimeout(() => {
    //   visible.value = false;
    // }, 2000);
  }
</script>

<style>

</style>

然后引入这个组件，设置一下样式就好了，父组件传递的props也可以使用

posted @ 2021-12-26 11:26  王小美丶  阅读(186)  评论(0)  编辑  收藏  举报