本篇内容主要讲解“vue2怎么实现传送门效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue2怎么实现传送门效果”吧!
先看效果
代码
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怎么实现传送门效果”有了更深的了解，不妨来实际操作一番吧！这里是云搜网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
