vue自定义switch开关组件,实现样式可自行更改

vue自定义自定义switch开关组件开关组件,实现样式可自行更改实现样式可自行更改

今天小编就为大家分享一篇vue自定义switch开关组件,实现样式可自行更改，具有很好的参考价值，希望对大家有所帮助。一起跟随小

编过来看看吧

用法：用法：

import switchc from './public/switch'

<switchc v-model="value1" text="on|off"></switchc>

属性属性

text 非必填，类型为string，要求格式为“on|off” ,以 | 分隔

<div v-if="isChecked && direction.length > 0" style="width:100%;height:100%;position:absolute;padding:0 5px;line-height:20px;color:#FFF;user-select:none">

{{direction[0]}}

</div>

<div v-if="!isChecked && direction.length > 0" style="width:100%;height:100%;position:absolute;padding:0 5px;right:2px;line-height:22px;color:#7A7A7A;text-align:right;user-select:none">

{{direction[1]}}

</div>

</span>

</div>

</template>

js部分：部分：

default: true

},

text: {

type: String,

default: ''

}

},

data () {

return {

isChecked: this.value

} else {

return []

}

}

},

watch: {

value (val) {

this.isChecked = val

},

isChecked(val) {

}

}

}

</script>

style部分：部分：

<style>

.weui-switch {

display: block;

position: relative;

width: 52px;

transition: background-color 0.1s, border 0.1s;

cursor: pointer;

}