Vue-switch demo

by 16Carthik

HTML

<script src="http://vuejs.org/js/vue.min.js"></script>
<div id="demo"> 
</div>

CSS

.switch {
	--height: 22px;
	appearance: none;
	position: relative;
	outline: 0;
	border-radius: calc(0.8 * var(--height));
	width: calc(1.625 * var(--height));
	height: var(--height);
	background-color: #dbdbdb;
	border: 1px solid #dbdbdb;
	cursor: pointer;
	box-sizing: border-box;
	display: inline-block;
	-webkit-tap-highlight-color: transparent;
}

.switch input {
	opacity: 0;
	display: inline-block;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
	cursor: pointer;
}

.switch:before, .switch:after {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	height: calc(var(--height) - 2px);
	border-radius: calc((var(--height) - 2px) / 2);
	transition: .233s;
}

.switch:before {
	width: calc(1.625 * var(--height) - 2px);
	background-color: #dbdbdb;
}

.switch:after {
	width: calc(var(--height) - 2px);
	background-color: #FFF;
	box-shadow: 0 2px 3px rgba(17, 17, 17, 0.1);
}

.switch.checked {
	border-color: #4a4a4a;
	background-color: #4a4a4a;
}

.switch.checked:before {
	transform: scale(0);
}

.switch.checked:after {
	transform: translateX(calc(0.625 * var(--height)));
}

.switch.is-white.checked {
	border-color: white;
	background-color: white;
}

.switch.is-black.checked {
	border-color: #0a0a0a;
	background-color: #0a0a0a;
}

.switch.is-light.checked {
	border-color: whitesmoke;
	background-color: whitesmoke;
}

.switch.is-dark.checked {
	border-color: #363636;
	background-color: #363636;
}

.switch.is-primary.checked {
	border-color: #00d1b2;
	background-color: #00d1b2;
}

.switch.is-info.checked {
	border-color: #3273dc;
	background-color: #3273dc;
}

.switch.is-success.checked {
	border-color: #23d160;
	background-color: #23d160;
}

.switch.is-warning.checked {
	border-color: #ffdd57;
	background-color: #ffdd57;
}

.switch.is-danger.checked {
	border-color: #ff3860;
	background-color: #ff3860;
}

.switch.is-small {
	--height: 12px;
}

.switch.is-medium {
	--height: 28px;
}

.switch.is-large {
	--height: 32px;
}

JavaScript

const MySwitch = {
	name: 'Switch',
  template: `
  <label class="switch" :class="classObject">
    <input
    	ref="input"
      :disabled="disabled"
      :name="name"
      :value="value"
      @change="handleChange"
      type="checkbox"
    >
  </label>
  `,
  props: {
    disabled: Boolean,
    isFullwidth: Boolean,
    type: String,
    size: String,
    name: String,
    value: Boolean
  },
  computed: {
    classObject () {
      const { type, size, value } = this
      return {
        [`is-${type}`]: type,
        [`is-${size}`]: size,
        checked: value
      }
    }
  },
  watch: {
  	value () {
      this.applyValue()
    }
  },
  methods: {
    handleChange (event) {
      this.$emit('input', event.target.checked)
    },
    applyValue () {
    	this.$refs.input.checked = !!this.value
    }
  },
  mounted () {
    this.applyValue()
  }
}

var demo = new Vue({
  el: '#demo',
  template: `
  	<div>
    	<p>My Switch:</p>
      <p>active: {{ active }}</p>
    	<my-switch type="primary" v-model="active" />
    </div>
  `,
  components: {
  	MySwitch
  },
  data: {
	  active: true
  }
})