Vue.js Composition API Teleport

Vue.js Composition API Teleport — это встроенный компонент Vue.js. С помощью Телепорта мы можем переносить элемент в другой элемент. Это означает, что хотя компонент не существует в DOM, он загружается из другого места и размещается для загрузки по какому-то условию.

Элемент телепорта полезен для всплывающих окон или модальных окон в приложениях, когда вы хотите привлечь внимание пользователя. Телепорт должен знать, где элемент может отображаться. Вот следующие атрибуты, используемые элементом Teleport.

to: Здесь нам нужно указать элемент, на котором будет отображаться телепортируемый элемент. Это означает, что элемент, на который мы хотим отобразить, должен быть доступен в момент отображения телепортируемого элемента.

При необходимости мы можем передавать значения и функции телепортируемому элементу.

Синтаксис: сначала мы определяем тело, в котором мы хотим отобразить элемент, а затем телепортируем элемент сюда следующим образом:

<Teleport to="body">
    <!-- Teleport element -->
</Teleport>

Пример: В следующем примере у нас есть две модели: одна простая модальная, которая кажется простой, а другая модальная, расположенная в другом файле, имеет анимацию, которая телепортируется к текущему тексту HTML-кода.

Шаг 1. Создайте новый проект Vue.js с помощью диспетчера пакетов npm node.js.

npm init vue@latest

Введите имя проекта и предустановите проект следующим образом:

Структура проекта: После успешной установки будет сформирована следующая структура проекта.

Шаг 2: В App.vue создайте код настройки скрипта, в котором мы установим для внешнего вида исходного модального окна значение false. У нас будет две модели, а значит, по ней две переменные.

Приложение: vue

<script setup>

    import { ref } from "vue";

    const animatedModalVisible = ref(false);

    const simpleModalVisible = ref(false);

</script>

Шаг 3: В разделе шаблонов создайте простое модальное окно с помощью Teleport. Также добавьте кнопки для закрытия и открытия модального окна.

vue

<template>

    <center>

        <h1 style="text-align: center; color: green">

          GeeksforGeeks

        </h1>

        <strong>Vue.js Composition API Teleport</strong>

        <br />

        <br />

    </center>

    <center>

        <button @click="simpleModalVisible = true">

            Show Simple Modal

        </button>

        <Teleport to="body">

            <div v-if="simpleModalVisible"

                 class="modal-wrapper">

                <div class="modal">

                    <h4>Welcome to GeeksforGeeks</h4>

                    <p>This is a Simple Modal</p>

                    <button @click="simpleModalVisible = false">

                      Close

                    </button>

                </div>

            </div>

        </Teleport>

        

    </center>

</template>

<style>

    .modal-wrapper {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background-color: rgba(172, 172, 172, 0.836);

    }

    .modal {

        width: 200px;

        padding: 20px;

        background-color: #fff;

        margin: auto;

        margin-top: 4rem;

        border-radius: 4px;

        text-align: center;

    }

</style>

Шаг 4 : Мы добавили место для анимированного модального окна. Мы создадим анимированное модальное окно в другом файле с именем Modal.vue. Поэтому создайте новый файл src/Modal.vue и используйте переход для анимации модального окна.

vue

<script setup>

    const props = defineProps({

        visible: Boolean,

    });

</script>

<template>

    <Transition name="myModal">

        <div v-if="visible" class="modal-background">

            <div class="modal-wrapper">

                <div class="modal-container">

                    <h4 class="modal-header">

                      GeeksForGeeks

                    </h4>

                    <p class="modal-body">

                      A computer science portal for geeks.

                    </p>

                    <button @click="$emit('close')">

                      Close

                    </button>

                </div>

            </div>

        </div>

    </Transition>

</template>

<style>

    .modal-background {

        position: fixed;

        z-index: 9998;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background-color: rgba(133, 133, 133, 0.5);

        display: table;

        transition: opacity 0.3s ease;

    }

    .modal-wrapper {

        display: table-cell;

        vertical-align: middle;

    }

    .modal-container {

        width: 300px;

        margin: 4rem auto;

        padding: 20px 30px;

        background-color: #fff;

        border-radius: 2px;

        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);

        transition: all 0.3s ease;

    }

    .modal-header {

        margin-top: 0;

        color: #42b983;

    }

    .modal-body {

        margin: 20px 0;

    }

    .myModal-enter-from,

    .myModal-leave-to {

        opacity: 0;

    }

    .myModal-enter-from .modal-container,

    .myModal-leave-to .modal-container {

        -webkit-transform: scale(1.1);

        transform: scale(1.1);

    }

</style>

Шаг 5: Импортируйте Modal.vue в App.vue, а затем поместите элемент Teleport, как мы сделали для простого модального окна.

vue

<script setup>

    import Modal from "./Modal.vue";

    import { ref } from "vue";

    const animatedModalVisible = ref(false);

    const simpleModalVisible = ref(false);

</script>

<template>

    <center>

        <h1 style="text-align: center; color: green">

          GeeksforGeeks

        </h1>

        <strong>Vue.js Composition API Teleport</strong>

        <br />

        <br />

    </center>

    <center>

        <button @click="simpleModalVisible = true">

          Show Simple Modal

        </button>

        <Teleport to="body">

            <div v-if="simpleModalVisible" class="modal-wrapper">

                <div class="modal">

                    <h4>Welcome to GeeksforGeeks</h4>

                    <p>This is a Simple Modal</p>

                    <button @click="simpleModalVisible = false">

                      Close

                    </button>

                </div>

            </div>

        </Teleport>

        <br />

        <br />

        <button @click="animatedModalVisible = true">

          Show Animated Modal

        </button>

        <Teleport to="body">

            <Modal :visible="animatedModalVisible"

                   @close="animatedModalVisible = false" />

        </Teleport>

    </center>

</template>

<style>

    .modal-wrapper {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background-color: rgba(172, 172, 172, 0.836);

    }

    .modal {

        width: 200px;

        padding: 20px;

        background-color: #fff;

        margin: auto;

        margin-top: 4rem;

        border-radius: 4px;

        text-align: center;

    }

</style>