ant design vue switch 开关

switch开关需要表示开关状态/两种状态之间的切换时,checkbox的区别不大，只不过是另一种表现方式。

switch用法

<template>
  <div>
    <a-switch  :checked="checked" @change="onChange"></a-switch>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checked:false
    };
  },
  methods: {
    onChange(checked) {
      this.checked=checked;
      console.log(`切换 to ${checked}`);
    },
  },
};
</script>

例子

自定义图标或文字

<template>
  <div>
    <a-switch checked-children="开" un-checked-children="关" default-checked></a-switch>
    &nbsp;
    <a-switch checked-children="1" un-checked-children="0" ></a-switch>
    &nbsp;
    <a-switch default-checked>
      <a-icon slot="checkedChildren" type="check" />
      <a-icon slot="unCheckedChildren" type="close" />
    </a-switch>
  </div>
</template>

例子

加载中

<template>
  <div>
    <a-switch loading default-checked ></a-switch>
     &nbsp;
    <a-switch size="small" loading  ></a-switch>
  </div>
</template>

例子