vue3 teleport的使用案例详解

2024-04-02 19:04:59 529人浏览薄情痞子

摘要

官网 https://cli.Vuejs.org/zh/guide/ 有时组件模板的一部分逻辑上属于该组件，而从技术角度来看，最好将模板的这一部分移动到 DOM 中 Vue app

官网

https://cli.Vue js.org/zh/guide/

有时组件模板的一部分逻辑上属于该组件，而从技术角度来看，最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置。

案例

在这里插入图片描述

这两个组件都是在父元素里的，是父组件的子级，但是从技术角度来看，他们是应该是挂载在body下面的

未修改版


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>vue3</title>
  <script src="./vue.js"></script>
</head>
<body>
<div id="hello-vue" class="box">
  <div>我是父组件</div>
  <div>我是父组件</div>
  <div>我是父组件</div>
  <div>我是父组件</div>
  <div>我是父组件</div>
  <div>我是父组件</div>
  <button @click="handleClick">点我显示子组件</button>
  <cpn ref="compRef" @show-confirm="showConfirm"></cpn>
  <confirm ref="confirmRef" @confirm="handleConfirm" @cancel="handleCancel" text="确定退出吗"></confirm>
</div>
<!--点击按钮后显示的那个组件-->
<template id="mycpn">
  <transition name="list-fade">
    <div class="cpnContainer" v-show="isshow" @click.stop="handleClose()">
      <div class="inner-wrapper" @click.stop>
        用到了transition
        <div class="text">
          <div>我是inner-text</div>
          <div>我是inner-text</div>
          <div>我是inner-text</div>
          <div>我是inner-text</div>
          <div>我是inner-text</div>
        </div>
        <div class="close" @click="handleClose()">close</div>
      </div>
    </div>
  </transition>

</template>

<!--确认关闭confirm组件-->
<template id="confirm">
  <transition name="confirm-fade">
    <div v-show="isshow" class="confirm">
      <div class="confirm-wrapper">
        <div class="confirm-content">
          <p>{{text}}</p>
          <div class="btnContainer">
            <button style="background-color: darkseagreen;margin-right: 40px" @click="confirm">{{confirmBtnText}}</button>
            <button @click="cancel">{{cancelBtnText}}</button>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
  const cpn = {
    template: "#mycpn",
    props: {},
    data() {
      return {
        // bbb: 145612
        isshow: false
      }
    },
    methods: {
      show() {
        this.isshow = true
      },
      hide() {
        // console.log("hide")
        this.isshow = false
      },
      handleClose() {
        // console.log("hide")
        this.$emit("show-confirm")
      },

    }
  }

  const confirm = {
    template: "#confirm",
    props: {
      text: {
        type: String,
        default: 'fdsafdasfdas'
      },
      confirmBtnText: {
        type: String,
        default: '确定'
      },
      cancelBtnText: {
        type: String,
        default: '取消'
      }
    },
    data() {
      return {
        // bbb: 145612
        isshow: false
      }
    },
    methods: {
      show() {
        this.isshow = true
      },
      hide() {
        this.isshow = false
        // 控制子组件的显示
      },
      // 点击按钮后向父组件派发事件
      confirm() {
        this.hide();
        this.$emit("confirm")
      },
      cancel() {
        this.hide()
        this.$emit('cancel')
      }
    }
  }
  const HelloVueApp = Vue.createApp({
    data() {
      return {
        message: 'Hello Vue!!'
      }
    },
    components: {
      cpn,
      confirm
    },
    methods: {
      handleClick() {
        // 父组件调用子组件的方法
        // this.$refs.compRef.show()
        this.$refs.compRef.show()
      },
      showConfirm() {
        console.log("fdsa")
        this.$refs.confirmRef.show()
      },
      // 点击取消或确定以后的逻辑
      handleConfirm() {
        this.$refs.compRef.hide()
      },
      handleCancel() {

      }
    }
  }).mount("#hello-vue")

</script>
</body>
<style>
    * {
        font-size: 50px;
    }

    
    .list-fade-enter-active, .list-fade-leave-active {
        transition: opacity .3s;
    }

    .list-fade-enter-active .inner-wrapper, .list-fade-leave-active .inner-wrapper {
        transition: all .3s;
    }

    .list-fade-enter-from, .list-fade-leave-to {
        opacity: 0;
    }

    .list-fade-enter-from .inner-wrapper, .list-fade-leave-to .inner-wrapper {
        transfORM: translate3D(0, 100%, 0);
    }


    
    .cpnContainer {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .3);
    }

    .inner-wrapper {
        padding: 70px;
        background-color: darkcyan;
        position: fixed;
        bottom: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .close {
        position: absolute;
        top: 50px;
        right: 50px;
    }

    
    .confirm {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.14);
    }

    .btnContainer {
        padding: 0 70px;
    }
    .confirm-wrapper{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;
        box-shadow: 0px 0px 80px 3px rgba(0, 0, 0, 0.2);
    }
    .confirm-content{
        overflow: hidden;
        width: 600px;
        border-radius: 13px;
        background: white
    }
    .confirm-content p {
        display: block;
        padding-left: 40px;
    }

    
    
    
    
    
    
    
    
    
    
    

    .confirm-content button {
        border: 1px solid cornflowerblue;
        background-color: transparent;
        padding: 25px 50px;
        margin-bottom: 30px;
        border-radius: 5px;
    }
    .confirm-fade-enter-active ,.confirm-fade-leave-active{
        transition: all .3s;
    }
    .confirm-fade-enter-from ,.confirm-fade-leave-to{
        opacity: 0;
    }
    .confirm-fade-enter-active .confirm-content {
        animation: confirm-zoom-in .3s;
        transform-origin: center;
    }
    .confirm-fade-leave-active .confirm-content {
        animation: confirm-zoom-out .3s;
        transform-origin: center;
    }

    @keyframes confirm-zoom-in {
        0% {

            transform: scale(0);
        }
        60% {
            transform: scale(1.1);
        }
        100% {
            transform: scale(1);
        }
    }
    @keyframes confirm-zoom-out {
        0% {
            transform: scale(1);
        }
        30% {
            transform: scale(0.4);
        }
        100% {
            transform: scale(0);
        }
    }

</style>
</html>

布局

修改版

布局
在这里插入图片描述


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue3</title>
  <script src="./vue.js"></script>
</head>
<body>
<div id="hello-vue" class="box">
  <div>我是父组件</div>
  <div>我是父组件</div>
  <div>我是父组件</div>
  <div>我是父组件</div>
  <div>我是父组件</div>
  <div>我是父组件</div>
  <button @click="handleClick">点我显示子组件</button>
  <cpn ref="compRef" @show-confirm="showConfirm"></cpn>
  <confirm ref="confirmRef" @confirm="handleConfirm" @cancel="handleCancel" text="确定退出吗"></confirm>
</div>
<!--点击按钮后显示的那个组件-->
<template id="mycpn">
  <teleport to="body">
    <transition name="list-fade">
      <div class="cpnContainer" v-show="isshow" @click.stop="handleClose()">
        <div class="inner-wrapper" @click.stop>
          用到了transition
          <div class="text">
            <div>我是inner-text</div>
            <div>我是inner-text</div>
            <div>我是inner-text</div>
            <div>我是inner-text</div>
            <div>我是inner-text</div>
          </div>
          <div class="close" @click="handleClose()">close</div>
        </div>
      </div>
    </transition>
  </teleport>


</template>

<!--确认关闭confirm组件-->
<template id="confirm">
  <teleport to="body">
    <transition name="confirm-fade">
      <div v-show="isshow" class="confirm">
        <div class="confirm-wrapper">
          <div class="confirm-content">
            <p>{{text}}</p>
            <div class="btnContainer">
              <button style="background-color: darkseagreen;margin-right: 40px" @click="confirm">{{confirmBtnText}}</button>
              <button @click="cancel">{{cancelBtnText}}</button>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </teleport>

</template>
<script>
  const cpn = {
    template: "#mycpn",
    props: {},
    data() {
      return {
        // bbb: 145612
        isshow: false
      }
    },
    methods: {
      show() {
        this.isshow = true
      },
      hide() {
        // console.log("hide")
        this.isshow = false
      },
      handleClose() {
        // console.log("hide")
        this.$emit("show-confirm")
      },

    }
  }

  const confirm = {
    template: "#confirm",
    props: {
      text: {
        type: String,
        default: 'fdsafdasfdas'
      },
      confirmBtnText: {
        type: String,
        default: '确定'
      },
      cancelBtnText: {
        type: String,
        default: '取消'
      }
    },
    data() {
      return {
        // bbb: 145612
        isshow: false
      }
    },
    methods: {
      show() {
        this.isshow = true
      },
      hide() {
        this.isshow = false
        // 控制子组件的显示
      },
      // 点击按钮后向父组件派发事件
      confirm() {
        this.hide();
        this.$emit("confirm")
      },
      cancel() {
        this.hide()
        this.$emit('cancel')
      }
    }
  }
  const HelloVueApp = Vue.createApp({
    data() {
      return {
        message: 'Hello Vue!!'
      }
    },
    components: {
      cpn,
      confirm
    },
    methods: {
      handleClick() {
        // 父组件调用子组件的方法
        // this.$refs.compRef.show()
        this.$refs.compRef.show()
      },
      showConfirm() {
        console.log("fdsa")
        this.$refs.confirmRef.show()
      },
      // 点击取消或确定以后的逻辑
      handleConfirm() {
        this.$refs.compRef.hide()
      },
      handleCancel() {

      }
    }
  }).mount("#hello-vue")

</script>
</body>
<style>
    * {
        font-size: 50px;
    }

    
    .list-fade-enter-active, .list-fade-leave-active {
        transition: opacity .3s;
    }

    .list-fade-enter-active .inner-wrapper, .list-fade-leave-active .inner-wrapper {
        transition: all .3s;
    }

    .list-fade-enter-from, .list-fade-leave-to {
        opacity: 0;
    }

    .list-fade-enter-from .inner-wrapper, .list-fade-leave-to .inner-wrapper {
        transform: translate3d(0, 100%, 0);
    }


    
    .cpnContainer {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .3);
    }

    .inner-wrapper {
        padding: 70px;
        background-color: darkcyan;
        position: fixed;
        bottom: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .close {
        position: absolute;
        top: 50px;
        right: 50px;
    }

    
    .confirm {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.14);
    }

    .btnContainer {
        padding: 0 70px;
    }
    .confirm-wrapper{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;
        box-shadow: 0px 0px 80px 3px rgba(0, 0, 0, 0.2);
    }
    .confirm-content{
        overflow: hidden;
        width: 600px;
        border-radius: 13px;
        background: white
    }
    .confirm-content p {
        display: block;
        padding-left: 40px;
    }

    
    
    
    
    
    
    
    
    
    
    

    .confirm-content button {
        border: 1px solid cornflowerblue;
        background-color: transparent;
        padding: 25px 50px;
        margin-bottom: 30px;
        border-radius: 5px;
    }
    .confirm-fade-enter-active ,.confirm-fade-leave-active{
        transition: all .3s;
    }
    .confirm-fade-enter-from ,.confirm-fade-leave-to{
        opacity: 0;
    }
    .confirm-fade-enter-active .confirm-content {
        animation: confirm-zoom-in .3s;
        transform-origin: center;
    }
    .confirm-fade-leave-active .confirm-content {
        animation: confirm-zoom-out .3s;
        transform-origin: center;
    }

    @keyframes confirm-zoom-in {
        0% {

            transform: scale(0);
        }
        60% {
            transform: scale(1.1);
        }
        100% {
            transform: scale(1);
        }
    }
    @keyframes confirm-zoom-out {
        0% {
            transform: scale(1);
        }
        30% {
            transform: scale(0.4);
        }
        100% {
            transform: scale(0);
        }
    }

</style>
</html>

案例用到的知识

父组件如何调用子组件方法用ref拿到组件调用组件里的方法就ok
关于事件阻止冒泡
子组件向父组件通信派发事件（emit）
boxshadow
vue transition动画
疑问 confirm-zoom动画为什么不能放在container上只能放在content上

到此这篇关于vue3 teleport的使用demo的文章就介绍到这了,更多相关vue3 teleport使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue3 teleport的使用案例详解

本文链接: https://www.lsjlt.com/news/156152.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

vue3 teleport的使用案例详解

官网 https://cli.vuejs.org/zh/guide/ 有时组件模板的一部分逻辑上属于该组件，而从技术角度来看，最好将模板的这一部分移动到 DOM 中 Vue app ...

99+

2024-04-02
详解Vue3中Teleport的使用

目录Teleport 的目的 Teleport 是怎样工作的在本文中，我们将介绍： Teleport 的目的 Teleport 的例子一些很有意思的代码...

99+

2024-04-02
Vue3内置组件Teleport使用方法详解

目录1、Teleport用法2、完成模态对话框组件3、组件的渲染前言： Vue 3.0 新增了一个内置组件 teleport ，主要是为了解决以下场景：有时组件模板的一部分逻辑上属...

99+

2024-04-02
Vue3中内置组件Teleport的基本使用与典型案例

目录1. 基本概念1.1 简单理解1.2 典型案例2. 基础使用2.1 传送 DOM 节点2.2 传送组件2.3 禁用传送功能2.4 多个元素传送给一个节点总结1. 基本概念 1.1...

99+

2023-05-18

vue3内置组件 vue3 teleport vue3内置teleport
Vue3中的Teleport功能怎么使用

这篇文章主要介绍“Vue3中的Teleport功能怎么使用”，在日常操作中，相信很多人在Vue3中的Teleport功能怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue3中的Teleport功能怎...

99+

2023-07-02
Vue3之Teleport组件怎么使用

Teleport 组件解决的问题版本：3.2.31如果要实现一个 “蒙层” 的功能，并且该 “蒙层” 可以遮挡页面上的所有元素，通常情况下我们会选择直接在标签下渲染 “蒙层” 内容。如果在Vue.js 2 中实现这个功能，只能通过原生 D...

99+

2023-05-14

Vue3 teleport
Vue3之Teleport组件如何使用

这篇文章主要介绍了Vue3之Teleport组件如何使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue3之Teleport组件如何使用文章都会有所收获，下面我们一起来看看吧。Teleport 组件解决的问...

99+

2023-07-06
vue3 使用defineExpose的实例详解

目录例子可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性： <...

99+

2023-03-19

vue3 使用defineExpose vue3 defineExpose
Vue3中teleport新特性的示例分析

Vue3中teleport新特性的示例分析，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。Vue鼓励我们通过将UI和相关行为封装到组件中来构...

99+

2024-04-02
vue3中使用@vueuse/core中的图片懒加载案例详解

点击进入vueuse官网 1、首先安装 npm i @vueuse/core 2、新建一个helloworld.js文件,内容如下： import { useIntersectio...

99+

2023-03-19

vue3图片懒加载 vue3 @vueuse/core
SpringCloudFeign的使用案例详解

目录Feign简介使用传参拓展配置超时、连接时间日志打印Feign简介 Feign是Netflix开发的⼀个轻量级RESTful的HTTP服务客户端（⽤它来发起请求，远程调⽤的），是...

99+

2023-02-09

Spring Cloud Feign使用 Spring Cloud Feign
Vue3跨域解决方案实例详解

vue项目配置代理 vue.config.js const { defineConfig } = require('@vue/cli-service') module.exports...

99+

2023-01-28

Vue3跨域解决方案 Vue3跨域 Vue跨域 vue项目配置代理
CrashRpt使用案例详解

CrashRpt介绍及简单应用 1、简介 CrashRpt是一个开源的第三方包，在程序出现未处理异常时，能够收集错误信息，并生成程序错误报告。CrashRpt可以将报告按照指定的方式...

99+

2024-04-02
MySql escape的使用案例详解

MySQL转义转义即表示转义字符原来的语义，一个转义字符的目的是开始一个字符序列，使得转义字符开头的该字符序列具有不同于该字符序列单独出现时的语义。在sql like语句中，比如...

99+

2024-04-02
Vue使用Swiper的案例详解

Vue使用Swiper看这一篇就够了此案例实现需求完成swiper动态异步数据下的slide渲染自定义分页器样式解决loop:true设置时的事件丢失问题swiper鼠标移入/移...

99+

2024-04-02
Vue中使用Teleport的方法示例

目录正文Teleport 在 Vue 中的使用禁用 Teleport 标签正文通常，当我们在 Vue 中创建组件时，它们出现在我们期望的 DOM 结构中。但是，有时我们并不希望如此...

99+

2022-11-13

Vue使用Teleport Vue Teleport
C# log4net使用案例详解

这边先介绍简单的使用：在控制台输出和写入文件首先添加log4net的nuget包然后在app.config中添加配置项==configSections只能有一个，且是config...

99+

2024-04-02
Android LayoutParams使用案例详解

LayoutParams是什么？ LayoutParams主要保存了一个View的布局参数，因此可以使用LayoutParams来改变布局参数从而达到View位置的效果，一般在自定义...

99+

2024-04-02
C# AttributeUsage使用案例详解

C# AttributeUsage的使用是如何的呢？首先让我们来了解一下什么是AttributeUsage类它是另外一个预定义特性类，AttributeUsage类的作用就是帮助我们...

99+

2024-04-02
Android GridLayout使用案例详解

目录一、简介二、常用属性介绍三、平分问题四、小米计算器效果五、动态加载一、简介 GridLayout是Android4.0引入的网格布局，使用它可以减少布局嵌套。也算是常用，但一直没...

99+

2024-04-02