快捷導(dǎo)航

Vue3內(nèi)置組件Teleport使用方法詳解

更新時(shí)間：2021年10月23日 10:01:10 作者：hezhongfeng

這篇文章主要介紹了Vue3內(nèi)置組件Teleport使用方法，Teleport是Vue 3.0 新增的一個(gè)內(nèi)置組件，主要是為了解決一些特殊場(chǎng)景下模態(tài)對(duì)話(huà)框組件、組件的渲染，帶著些許的了解一起走進(jìn)下面文章的詳細(xì)內(nèi)容吧

1、Teleport用法

用法非常簡(jiǎn)單，只需要使用 to 這個(gè)屬性就可以把組件渲染到想要的位置

// 渲染到body標(biāo)簽下
<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]" />

必須是有效的查詢(xún)選擇器或 HTMLElement

進(jìn)一步

2、完成模態(tài)對(duì)話(huà)框組件

現(xiàn)在我們來(lái)封裝一個(gè)標(biāo)準(zhǔn)的模態(tài)對(duì)話(huà)框

<template>
  <teleport to="body">
    <transition name="dialog-fade">
      <div class="dialog-wrapper" v-show="visible">
        <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">關(guān)閉</button>
            </slot>
          </div>
        </div>
      </div>
    </transition>
  </teleport>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'tdialog'
});
</script>

<script setup>
const props = defineProps({
  title: String,
  visible: Boolean
});

const emit = defineEmits(['close']);

const onClose = () => {
  emit('close');
};
</script>

使用的時(shí)候，只需要

<t-dialog title="LGD是不可戰(zhàn)勝的" :visible="visible" @close="onClose"> 這是一段內(nèi)容，蕭瑟仙貝。 </t-dialog>

// ...
const visible = ref(false);

const onDialog = () => {
  visible.value = !visible.value;
};

const onClose = () => {
  visible.value = false;
};

更進(jìn)一步

3、組件的渲染

上面我們已經(jīng)把標(biāo)準(zhǔn)的模態(tài)對(duì)話(huà)框組件完成了，還有另外一種相似的，只需要展示少量文字的輕量級(jí)提示組件 Message

在上面的例子中，我們總是把 TDialog 組件寫(xiě)在使用的地方，但是這個(gè) Messgae 組件，我們?cè)谙胩崾镜臅r(shí)候使用一個(gè)js語(yǔ)句就把它呼出來(lái)，類(lèi)似于下面的這樣

// 呼出一個(gè)提示
Message({ message: '這是一條Message消息' });

想使用一個(gè)函數(shù)呼出來(lái)，我們需要準(zhǔn)備下這個(gè)函數(shù)，這個(gè)函數(shù)的作用就是完成組件的渲染。

const Message = options => {
  // 準(zhǔn)備渲染容器
  const container = document.createElement('div');
  // 生成vnode
  const vnode = createVNode(MessageConstructor, options);
  // 渲染
  render(vnode, container);
};

MessageConstructor 是什么？就是我們的SFC(單文件組件)：

<template>
  <teleport to="#app">
    <transition name="message-fade">
      <div v-show="visible" ref="ins" class="message" :style="customStyle">{{ message }}</div>
    </transition>
  </teleport>
</template>

在線體驗(yàn)

查看代碼

總結(jié):

以上就是關(guān)于 teleport 組件的基礎(chǔ)用法和擴(kuò)展用法，給我們提供了不少的方便,到此這篇關(guān)于Vue3內(nèi)置組件Teleport使用方法詳解的文章就介紹到這了,更多相關(guān)Vue3內(nèi)置組件Teleport用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: