Vue.js Composition API Teleport

Vue Программирование и разработка

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>
        <!-- Space for Animated Modal -->
    </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 и используйте переход для анимации модального окна.

Читайте также:  Как найти элементы в массиве Ruby?

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>

Шаг 6: Запустите проект с помощью следующей команды и посмотрите результат.

npm run dev

Он запустит проект на http://localhost:3000/ и результат будет следующим.

Читайте также:  Основы программирования HTML

Выход:

роект с помощью следующей команды и посмотри

Оцените статью
bestprogrammer.ru
Добавить комментарий

Adblock
detector