vue3—Teleport 传送门功能

佛门与网络 · 发表于 2023-1-4 19:57:33

我们设想这样一个场景，在编写vue工程化代码时，如果想将一个全局遮罩挂载到body下，也就是body是遮罩的父级，可往往不尽如意，因层层嵌套，导致没法实现这一功能。再一个布局的问题，比如页面统统使用定位进行布局，那不将遮罩直接放到 body 下会很麻烦
而解决这一问题，vue也提供了方案，那就是：传送门！！！名字很高大上，其实就是直接将组件的 DOM 内容挂载到指定的位置
dom元素：

<div id="root"></div>

复制代码

vue 代码示例：

const app = Vue.createApp({
data() {
return {
show: false,
}
},
methods:{
handleBenClick() {
this.show = !this.show;
}
},
template: `
<div class="area">
<button @click="handleBenClick">按钮</button>
<teleport to="body">
<div class="mask" v-show="show"></div>
</teleport>
</div>
`
})
app.directive('pos', (el, binding)=>{
el.style[binding.arg] = binding.value+'px';
})
const vm = app.mount('#root');

复制代码

[前端] vue3—Teleport 传送门功能