您的位置：首页 > 编程学习 > > 正文

详解Vue3中Teleport的使用（详解Vue3中Teleport的使用）

更多时间：2022-01-26 01:07:46 类别：编程学习浏览量：760

详解Vue3中Teleport的使用

详解Vue3中Teleport的使用

//VuePortals.vue
<template>
  <li class='portals'>
    <button @click='showNotification'> Trigger Notification! </button>
    <teleport to='#portal-target'>
      <li class='notification'>
        This is rendering outside of this child component!
      </li>
    </teleport>
  </li>
</template>

<script>
import { ref } from 'vue'
export default {
  setup () {
    const isOpen = ref(false)

    var closePopup

    const showNotification = () => {
      isOpen.value = true

      clearTimeout(closePopup)

      closePopup = setTimeout(() => {
        isOpen.value = false
      }, 2000)
    }

    return {
      isOpen,
      showNotification
    }
  }
}
</script>

<style scoped>
  .notification {
    font-family: myriad-pro, sans-serif;
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 300px;
    padding: 30px;
    background-color: #fff;
  }
</style>

在这代码段中，按下按钮时，将渲染通知 2 秒钟。但是我们的主要目标是用 Teleport 获取通知并在 VUE 程序外部渲染。

如你所见，Teleport 有一个必填属性：to

to 属性使用有效的 DOM 查询字符串，它可以是：