Vue3 -- 新组件【谁学谁真香系列6】

Teleport

Teleport是什么?–Teleport是一种能够将我们的组件html结构移动到指定位置的技术。
父组件:

<template><div calss="outer"><h2>我是App组件</h2><img src="https://z1.ax1x.com/2023/11/19/piNxLo4.jpg" alt=""><br><Modal /></div>
</template><script lang="ts" setup name="App">
import { ref } from "vue"
import Modal from "./Modal.vue";</script><style lang="less">
.outer {background-color: #ddd;border-radius: 10px;padding: 10px;width: 400px;height: 400px;// 滤镜 saturate--饱和度filter:saturate(200%)
}img {width: 270px;
}button {margin: 3px 5px;
}
</style>

注意看父组件中.outer的 filter:saturate(200%),这个样式会让子组件中的fixed定位基于自己的父组件,而不是按照我们的预期根据整个视口定位。
这时候我们就需要在子组件中使用Teleport了,将我们需要按照整个视口定位的内容用<teleport to=""> </teleport> 包裹起来就可以实现预期。

<!-- 这里的to里面可以写选择器字符串,例如'#app''.demo''body' --><teleport to="body"><div class="modal" v-show="isShow"><h2>我是弹窗的标题</h2><p>我是弹窗的内容</p><button @click="isShow = false">关闭弹窗</button></div></teleport>

整个子组件代码:

<template><button @click="isShow = true">展示弹窗</button><!-- 这里的to里面可以写选择器字符串,例如'#app''.demo''body' --><teleport to="body"><div class="modal" v-show

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/58895.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

go语言中的接口含义和用法详解

在Go语言中&#xff0c;接口&#xff08;interface&#xff09;是一种抽象类型&#xff0c;它定义了一组方法签名而不实现具体的方法。接口在Go语言中起到了类似于其他语言中“面向接口编程”的作用&#xff0c;是实现多态和解耦的重要工具。以下是Go中接口的含义及其用法的详细…

【ShuQiHere】️`adb kill-server` 和 `adb start-server` 命令的作用

&#x1f4df;&#x1f527; 【ShuQiHere】️ &#x1f527;&#x1f4df; 在使用 scrcpy 或其他依赖于 ADB&#xff08;Android Debug Bridge&#xff09; 的工具时&#xff0c;您可能会遇到需要重启 ADB 服务器的情况。今天&#xff0c;我们将详细解释两个常用的 ADB 命令&a…

linux之文件(上)

linux之文件&#xff08;上&#xff09; 一.文件的预备知识二.C语言的文件接口和linux的系统接口2.1fopen2.2fclose2.3open2.4close2.5write2.6read 三.文件与系统3.1文件描述符3.2 标准输入&#xff0c;标准输出和标准错误3.3fd的分配规则 四.重定向4.1重定向的概念4.2重定向的…

CSS的配色

目录 1 十六进制2 CSS中的十六进制2.1 十六进制颜色的基本结构2.2 十六进制颜色的范围2.3 简写形式2.4 透明度 3 CSS的命名颜色4 配色4.1 色轮4.2 互补色4.3 类似色4.4 配色工具 日常在开发小程序中&#xff0c;客户总是希望你的配色是美的&#xff0c;但是美如何定义&#xff…

YOLOv11融合[ECCV2024]自调制特征聚合SMFA模块及相关改进思路|YOLO改进最简教程

YOLOv11v10v8使用教程&#xff1a; YOLOv11入门到入土使用教程 YOLOv11改进汇总贴&#xff1a;YOLOv11及自研模型更新汇总 《SMFANet: A Lightweight Self-Modulation Feature Aggregation Network for Efficient Image Super-Resolution》 一、 模块介绍 论文链接&#xff1…

数据库SQLite的使用

SQLite是一个C语言库&#xff0c;实现了一个小型、快速、独立、高可靠性、功能齐全的SQL数据库引擎。SQLite文件格式稳定、跨平台且向后兼容。SQLite源代码属于公共领域(public-domain)&#xff0c;任何人都可以免费将其用于任何目的。源码地址&#xff1a;https://github.com/…

【大模型】Spring AI Alibaba 对接百炼平台大模型使用详解

目录 一、前言 二、Spring AI概述 2.1 spring ai是什么 2.2 Spring AI 核心能力 2.3 Spring AI 应用场景 三、Spring AI Alibaba 介绍 3.1 Spring AI Alibaba 是什么 3.2 Spring AI Alibaba 核心特点 3.3 Spring AI Alibaba 应用场景 四、SpringBoot 对接Spring AI Al…

Java:HTTP/HTTPS

HTTP HTTP(全称"超文本传输协议")是一种应用最广泛的应用层协议; 文本=>字符串 超文本:可以传输文本,图片,语言等等其他的各种数据... HTTP各种应用场景: 1.使用浏览器打开网页; 2.打开手机APP; 3.后端程序,都是"分布式/微服务"体系结构; HTTPS可…

android studio 把unversioned文件加入git

在Android Studio中把未版本化的文件纳入Git版本控制&#xff0c;你可以按照以下步骤操作&#xff1a; 打开Android Studio。 打开你的项目。 在项目视图中&#xff0c;右键点击你想要添加的未版本化的文件或文件夹。 在上下文菜单中选择"Add to VCS" -> "…

【Promise】JS 异步之宏队列与微队列

文章目录 1 原理图2 说明3 相关面试题3.1 面试题13.2 面试题23.3 面试题33.4 面试题4 1 原理图 2 说明 JS 中用来存储待执行回调函数的队列包含 2 个不同特定的队列&#xff1a;宏队列和微队列。宏队列&#xff1a;用来保存待执行的宏任务(回调)&#xff0c;比如&#xff1a;定…

递推经典例题 - 爬楼梯

一、题目阅读 题目描述 一段楼梯有n级台阶。你每次可以跨一个、两个或者三个台阶。 请问走上n级台阶有几种方案&#xff1f;答案对998244353取模。 输入格式 一行一个数n。 输出格式 一行一个数&#xff0c;表示方案数。 样例 Input 1 3 Output 1 4 样例解释 1 1 1 3 1 2 …

用 Python 从零开始创建神经网络(二):第一个神经元的进阶

第一个神经元的进阶 引言1. Tensors, Arrays and Vectors&#xff1a;2. Dot Product and Vector Additiona. Dot Product &#xff08;点积&#xff09;b. Vector Addition &#xff08;向量加法&#xff09; 3. A Single Neuron with NumPy4. A Layer of Neurons with NumPy5…

【优选算法 — 滑动窗口】最大连续1的个数 将 x 减到0的最小操作数

最大连续1的个数 最大连续1的个数 题目描述 题目解析 给我们一个元素全是0或者1的数组&#xff0c;和一个整数 k &#xff0c;然后让我们在数组选出最多的 k 个0&#xff1b;这里翻转最多 k 个0的意思&#xff0c;是翻转 0 的个数< k&#xff0c;而不是一定要翻转 k …

各种排序分组

简易排序方法如下: public static void XX(){var circles Z.db.SelectEntities<Circle>();circles circles.OrderByDescending(x > x.Center.Y).ThenBy(x > x.Center.X).ToList();for (int i 0; i < circles.Count; i){DBText text new DBText() { Positi…

svgicon大小问题(简单记录

Prob.: reactts下用类似import XxxIcon from "../icons/xxx.svg语句之后使用< XxxICon >标签&#xff0c;不能直接用style指定大小 &#xff08;viewbox好像是有效的&#xff0c;height和width类似只改了画布大小&#xff0c;没缩放里面的path&#xff09; 过程: 前…

RK3288 android7.1 适配 ilitek i2c接口TP

一&#xff0c;Ilitek 触摸屏简介 Ilitek 提供多种型号的触控屏控制器&#xff0c;如 ILI6480、ILI9341 等&#xff0c;采用 I2C 接口。 这些控制器能够支持多点触控&#xff0c;并具有优秀的灵敏度和响应速度。 Ilitek 的触摸屏控制器监测屏幕上的触摸事件。 当触摸发生时&am…

DICOM图像知识:DICOM图像排序与坐标系解析

目录 引言 1. 概述 2. DICOM图像排序规则 2.1 Patient的Study按Study Date排序 2.2 Study的Series按Series Number排序 2.3 Series的SOP按Instance Number或Slice Location排序 2.3.1 Instance Number排序 2.3.2 Slice Location排序 2.3.3 使用Image Position (Patien…

Vector和ArrayList

Vector和ArrayList都是Java集合框架中的一部分&#xff0c;它们提供了动态数组的功能&#xff0c;但在实现和使用场景上存在一些差异。以下是对Vector和ArrayList的详细比较&#xff1a; 一、线程安全性 Vector&#xff1a; 是线程安全的。Vector类的所有方法都使用了synchron…

css多列布局用法

文章目录 CSS多列布局详解与代码案例一、CSS多列布局介绍特点 二、CSS多列布局的用法1. 列数和宽度控制2. 列间距和规则3. 跨列和分列内容4. 列宽度自动调整5. 垂直对齐 三、CSS多列布局的代码案例示例一&#xff1a;基础多列布局示例二&#xff1a;响应式多列布局 CSS多列布局…

Js — 定时器

有两种&#xff1a;setInterval 和 setTimeout 间隔时间单位为毫秒 setInterval 每隔指定的毫秒数重复执行一个函数或代码 开启定时器&#xff1a;setInterval(函数&#xff0c;间隔时间) 作用&#xff1a;每隔一段时间调用这个函数 注意&#xff1a;它不是立即执行&#x…