switch调函数 vue_vue.js开发之开关(switch)组件

最近开发组件的时候，自定义开发了开关(switch)组件，现将代码整理如下，方便日后复用。

toggle-switch.vue

class="switch-input"

@change="toggle"/>

:style="{backgroundColor: toggled ? colorChecked : colorUnchecked}">

:style="{transition: `transform ${speed}ms`,

transform: toggled ? null: `translate3d(32px, 0px, 0px)`}">

v-if="toggled"

v-html="labelChecked">

v-html="labelUnchecked" v-else>

export default {

name: 'ToggleSwitch',

data () {

return {

toggled: this.value,

colorChecked: '#25b9e9',

colorUnchecked: '#db572e',

labelChecked: '开',

labelUnchecked: '关'

}

},

props: {

value: {

type: Boolean,

default: true

},

speed: {

type: Number,

default: 100

}

},

methods: {

toggle (event) {

this.toggled = !this.toggled

this.$emit('change', event)

}

}

}

.switch {

display: inline-block;

position: relative;

overflow: hidden;

vertical-align: middle;

user-select: none;

font-size: 10px;

cursor: pointer;

.switch-input {

display: none;

}

.switch-label {

position: absolute;

top: 0;

font-weight: 600;

color: white;

z-index: 2;

&.label-left {

left: 10px;

line-height: 20px;

border-top-left-radius: 2px;

border-bottom-left-radius:2px;

}

&.label-right {

right: 10px;

line-height: 20px;

border-top-right-radius: 2px;

border-bottom-right-radius:2px;

}

}

.switch-core {

display: block;

position: relative;

box-sizing: border-box;

outline: 0;

margin: 0;

transition: border-color .3s, background-color .3s;

user-select: none;

width: 64px;

height: 20px;

border-radius: 4px;

line-height: 20px;

.switch-button {

width: 32px;

height: 20px;

display: block;

position: absolute;

overflow: hidden;

top: 0;

left: 0;

z-index: 3;

transform: translate3d(0, 0, 0);

background-color: #ecf0f5;

}

}

}

App.vue

import ToggleSwitch from '@/components/toggle-switch'

export default {

name: 'app',

components: {

ToggleSwitch

}

}

#app {

font-family: 'Microsoft YaHei','Avenir', Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: left;

color: #2c3e50;

height:100%;

}

.left {

margin: 50px 200px;

}

.main{

float:left;

width:95%;

background-color: #EFF2F7;

height:100%;

overflow: auto;

}