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>

显示代码

尺寸

<template>
  <div class="demo-switch">
    <plv-switch v-model="value" />
    <plv-switch v-model="value" size="medium" />
    <plv-switch v-model="value" size="mini" />
  </div>
</template>

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

<style lang="scss" scoped>
.demo-switch {
  display: flex;
  align-items: center;
  .plv-switch {
    margin-right: 6px;
  }
}
</style>

显示代码

加载状态

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

<script>
  export default {
    data() {
      return {
        value: false,
        value1: true
      }
    }
  }
</script>

显示代码

阻止切换

设置 beforeChange 属性，若返回 false 或返回 Promise 且被 reject 则阻止切换

<template>
  <plv-switch v-model="value" :loading="loading" :beforeChange="beforeChange"/>
</template>
<script>
export default {
  data() {
    return {
      value: false,
      loading: false
    }
  },
  methods: {
    beforeChange() {
      this.loading = true;
      return new Promise((resolve) => {
        setTimeout(() => {
          this.loading = false
          return resolve(true)
        }, 1000)
      })
    }
  }
}
</script>

显示代码

Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	Boolean String Number	-	-
disabled	是否禁用	Boolean	-	false
readonly	是否只读	Boolean	-	false
loading	是否显示加载中	Boolean	-	false
activeText	打开时的文字描述	String	-	-
inactiveText	关闭时的文字描述	String	-	-
activeValue	打开时的绑定值	Boolean String Number	-	true
inactiveValue	关闭时的绑定值	Boolean String Number	-	false
activeColor	打开时的背景色，支持全局配置	String	-	#2096F3
inactiveColor	关闭时的背景色，支持全局配置	String	-	#BEC2CA
size	尺寸	String	medium mini	-
beforeChange	switch状态改变前的钩子，返回false或返回Promise且被 reject 则停止切换	boolean/Function	-	-

Events

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