В этой статье вы узнаете, как создать многоразовый модальный компонент с использованием переходов и слотов.
Определение структуры шаблона
Начнем с определения нашего шаблона. Нам понадобится div для тени заднего плана, div, чтобы действовать как модальный блок и некоторые элементы, чтобы определить его структуру:
<template>
<div class="modal-backdrop">
<div class="modal">
<slot name="header">
</slot>
<slot name="body">
</slot>
<slot name="footer">
</slot>
</div>
</div>
</template>
Обратите внимание на использование слотов? Мы могли бы использовать реквизиты для создания заголовка, тела и нижнего колонтитула, но использование слотов позволит обеспечить большую гибкость.
Использование слотов позволяет нам легко использовать один и тот же модальный вид с различными типами содержимого тела. Мы можем использовать модальный, чтобы показать простой текст, но мы можем захотеть повторно использовать тот же модальный форма, чтобы отправить запрос. Хотя реквизита обычно достаточно для создания компонента, предоставление HTML через опору потребует от нас использовать его v-htmlдля рендеринга — что может привести к атакам XSS.
Здесь мы используем именованные слоты, чтобы мы могли использовать более одного слота в одном компоненте.
Читать дальше →
[Из песочницы] Создание модального компонента с помощью Vue.js
Source: habrahabr