antd vue switch组件怎么把值true、false改为number类型的1和0

Question

看了一下antd 文档，好像没有提供这个功能
switch文档

element就可以
<el-switch :active-value="1" :inactive-value="0" v-model="menuInfoForm.status"></el-switch>

或者有什么办法转变这个值，谢谢各位

Answer 1

<template>
  <a-switch :checked="value" @change="onChange" />
</template>

<script>
export default {
  model: {
    prop: 'checked',
    event: 'change',
  },
  props: {
    checked: {
      type: [Number, String],
      required: true,
    },
  },
  computed: {
    value() {
      return this.checked === 1 || this.checked === '1'
    },
  },
  methods: {
    onChange(checked) {
      this.$emit('change', checked ? 1 : 0)
    },
  },
}
</script>

自己再封装一层 因为上面还有很多props 用render写 把props都给绑上去 或者一个一个写（有点呆）

import { Switch } from 'ant-design-vue'
props: {
    ...Switch.props,
},
render() {
    return (
      <Switch on={this.$listeners} {...{ props: { ...this.$props, checked: this.value } }}>
      </Switch>
    )
  },

大概是这样 跑不起来的话自己改改 🐶

Answer 2

为了这个问题，写了一个组件：

https://www.npmjs.com/package/better-ant-design-switch