vue2实现传送门效果

描述：在Vue3中<Teleport> 是一个内置组件，使我们可以将一个组件的一部分模板“传送”到该组件的 DOM 层次结构之外的 DOM 节点中；现在在vue2实现一下效果：将组件挂载到body上

先看效果：

代码：

Teleport 组件：


<script>
export default {props: {to: {type: String,required: true},disabled: {type: Boolean,required: true}},inject: ['parent'],//   inject 选项应该是：// 一个字符串数组，或 一个对象，对象的 key 是本地的绑定名，value 是：//     在可用的注入内容中搜索用的 key (字符串或 Symbol)，或//     一个对象，该对象的：//          from property 是在可用的注入内容中搜索用的 key (字符串或 Symbol)//          default property 是降级情况下使用的 value// Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。render() {return <div class="Teleport">{this.$scopedSlots.default()}</div>// $scopedSlots用来访问作用域插槽。对于包括 默认 slot 在内的每一个插槽，该对象都包含一个返回相应 VNode 的函数。},watch: {disabled() {if (!this.disabled) {// this指向组件的实例。$el指向当前组件的DOM元素。document.querySelector(this.to).appendChild(this.$el);} else {this.parent.toSourceDom(this.$el);}}},mounted() {if(!this.disabled) document.querySelector(this.to).appendChild(this.$el)},methods: {},
};
</script>
<style lang="scss" scoped>
.Teleport {width: 100%;height: 100%;
}
</style>

index.vue 中引用 Teleport.vue 组件

<template><div><Teleport v-if="isShow" :disabled="isTeleport" to="body"><div class="cover"><div class="inner">我是弹窗<div class="close" @click="closed">关闭按钮</div></div></div></Teleport><button @click="show">显示</button></div>
</template>
<script>
import Teleport from "./Teleport.vue";
import model from "./model.vue";
export default {data() {return {isShow: false, // 控制 Teleport 组件挂载时机isTeleport: false, // 控制什么时候被传送};},provide() {return {parent: this,};},components: { Teleport, model },methods: {show() {this.isShow = true;},closeModel() {this.isShow = false;},toSourceDom(dom) {document.getElementById("sourceBox").appendChild(dom);},},
};
</script>
<style lang="scss" scoped>
.cover {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba($color: #000000, $alpha: 0.3);.inner {width: 500px;height: 300px;border-radius: 10px;background: #fff;color: red;font-weight: 600;position: absolute;left: 40%;top: 30%;text-align: center;font-size: 30px;.close{position: absolute;bottom: 0;right: 0;background: skyblue;padding: 10px;cursor: pointer;border-radius: 10px 0 0 0;}}
}
</style>

vue2实现传送门效果相关推荐

Unity 之 ShaderGraph 实现旋涡(传送门)效果入门级教程
Unity 之 ShaderGraph 实现旋涡[传送门]效果入门级教程一,最终效果展示二,创建PBRGraph 三,实现原理介绍四,完整效果实现五,应用到场景中若你的工程还没有进行基础配置 ...
Unity中用shader graph制作一个简单的传送门效果
Unity中用shader graph制作一个简单的传送门效果一.配置渲染管线 1.通过菜单"Asset" --> "Create" --> &q ...
Vue2实现放大镜效果
本文实例为大家分享了Vue2实现放大镜效果的具体代码,供大家参考,具体内容如下一,需求描述在使用vue进行项目开发时,需要通过鼠标在一定范围内滑动使项目图片放大以便于查看步骤思路对原图的显示空 ...
用Unity实现传送门效果(一)
知乎专栏:游戏开发入门指南--Unity+ https://zhuanlan.zhihu.com/gdguide 大家好. 接下来的两篇内容,是用Unity来做传送门的效果.这里是用自己的方法来做的, ...
用Unity实现传送门效果
大家好. 接下来的两篇内容,是用Unity来做传送门的效果.这里是用自己的方法来做的,中途踩了许多坑不过最终还是实现了.下面是效果图: 前半段内容几乎没有代码.主要是介绍一下实现的原理. 先不说如何打 ...
Unity3d 传送门效果制作
准备工作:.psd 或者.png 纹理图片1张制作材质球 :shader 选择如下:Particles/Additive 接下来制作传送门的动画(field):修改的重点在于:对材质处理动画, ...
unity 2D游戏实现传送门效果
第一步:首先制作一个传送门的2D的图片(这个是我做的有点简陋大家可以拿去使用) 第二步:给传送门添加一个胶囊碰撞体第三步:添加代码 public class Portal : MonoBehavio ...
【vue】 vue2 实现飘窗效果
文章目录具体效果代码注册使用具体效果飘窗效果代码 Baywindow.vue <template><divid="thed ...
vue2简单实现一个传送门的效果
今天,给大家分享一个有趣的技术,一个叫传送门的小组件实现,我们平时看直播的时候,直播软件上会有贴心的小窗口,今天我带大家就来实现一个传送门. 实现这个传送门我们借助三个插件大家先装好分别为西瓜视频 ...

vue2实现传送门效果

vue2实现传送门效果相关推荐

最新文章

热门文章