先看看效果图：

基本使用

<wt-switch @switch="change" />

默认选中 checked="true"

<wt-switch :checked="true" />

禁用 disable="true"

<wt-switch :disable="true" />

自定义颜色 color="#f60"

<wt-switch color="#f60" />

props属性：

disable（类型 Boolean）

是否禁用，默认"false"。

checked（类型 Boolean）

是否选中，默认"false"。

color（类型 String）

组件选中颜色，默认"#4cd964"。

组件事件：

switch

组件切换触发，返回true或者false。

示例代码：

<template>
  <div class="demo">
    <h1>基本使用</h1>
    <ul>
      <li>
        <wt-switch @switch="change" />
      </li>
      </ul>
      <h1>默认选中 checked="true"</h1>
    <ul>
      <li>
        <wt-switch :checked="true" />
      </li>
    </ul>
     <h1>禁用 disable="true"</h1>
    <ul>
      <li>
        <wt-switch :disable="true" />
      </li>
    </ul>
    <h1>自定义颜色 color="#f60"</h1>
    <ul>
      <li>
        <wt-switch color="#f60" />
      </li>
    </ul>
  </div>
</template>
<script>
import Switch from "@/components/Switch.vue";

export default {
  components: {
    "wt-switch": Switch,
  },
  setup() {
    const change = value => {
      console.log(value)
    };
    return {
      change
    };
  }
};
</script>
<style lang="less" scoped>
h1 {
  background: #eee;
  padding: 10px;
  font-size: 18px;
}
li {
  margin: 10px;
}
</style>

具体的Switch组件源码，请前往github地址获取。

https://github.com/AntJavascript/WidgetUI3.0/blob/master/Switch.vue