Switch 开关

基础用法

<template>
  <plv-switch v-model="value" />
</template>

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

显示代码

文字描述

<template>
  <plv-switch
    active-text="开"
    inactive-text="关"
    v-model="value" />
</template>

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

显示代码

自定义颜色

<template>
  <plv-switch
    active-color="red"
    inactive-color="blue"
    v-model="value" />
</template>

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

显示代码

自定义绑定值

<template>
  <plv-switch
    active-value="Y"
    inactive-value="N"
    v-model="value" />
</template>

<script>
  export default {
    data() {
      return {
        value: 'N'
      };
    }
  };
</script>

显示代码

Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	Boolean String Number	-	-
disabled	是否禁用	Boolean	-	false
readonly	是否只读	Boolean	-	false
activeText	打开时的文字描述	String	-	-
inactiveText	关闭时的文字描述	String	-	-
activeValue	打开时的绑定值	Boolean String Number	-	true
inactiveValue	关闭时的绑定值	Boolean String Number	-	false
activeColor	打开时的背景色，支持全局配置	String	-	#2096F3
inactiveColor	关闭时的背景色，支持全局配置	String	-	#CCCCCC
size	尺寸	String	medium mini	-

Events

事件名称	说明	回调参数
change	在 Switch 状态改变时触发	新的值
open	在 Switch 打开时触发	-
close	在 Switch 关闭时触发	-