重写ant-design-vue中a-swtich组件（仿element-ui中el-swtich），重写后可传入数字或字符串类型

组件（第一种方案）

<script>
import { Switch } from 'ant-design-vue'
export default {
  name: 'GSwitch',
  model: {
    prop: 'checked',
    event: 'change',
  },
  props: {
  	// 继承原生switch的props
    ...Switch.props,
    checked: {
      type: [Number, String, Boolean],
    },
    activeValue: {
      //开启时的值
      type: [Number, String, Boolean],
      default: 1,
    },
    inactiveValue: {
      //关闭时的值
      type: [Number, String, Boolean],
      default: 0,
    },
  },
  computed: {
    value() {
      return this.checked === this.activeValue;
    },
  },
  methods: {
    onChange(event) {
      this.$emit('change', event ? this.activeValue : this.inactiveValue);
    },
    onBlur(event) {
      this.$emit('blur', event ? this.activeValue : this.inactiveValue);
    },
  },
  render() {
    return (
      <Switch
        onChange={this.onChange}
        onBlur={this.onBlur}
        // 传入修改后的props,和继承原生的scopedSlots
        {...{
          props: { ...this.$props, checked: this.value },
          scopedSlots: { ...this.$scopedSlots },
        }}
      ></Switch>
    )
  },
}
</script>

注册

//全局使用 --文件路径自己修改
import GSwitch from "@/components/GSwitch/index.vue"
Vue.component(GSwitch.name,GSwitch)

//单文件
import GSwitch from '@/components/GSwitch'
components: {
    GSwitch
}

使用

//默认1或0
<g-switch v-model="isSwtich" @change="onChange" />

//自定义
<g-switch v-model="isSwtich2" :active-value="100" :inative-value="-100" @change="onChange" />
methods: {
	onChange(event) {
	      console.log(event)
	}
}

组件（第二种方案）

<script>
import { Switch } from 'ant-design-vue'
export default {
  name: 'GSwitch',
  model: {
    prop: 'checked',
    event: 'change',
  },
  props: {
  	// 继承原生switch的props
    ...Switch.props,
    checked: {
      type: [Number, String, Boolean],
    },
     activeValue: {
      //开启时的值
      type: [Number, String, Boolean],
      default: 1,
    },
    inactiveValue: {
      //关闭时的值
      type: [Number, String, Boolean],
      default: 0,
    },
  },
  computed: {
    value() {
      this.$emit('change', event ? this.activeValue : this.inactiveValue);
      return this.checked === this.activeValue;
    },
  },
 
  render() {
    return (
      <Switch
        on={this.$listeners}
        // 传入修改后的props,和继承原生的scopedSlots
        {...{
          props: { ...this.$props, checked: this.value },
          scopedSlots: { ...this.$scopedSlots },
        }}
      ></Switch>
    )
  },
}
</script>

使用方式一致，第二种因为采用计算属性与on={this.$listeners}，这样做会更加的灵活，且不用去重新实现组件的原生方法，但由于计算属性value会根据this.checked的改变而改变，会导致$emit及onChange多次调用**（暂无解决方案，如果有能解决的大佬请评论指点）**

防止多次调用onChange(临时解决)

<g-switch v-model="isSwtich" @change="onChange" />
methods: {
	onChange(event) 
		if(typeof event === 'boolean'){
			console.log(event)
		}
	}
}