Vue3内置组件Teleport

Posted 2022-07-13 面条请不要欺负汉堡

一.Teleport的介绍

Teleport是Vue 3.0 新增的一个内置组件，主要是为了解决一些特殊场景下模态对话框组件、组件的渲染。

Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术。

如果我们嵌套在 Vue app 内的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难。使用 Teleport 就可以方便的解决组件间 css 层级问题。

二.Teleport用法

用法非常简单，只需要使用 to 这个属性就可以把组件渲染到想要的位置

// 渲染到body标签下

<teleport to="body">

  <div class="modal">

    I'm a teleported modal!

  </div>

</teleport>

也可以使用

<teleport to="#some-id" />

<teleport to=".some-class" />

<teleport to="[data-teleport]" />

必须是有效的查询选择器或 htmlElement。

三.场景使用

在一些场景中，比如使用modal时，我们想要将modal放在具体的vue页面中，功能与位置保持一致。但是在展示时，又希望直接将它放在body下，方便实现定位样式。面对功能位置与样式位置的不统一，vue3中提供一对<teleport ></teleport>标签用于移动dom的位置到指定元素。

下面情况是没加teleport的时候

 teleport to="body"的情况

代码如下：

<template>
	<div class="home">
		<h3>Tooltips with Vue 3 Teleport 是父页面</h3>
		<button @click="openDialog">打开弹窗 </button>
		<modal :title="title" :isShow="isShow" @close="openDialog">
            这是一段内容!!!
        </modal>
	</div>
</template>

<script>
import ref from 'vue'
import modal from './modal.vue'
export default 
	components: 
        modal
	,
	setup()
        let title = ref('模态框');
        let isShow= ref(false);
        const openDialog = (res)=>
            isShow.value = typeof res=='boolean'? false:true;
        
        return 
            title,
            isShow,
            openDialog
        
    
;
</script>

子组件moadl
<template>
  <teleport to="body">
    <transition name="dialog-fade">
      <div class="dialog-wrapper" v-show="isShow">
        <div class="dialog">
          <div class="dialog-header">
            <slot name="title">
              <span class="dialog-title">
                 title 
              </span>
            </slot>
          </div>
          <div class="dialog-body">
            <slot></slot>
          </div>
          <div class="dialog-footer">
            <slot name="footer">
              <button @click="onClose">关闭</button>
            </slot>
          </div>
        </div>
      </div>
    </transition>
  </teleport>
</template>
 
<script>
export default 
    props:
        title:
            type:String,
            default:''
        ,
        isShow:
            type:Boolean,
            default:false
        
    ,
    emits:['close'],
	setup(props,ctx)
        const onClose = () => 
            ctx.emit('close',!props.isShow);
        ;
        return 
            onClose
        
    
;

</script>
<style scoped>
.dialog-wrapper 
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    background-color: #00000080;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  
  .dialog-wrapper>.dialog 
    width: 40%;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: #0000004d 0 1px 3px;
    color: #303133;

.dialog>.dialog-header 
    font-size: 18px;
    line-height: 1.4;
    padding: 20px 20px 10px;

.dialog>.dialog-body 
    line-height: 1.4;
    padding: 30px 20px;

.dialog>.dialog-footer 
    line-height: 1.4;
    padding: 20px 20px 10px;
    display: flex;
    justify-content: flex-end;

</style>