Switch 开关

使用指南

在两个互斥对象进行选择，eg：选择开或关。

规则

• 避免增加额外的文案来描述当前 Switch 的值。

API

代码演示

查看代码

<template>
  <div class="list">
    <div class="sub-item">
      <h3-switch v-model="value1" activeColor="#4dd865" />
      <p>自定义颜色为#4dd865的开关</p>
    </div>
    <div class="sub-item">
      <h3-switch v-model="value1" />
      <p>开启</p>
    </div>
    <div class="sub-item">
      <h3-switch v-model="value2" />
      <p>关闭</p>
    </div>
    <div class="sub-item">
      <h3-switch :disabled="true" checked />
      <p>开启 不可用</p>
    </div>
    <div class="sub-item">
      <h3-switch :disabled="true" />
      <p>关闭 不可用</p>
    </div>
  </div>
</template>
<script>
import { H3Switch } from '@/components/h3-switch/';
export default {
  name: 'DemoSwitch',
  components: {
    H3Switch,
  },
  props: {},
  data () {
    return {
      value1: true,
      value2: false,
      radioValue: true,
      radioValue1: true,
      radioValue2: true,
      radioValue3: true,
    };
  },
  watch: {
    value1 (val) {
      console.log(`radio value changed......${val}`);
    },
  },
  methods: {
    switchClick (val) {
      console.log(`switch clicked ...${val}`);
    },
  },
};
</script>
<style lang="less" scoped>
.list {
  padding: 15px;
  .sub-item {
    padding: 15px;
    p {
      font-weight: 600;
      font-size: 16px;
      padding: 15px 0;
    }
  }
}
</style>

与thinking-ui 2.0版组件的区别以及迁移

按照新的switch组件规范修改相关样式

1. 弃用的props: mode loading

Prop

属性	说明	类型	默认值
checked	是否选中，v-model绑定值	boolean	false
disabled	是否不可修改	boolean	false
activeColor	开关打开后的背景颜色	string	-
inactiveColor	开关关闭后的背景颜色	string	-
control	是否自行控制checked	boolean	false

Event

事件名	说明	参数
click	点击事件触发的回调函数，返回checked的值是点击时组件是否checked的值	(checked: bool)
input	change 事件触发的回调函数，v-model绑定事件，control:true下失效	(checked: bool)
change	change 事件触发的回调函数	(checked: bool)