Мы можем использовать диалог для взаимодействия с пользователями. Они передают сообщения и позволяют выполнять над ними определенные действия. Vuetify предоставляет компонент v-dialog для создания диалога. Давайте посмотрим, как мы можем использовать этот компонент на практике в этой статье.
В приведенном ниже коде мы создали диалог и кнопку красного цвета:
<template> <v-app> <div class="text-center"> <v-dialog v-model="dialog" width="500"> <template v-slot:activator="{ on, attrs }"> <v-btn v-bind="attrs" v-on="on" class="mt-2" color="red" dark> Delete </v-btn> </template><v-card> <v-card-title class="text-h5"> Delete file? </v-card-title><v-card-text> Do you really want to delete this file? </v-card-text><v-card-actions> <v-spacer></v-spacer> <v-btn text @click="dialog = false"> Cancel </v-btn> <v-btn color="red" text @click="dialog = false"> Delete </v-btn> </v-card-actions> </v-card> </v-dialog> </div> </v-app> </template><script> export default { name: 'App', data: () => ({ dialog: false, }), }; </script>
Мы поместили кнопку в слот activator компонента v-dialog. Этот слот предоставляет некоторые реквизиты — on и attrs, которые мы использовали для установки реквизитов и обработчиков событий кнопки. Мы используем карточку для создания тела диалога.
Диалог появляется при нажатии кнопки:
Использование реквизита «скрыть-наложение»
Диалоговое окно открывается с наложением, как мы видим на изображении выше. Мы можем скрыть это наложение, установив свойство hide-overlay на true:
<template> <v-app> <div class="text-center"> <v-dialog v-model="dialog" width="500" hide-overlay> <template v-slot:activator="{ on, attrs }"> <v-btn v-bind="attrs" v-on="on" class="mt-2" color="red" dark> Delete </v-btn> </template><v-card> <v-card-title class="text-h5"> Delete file? </v-card-title><v-card-text> Do you really want to delete this file? </v-card-text><v-card-actions> <v-spacer></v-spacer> <v-btn text @click="dialog = false"> Cancel </v-btn> <v-btn color="red" text @click="dialog = false"> Delete </v-btn> </v-card-actions> </v-card> </v-dialog> </div> </v-app> </template>
Это будет выглядеть так:
Украсьте с помощью Vuetify
Полное руководство по созданию элегантных веб-приложений с помощью платформы Vuetify Material Design.
Скачать бесплатную копию здесь!
Создание полноэкранных диалогов
Мы можем сделать так, чтобы диалог закрывал всю область просмотра страницы, установив свойство fullscreen на true:
<template> <v-app> <div class="text-center"> <v-dialog v-model="dialog" width="500" fullscreen> <template v-slot:activator="{ on, attrs }"> <v-btn v-bind="attrs" v-on="on" class="mt-2" color="red" dark> Delete </v-btn> </template><v-card> <v-card-title class="text-h5"> Delete file? </v-card-title><v-card-text> Do you really want to delete this file? </v-card-text><v-card-actions> <v-spacer></v-spacer> <v-btn text @click="dialog = false"> Cancel </v-btn> <v-btn color="red" text @click="dialog = false"> Delete </v-btn> </v-card-actions> </v-card> </v-dialog> </div> </v-app> </template> ...
Использование настраиваемых диалоговых переходов
Мы можем настроить переход, который диалог использует для отображения на экране, используя реквизит transition. В приведенном ниже коде мы установили его на dialog-bottom-transition, что заставит диалоговое окно скользить снизу при открытии:
<template> <v-app> <div class="text-center"> <v-dialog v-model="dialog" width="500" transition="dialog-bottom-transition" > <template v-slot:activator="{ on, attrs }"> <v-btn v-bind="attrs" v-on="on" class="mt-2" color="red" dark> Delete </v-btn> </template><v-card> <v-card-title class="text-h5"> Delete file? </v-card-title><v-card-text> Do you really want to delete this file? </v-card-text><v-card-actions> <v-spacer></v-spacer> <v-btn text @click="dialog = false"> Cancel </v-btn> <v-btn color="red" text @click="dialog = false"> Delete </v-btn> </v-card-actions> </v-card> </v-dialog> </div> </v-app> </template> ...
Если бы мы хотели, чтобы он скользил сверху, мы могли бы установить ту же опору на dialog-top-transition:
<template> <v-app> <div class="text-center"> <v-dialog v-model="dialog" width="500" transition="dialog-bottom-transition" > <template v-slot:activator="{ on, attrs }"> <v-btn v-bind="attrs" v-on="on" class="mt-2" color="red" dark> Delete </v-btn> </template><v-card> <v-card-title class="text-h5"> Delete file? </v-card-title><v-card-text> Do you really want to delete this file? </v-card-text><v-card-actions> <v-spacer></v-spacer> <v-btn text @click="dialog = false"> Cancel </v-btn> <v-btn color="red" text @click="dialog = false"> Delete </v-btn> </v-card-actions> </v-card> </v-dialog> </div> </v-app> </template> ...
Как сделать диалоги постоянными
По умолчанию диалоговые окна Vuetify можно закрыть, щелкнув или нажав где-нибудь за его пределами. Если мы не хотим, чтобы это было так, мы можем установить свойство persistent в значение true:
<template> <v-app> <div class="text-center"> <v-dialog v-model="dialog" width="500" persistent > <template v-slot:activator="{ on, attrs }"> <v-btn v-bind="attrs" v-on="on" class="mt-2" color="red" dark> Delete </v-btn> </template><v-card> <v-card-title class="text-h5"> Delete file? </v-card-title><v-card-text> Do you really want to delete this file? </v-card-text><v-card-actions> <v-spacer></v-spacer> <v-btn text @click="dialog = false"> Cancel </v-btn> <v-btn color="red" text @click="dialog = false"> Delete </v-btn> </v-card-actions> </v-card> </v-dialog> </div> </v-app> </template> ...
Краткое содержание
Vuetify предоставляет компонент v-dialog для создания диалогов в пользовательском интерфейсе. Мы можем изменить определенные свойства этих диалогов, например, сделать их полноэкранными или изменить переход, который они использовали для отображения на экране.
Подпишитесь на нашу еженедельную рассылку, чтобы быть в курсе новых полезных материалов от нас!
Получить обновленную статью на codingbeautydev.com.
