vue2 如何实现将dom元素转移到指定节点
背景:在写商城页面时,PC端给的设计图纸是按照宽度1920给的,内部内容区域(main)1191px,写死的指定宽度。然后新出了一个页面,类似于12306的这个页面,图片部分,直接占满了屏幕的100vw,内部div的宽度,超出了外部的,因此想到了vue3新出的teleport,vue2如何实现这个功能
新建一个teleport组件
点击查看代码
<script>
export default {
name: 'teleport',
props: {
/* 移动至哪个标签内,最好使用id */
to: {
type: String,
required: true
}
},
mounted() {
document.querySelector(this.to).appendChild(this.$el)
},
destroyed() {
document.querySelector(this.to).removeChild(this.$el)
},
render() {
return <div>{this.$scopedSlots.default()}</div>
}
}
</script>
点击查看代码
<template>
<div class="logisticsInfo">
<div class="title-box">
<teleport to="#header__center"> <img src="../assets/logisticsInfoImgs/bg-title.png"
alt=""
class="bg-box"></teleport>
</div>
</div>
</template>
<script>
import teleport from './components/teleport.vue'
export default {
name: 'QsMallWebLogisticsInfo',
components: {
teleport,
},
data() {
return {}
},
mounted() {},
methods: {},
}
</script>
<style lang="scss" scoped>
.logisticsInfo {
.title-box {
}
}
</style>
<style lang="scss">
#header__center {
.bg-box {
height: 458px;
width: 100%;
}
}
</style>
点击查看代码
<div id="header__center"></div>
<div class="main">
<router-view ref="mallPage"></router-view>
</div>
本文来自博客园,作者:一尘子!,转载请注明原文链接:https://www.cnblogs.com/mengqc1995/p/16262210.html