index.vue

<template>
  <label
    :class="cusClass" class="toggle toggle-positive toggle-check"
    @click="checked">
    <input :checked="value" :disabled="disable" type="checkbox">
    <div class="track">
      <div class="handle"/>
    </div>
  </label>
</template>

<script>
export default {
  name: 'HSwitch',
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    disable: {
      type: Boolean,
      default: false,
    },
    cusClass: {
      type: String,
      default: '',
    },
  },
  data () {
    return {
      // clickValue: false
    }
  },
  computed: {

  },
  watch: {
  },
  methods: {
    checked () {
      if (!this.disable) {
        this.$emit('input', !this.value)
        this.$emit('switchClick', !this.value)
      }
    },
  },
}
</script>

<style lang="less" scoped>
 @import "../../common/styles/variables";
  .toggle-check {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;

    .track {
      width: 40px;
      height: 25px;
      margin-right: 2.5px;
      border-radius: 15px;
      .handle {
        width: 22.5px;
        height: 22.5px;
        top: 3.5px;
        left: 2.5px;
      }
    }
  }

  .toggle.toggle-positive input:checked + .track {
    border-color: @switch-box-bg;
    background-color: @switch-box-bg;

    .handle {
      width: 22.5px;
      height: 22.5px;
      top: 3.5px;
      left: 9px;
    }
  }
</style>