Кнопка переключения Vue.js

Кнопка переключения Vue.js

Как создать свой собственный переключатель с помощью vue.js

Этот компонент Toggle Button представляет собой настраиваемый элемент управления компонентом типа ввода HTML5, который позволяет вам выполнять действие переключения (включения / выключения) между отмеченным и непроверенным состояниями.

Начнем с раздела HTML.

<template>
  <label class=”switch”>  
    <input  
     :checked=”checked”  
     @change=”changeInput”      
     @input=”$emit(‘input’, $event.target.checked)”  
     value=”1"  type=”checkbox”  
    >  
    <span class=”slider round“ /> 
  </label>
</template>

Мы добавили собственный класс для настройки дизайна с помощью некоторого CSS, поэтому я выберу разные цвета и интервалы, как вы видите ниже:

<style scoped>
  .switch {
     position: relative;
     display: inline-block;
     width: 35px;
     height: 22px;
  }
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  .slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #fff;
     -webkit-transition: .7s;
     transition: .7s;
     border:1px solid #ffffff;
   }
   .slider:before {
     position: absolute;
     content: “”;
     height: 22px;
     width: 22px;
     left: -3px;
     bottom: -2px;
     background-color: #2567A2;
    -webkit-transition: .4s;
     transition: .4s;
     border: solid 1.5px #fff;
   }
   input:checked + .slider {
     background-color: transparent;
   }
   input:focus + .slider {
     box-shadow: 0 0 1px #2567A2;
   }
   input:checked + .slider:before {
    -webkit-transform: translateX(31px);
    -ms-transform: translateX(31px);
    transform: translateX(15px);
    background: #2567A2;
    -webkit-transition: .7s;
    transition: .7s;
    border: solid 2px #fff;
   }
   .slider.round {
     border-radius: 24px;
     border-color: #ffffff;
   }
   .slider.round:before { 
     border-radius: 50%;
     border-color: #ffffff;
   }
</style>

Теперь мы собираемся создать основную и последнюю часть (функции). Мы добавим Prop (значение) и укажем тип этого свойства как Boolean. Затем мы закодируем метод ввода изменений и будем следить за этим изменением каждый раз.

<script>
  export default {
    props: {
     value: { type: Boolean, default: false }
    },
   data() {
     return {
       checked: this.value
     }
   },
   watch: {
     checked(val) {
       this.$emit(‘input’, this.checked)
     }
   },
   methods: {
     changeInput() {
       this.checked = !this.checked
       this.$emit(‘input’, !this.value)
     }
   }
 }
</script>

Надеюсь, это помогло!

Вы можете протестировать его в codeandbox .