<!-- template for the modal component --> <script type="text/x-template" id="switch-template"> <div class="m-switch"> <input type="checkbox" class="m-switch__checkbox" :value="value" :checked="checked" @change="change" > <div class="m-switch__ui"> <div class="m-switch__handle"></div> </div> </div> </script> <!-- app --> <div id="app"> <switch-input v-model="switchvalue"></switch-input> <p>The switch value is: {{ switchvalue }}</p> </div>
Vue.component('switch-input', { template: '#switch-template', props: { value: { type: Boolean, default: false } }, data () { return { checked: this.value } }, methods: { change () { this.checked = !this.checked this.$emit('input', this.checked) } } }) new Vue({ el: "#app", data () { return { switchvalue: false } } })
body { background: #20262E; padding: 20px; } #app { background: #FFF; border-radius: 4px; padding: 20px; } .m-switch { position: relative; overflow: hidden; width: 58px; height: 36px; border-radius: 100px; } .m-switch__checkbox { position: absolute; width: 100%; height: 100%; outline: 0; cursor: pointer; z-index: 2; opacity: 0; appearance: none; } .m-switch__ui { display: flex; align-items: center; position: absolute; width: 100%; height: 100%; padding: 0 3px; background-color: #DDD; z-index: 1; transition: all linear .2s; } .m-switch__handle { width: 30px; height: 30px; background-color: white; border-radius: 50%; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2); transition: transform linear .2s; } .m-switch__checkbox:checked + .m-switch__ui { background-color: #21D35B; } .m-switch__checkbox:checked + .m-switch__ui .m-switch__handle { transform: translateX(calc(100% - 8px)); }