Переключатель позволяет пользователю выбирать между двумя различными значениями. Вы можете использовать их вместо флажка в пользовательском интерфейсе. В этой статье мы узнаем о компоненте переключения 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-models нескольких компонентов переключателя.

<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.