用法：

import switchc from './public/switch'<switchc v-model="value1" text="on|off"></switchc>

属性

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

事件

change

html部分：

<template> <div> <span class="weui-switch" :class="{'weui-switch-on' : isChecked}" :value="value" @click="toggle" style="position:relative"> <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部分：

<script> export default { name: 'switchComponent', props: { value: { type: Boolean, default: true }, text: { type: String, default: '' } }, data () { return { isChecked: this.value } }, computed: { direction () { if (this.text) { return this.text.split('|') } else { return [] } } }, watch: { value (val) { this.isChecked = val }, isChecked(val) { this.$emit('change', val); } }, methods: { toggle() { this.isChecked = !this.isChecked; } } } </script>

style部分：

<style> .weui-switch { display: block; position: relative; width: 52px; height: 24px; border: 1px solid #DFDFDF; outline: 0; border-radius: 16px; box-sizing: border-box; background-color: #DFDFDF; transition: background-color 0.1s, border 0.1s; cursor: pointer; } .weui-switch:before { content: " "; position: absolute; top: 0; left: 0; width: 50px; height: 22px; border-radius: 15px; background-color: #FDFDFD; transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1); } .weui-switch:after { content: " "; position: absolute; top: 0; left: 0; width: 22px; height: 22px; border-radius: 15px; background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35); } .weui-switch-on { border-color: #6F6F6F; background-color: #1AAD19; } .weui-switch-on:before { border-color: #1AAD19; background-color: #409eff; } .weui-switch-on:after { transform: translateX(28px); }</style>

以上这篇vue自定义switch开关组件,实现样式可自行更改就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。