vue 3 Teleport

2021-12-26 11:34:49 阅读：173 来源： 互联网

标签：Teleport vue const name timer visible value 组件

我们在做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也可以使用

标签：Teleport,vue,const,name,timer,visible,value,组件
来源： https://www.cnblogs.com/dcyd/p/15732537.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue 3 Teleport