Switch

基础渲染

<template>
  <d-switch :active="active"/>
</template>

<script>
  export default {
    data () {
      return {
        active: true
      }
    }
  };
</script>

禁用状态

<template>
  <d-switch :active="false" disabled @switch-on="switchOn" @switch-off="switchOff"/>
</template>

<script>
  export default {
    methods: {
      switchOn() {
        alert('hello');
      },

      switchOff() {
        alert('hello');
      },
    },
  };
</script>

change 事件

<template>
  <d-switch :active="false" @switch-on="switchOn" @switch-off="switchOff"/>
</template>

<script>
  export default {
    methods: {
      switchOn(value) {
        console.log('on', value);
      },

      switchOff(value) {
        console.log('off', value);
      },
    },
  };
</script>

自定义颜色

<template>
  <d-switch active-bg-color="#9ABB82" in-active-bg-color="#EAE7E2" btn-color="#CBDDDD"/>
</template>

<script>
  export default {};
</script>

API

属性

名称	说明	类型	默认值
active	开关状态	boolean	false
disabled	禁用状态	boolean	false
height	组件高度，单位px	string | number	24
width	组件宽度，单位px	string | number	46
activeBgColor	打开状态背景颜色	string	#18B2B9
inActiveBgColor	关闭状态背景颜色	string	#CCCCCC
btnColor	滑动圆按钮颜色	string	#FFFFFF

插槽

无

事件

名称	说明	参数
switch-on	开关打开时触发	名称 说明 类型 e 回调参数 boolean
switch-off	开关关闭时触发	名称 说明 类型 e 回调参数 boolean

贡献者

无