Switch 开关

使用指南

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

规则

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

API

代码演示

查看代码

<template>
  <div class="list">
    <p class="sub-title">
      不带边框的输入框 适合跟field组合使用
    </p>
    <div class="sub-item">
      <span>颜色为#4dd865的开关</span>
      <h3-switch v-model="value1" activeColor="#4dd865" />
    </div>
    <div class="sub-item">
      <span>On</span>
      <h3-switch v-model="value1" />
    </div>
    <div class="sub-item">
      <span>Off</span>
      <h3-switch v-model="value2" />
    </div>
    <div class="sub-item">
      <span>disabled On</span>
      <h3-switch :disabled="true" checked />
    </div>
    <div class="sub-item">
      <span>disabled Off</span>
      <h3-switch :disabled="true" />
    </div>
    <div class="sub-item">
      <span>style of rect</span>
      <h3-switch v-model="radioValue" @click="switchClick" mode="rect" />
    </div>
    <div class="sub-item">
      <span>color of rect</span>
      <h3-switch
        v-model="radioValue1"
        @click="switchClick"
        mode="rect"
        activeColor="#4dd865"
      />
    </div>
    <div class="sub-item">
      <span>style of round</span>
      <h3-switch v-model="radioValue2" @click="switchClick" mode="round" />
    </div>
    <div class="sub-item">
      <span>color of round</span>
      <h3-switch
        v-model="radioValue3"
        @click="switchClick"
        activeColor="#4dd865"
        mode="round"
      />
    </div>
    <div class="sub-item">
      <span>on loading</span>
      <h3-switch checked loading />
    </div>
    <div class="sub-item">
      <span>off loading</span>
      <h3-switch loading />
    </div>
    <div class="sub-item">
      <span>on loading rect</span>
      <h3-switch mode="rect" checked loading />
    </div>
    <div class="sub-item">
      <span>off loading rect</span>
      <h3-switch mode="rect" loading />
    </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 {
  background-color: #fff;
  padding: 0 15px;
  .sub-item {
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    > span {
      font-size: 14px;
    }
  }
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
  }
}
</style>

与h3-mobile-vue组件的区别以及迁移

旧组件库switch组件与list及field组件过于耦合，因此新组件单独做成一个纯粹的switch组件。

同时之前样式分为iOS和Android风格，现抽离成类型而非平台。

若要做迁移请参考

1. 弃用的props：h3style platform

2. 替换的props：

   • color => activeColor

3. 新增的props：loading control mode inactiveColor

Prop

属性	说明	类型	默认值
checked	是否选中，v-model绑定值	boolean	false
disabled	是否不可修改	boolean	false
activeColor	开关打开后的背景颜色	string	-
activeColor	开关关闭后的背景颜色	string	-
mode	设定组件样式风格, 可选值为 round rect	string	round
control	是否自行控制checked	boolean	false
loading	是否加载中	boolean	false

Event

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