脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3 Teleport瞬间移动函数

vue3 Teleport瞬间移动函数使用方法详解

 更新时间：2021年03月05日 07:57:06   作者：柏特-Better  
这篇文章主要为大家详细介绍了vue3 Teleport瞬间移动函数使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

vue3 Teleport瞬间移动函数的使用，供大家参考，具体内容如下

Teleport一般被翻译成瞬间移动组件,实际上是不好理解的.我把他理解成"独立组件"

他可以那你写的组件挂载到任何你想挂载的DOM上,所以是很自由很独立的

以一个例子来看:编写一个弹窗组件

<template>
<teleport to="#modal">
 <div id="center" v-if="isOpen">
 <h2><slot>this is a modal</slot></h2>
 <button @click="buttonClick">Close</button>
 </div>
</teleport>
</template>
<script lang="ts">

export default {
 props: {
 isOpen: Boolean,
 },
 emits: {
 'close-modal': null
 },
 setup(props, context) {
 const buttonClick = () => {
 context.emit('close-modal')
 }
 return {
 buttonClick
 }
 }
}
</script>
<style>
 #center {
 width: 200px;
 height: 200px;
 border: 2px solid black;
 background: white;
 position: fixed;
 left: 50%;
 top: 50%;
 margin-left: -100px;
 margin-top: -100px;
 }
</style>

在app.vue中使用的时候跟普通组件调用是一样的

<template>
<div id="app">
 <img alt="Vue logo" src="./assets/logo.png">
 <HelloWorld msg="Welcome to Your Vue.js App"/>
 <HooksDemo></HooksDemo>
 <button @click="openModal">Open Modal</button><br/>
<modal :isOpen="modalIsOpen" @close-modal="onModalClose"> My Modal !!!!</modal>
</div>
 
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import HooksDemo from './components/HooksDemo.vue'
import Modal from './components/Modal.vue'
import{ref} from 'vue'
export default {
 name: 'App',
 components: {
 HelloWorld,
 HooksDemo,
 Modal
 },
 setup() {
 const modalIsOpen = ref(false)
 const openModal = () => {
 modalIsOpen.value = true
 }
 const onModalClose = () => {
 modalIsOpen.value = false
 }
 return {
 modalIsOpen,
 openModal,
 onModalClose
 }
 }
}
</script>

<style>
#app {
 font-family: Avenir, Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

要是在app.vue文件中使用的时候,modal是在app的 DOM节点之下的,父节点的dom结构和css都会给modal产生影响
于是产生的问题

1.modal被包裹在其它组件之中，容易被干扰
2.样式也在其它组件中，容易变得非常混乱

Teleport 可以把modal组件渲染到任意你想渲染的外部Dom上,不必嵌套在#app中,这样就可以互不干扰了,可以把Teleport看成一个传送门,把你的组件传送到任何地方
使用的时候 to属性可以确定想要挂载的DOM节点下面

<template>
 <teleport to="#modal">
 <div id="center">
 <h2>柏特better</h2>
 </div>
 </teleport>
</template>

在public文件夹下的index.html中增加一个节点

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <link rel="icon" href="<%= BASE_URL %>favicon.ico" >
 <title><%= htmlWebpackPlugin.options.title %></title>
 </head>
 <body>
 <noscript>
 <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 </noscript>
 <div id="app"></div>
 <div id="modal"></div>
 <!-- built files will be auto injected -->
 </body>
</html>

这样可以看到modal组件就是没有挂载在app下,不再受app组件的影响了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue自定义指令directive的使用方法

    vue自定义指令directive的使用方法

    这篇文章主要介绍了vue自定义指令directive的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue使用websocket概念及示例

    vue使用websocket概念及示例

    这篇文章主要为大家介绍了vue使用websocket概念及示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • vue3使用base64加密的两种方法举例

    vue3使用base64加密的两种方法举例

    这篇文章主要给大家介绍了关于vue3使用base64加密的两种方法,我们在vue项目中有时会使用到Base6464转码,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • element表格去掉表头的实现方法

    element表格去掉表头的实现方法

    本文主要介绍了element表格去掉表头的实现方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • vue中mint-ui环境搭建详细介绍

    vue中mint-ui环境搭建详细介绍

    这篇文章主要介绍了vue中mint-ui环境搭建详细介绍的相关资料,需要的朋友可以参考下
    2017-04-04
  • Vue如何接入hls/m3u8的直播视频详解

    Vue如何接入hls/m3u8的直播视频详解

    项目中有一个需求,需要实现直播功能,后端接口返回的是m3u8数据流,下面这篇文章主要给大家介绍了关于Vue如何接入hls/m3u8直播视频的相关资料,需要的朋友可以参考下
    2022-07-07
  • 一键将Word文档转成Vue组件mammoth的应用详解

    一键将Word文档转成Vue组件mammoth的应用详解

    这篇文章主要为大家介绍了一键将Word文档转成Vue组件mammoth的应用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-02-02
  • vue3如何实现​6位支付密码输入框

    vue3如何实现​6位支付密码输入框

    微信、支付宝支付密码时的密码输入框大家都很熟悉，本文主要介绍了vue3如何实现​6位支付密码输入框，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vue Render中slots的使用的实例代码

    vue Render中slots的使用的实例代码

    本篇文章主要介绍了vue Render中slots的使用的实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-07-07
  • Vuex如何获取getter对象中的值(包括module中的getter)

    Vuex如何获取getter对象中的值(包括module中的getter)

    这篇文章主要介绍了Vuex如何获取getter对象中的值(包括module中的getter)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08

最新评论