Переключатель позволяет пользователю выбирать между двумя различными значениями. Вы можете использовать их вместо флажка в пользовательском интерфейсе. В этой статье мы узнаем о компоненте переключения Vuetify и различных способах его настройки.
Компонент v-switch
v-switch
— это имя компонента, который Vuetify предоставляет для создания переключателя:
<template> <v-app> <div class="d-flex justify-center mt-2"> <v-switch></v-switch> </div> </v-app> </template>
<script> export default { name: 'App', }; </script>
Щелчок переключателя включает его:
Двусторонняя привязка с v-моделью
Мы можем установить двустороннюю привязку между значением переключателя и переменной с помощью v-model
. В приведенном ниже коде мы создали переключатель и кнопку под ним для его выключения. Мы добавили к кнопке обработчик щелчка, который установит switch1
в false
, что выключит переключатель из-за ошибки v-model
. two-way binding
также гарантирует, что переключение переключателя в пользовательском интерфейсе приведет к обновлению switch1
.
<template> <v-app> <div class="d-flex justify-center mt-2"> <v-switch v-model="switch1"></v-switch> </div> <div class="d-flex justify-center mt-2"> <v-btn color="primary" @click="switch1 = false">Turn off</v-btn> </div> </v-app> </template>
<script> export default { name: 'App', data: () => ({ switch1: false, }), }; </script>
Щелчок по кнопке выключает переключатель:
Метки переключения
Мы можем объяснить функцию переключателя пользователям с реквизитом label
:
<template> <v-app> <div class="d-flex justify-center mt-2"> <v-switch v-model="switch1" :label="`Switch: ${switch1 ? 'on' : 'off'}`" ></v-switch> </div> </v-app> </template>
<script> export default { name: 'App', data: () => ({ switch1: false, }), }; </script>
Украсьте с помощью Vuetify
Полное руководство по созданию элегантных веб-приложений с помощью платформы Vuetify Material Design.
Скачать бесплатную копию здесь!
Пользовательские HTML-метки
Чтобы включить HTML в метку переключателя, используйте слот label
:
<template> <v-app> <div class="d-flex justify-center mt-2"> <v-switch v-model="switch1"> <template v-slot:label> Switch: <b :class="{ 'primary--text': switch1 }">{{ switch1 ? 'on' : 'off' }}</b> </template> </v-switch> </div> </v-app> </template>
<script> export default { name: 'App', data: () => ({ switch1: false, }), }; </script>
Пользовательские цвета
Как и многие другие компоненты Vuetify, v-switch
поставляется с реквизитом color
, который позволяет нам установить собственный цвет:
<template> <v-app> <div class="d-flex justify-center mt-2"> <v-col sm="4" class="d-flex justify-center" ><v-switch color="red" label="red"></v-switch> </v-col> <v-col sm="4" class="d-flex justify-center" ><v-switch color="primary" label="primary"></v-switch> </v-col> <v-col sm="4" class="d-flex justify-center" ><v-switch color="green" label="green"></v-switch> </v-col> </div> </v-app> </template>
<script> export default { name: 'App', }; </script>
Плоский переключатель
Мы можем использовать плоскую опору, чтобы убрать возвышение на пальце переключателя.
<template> <v-app> <div class="d-flex justify-center mt-2"> <v-switch v-model="switch1" :label="`Switch: ${switch1 ? 'on' : 'off'}`" flat ></v-switch> </div> </v-app> </template>
<script> export default { name: 'App', data: () => ({ switch1: false, }), }; </script>
Переключатель в режиме вставки
Чтобы отобразить переключатель в режиме вставки, установите свойство inset
на true
:
<template> <v-app> <div class="d-flex justify-center mt-2"> <v-switch v-model="switch1" :label="`Switch: ${switch1 ? 'on' : 'off'}`" inset ></v-switch> </div> </v-app> </template>
<script> export default { name: 'App', data: () => ({ switch1: false, }), }; </script>
Передача массива в v-модель
Мы можем передать переменную общего массива в v-model
s нескольких компонентов переключателя.
<template> <v-app> <div class="d-flex justify-center mt-2"> {{ people }} </div>
<div class="d-flex justify-center mt-2"> <v-switch v-model="people" color="primary" label="Peter" value="Peter" ></v-switch> </div> <div class="d-flex justify-center mt-2"> <v-switch v-model="people" color="primary" label="Daniel" value="Daniel" ></v-switch> </div> </v-app> </template>
<script> export default { name: 'App', data: () => ({ people: [], }), }; </script>
Переключение любого из переключателей обновит массив:
Отключенный переключатель
Мы можем использовать реквизит disabled
, чтобы отключить переключатель:
<template> <v-app> <div class="d-flex justify-center mt-2"> <v-switch label="off disabled" :value="false" disabled></v-switch> </div> <div class="d-flex justify-center mt-2"> <v-switch label="on disabled" :value="true" disabled></v-switch> </div> </v-app> </template>
<script> export default { name: 'App', }; </script>
Переключатель в состоянии загрузки
Используйте реквизит loading
, чтобы установить переключатель в состояние загрузки:
<template> <v-app> <div class="d-flex justify-center mt-2"> <v-switch label="off loading" :value="false" loading="primary"></v-switch> </div> <div class="d-flex justify-center mt-2"> <v-switch label="on loading" :value="true" loading="primary"></v-switch> </div> </v-app> </template>
<script> export default { name: 'App', }; </script>
Краткое содержание
Переключатели полезны для получения логического ввода от пользователей. Используйте компонент v-switch
и его различные реквизиты для их создания и настройки.
Подпишитесь на нашу еженедельную рассылку, чтобы быть в курсе последних советов и руководств по Vuetify и Vue.
Получить обновленную статью на codingbeautydev.com.