uview-plus

# Switch 开关选择器

打开

选择开关用于在打开和关闭状态之间进行切换。

# 平台差异说明

App（vue） App（nvue） H5 小程序
√ √ √ √

# 基础使用

通过v-model绑定一个布尔值变量，这个变量是双向绑定的，当用户开或关选择器的时候，在父组件的该值也会相应的变为true或者false，也就是说， 您不用监听change事件，也能知道选择器当前处于开或者关的状态。

我们为其提供了加载中 禁用 自定义尺寸 自定义颜色 自定义样式 异步控制等六种能力，并在以下案例中为您展示

<template>
  <up-switch v-model="value" @change="change"></up-switch>
</template>

<script setup>
import { ref } from 'vue'

const value = ref(false)

const change = (e) => {
  console.log('change', e);
}
</script>

<template>
  <up-switch v-model="value" @change="change"></up-switch>
</template>

<script>
export default {
  data() {
    return {
      value: false
    };
  },
  methods: {
    change(e) {
      console.log('change', e);
    }
  }
};
</script>

# 加载中

设置loading属性，默认为true，可以让switch处于加载中的状态，这时switch是不可操作的，您可以通过:loading='loading'以动态设置加载状态

<template>
  <up-switch v-model="value3" loading></up-switch>
  <up-switch v-model="value4" loading></up-switch>
</template>

<script setup>
import { ref } from 'vue'

const value3 = ref(false)
const value4 = ref(true)
</script>

<template>
  <up-switch v-model="value3" loading></up-switch>
  <up-switch v-model="value4" loading></up-switch>
</template>

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

# 禁用switch

设置disabled属性,默认为true，即可禁用某个组件，让用户无法点击，禁用分为两种状态：

  • 一是关闭情况下的禁用，这时只显示一个白色的区域。
  • 二是打开后再禁用，这时会在原有的颜色上加一个opacity透明度，但此时依然是不可操作的。
<template>
  <up-switch v-model="value" disabled></up-switch>
</template>

<script setup>
import { ref } from 'vue'

const value = ref(false)
</script>

<template>
  <up-switch v-model="value" disabled></up-switch>
</template>

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

# 自定义尺寸

设置size属性，可以让您自定义switch的尺寸，单位为px

<template>
  <up-switch v-model="value3" size="28"></up-switch>
  <up-switch v-model="value4" size="20"></up-switch>
</template>

<script setup>
import { ref } from 'vue'

const value3 = ref(false)
const value4 = ref(true)
</script>

<template>
  <up-switch v-model="value3" size="28"></up-switch>
  <up-switch v-model="value4" size="20"></up-switch>
</template>

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

# 自定义颜色

设置activeColor属性，可以让您自定义switch的颜色，支持多种设置方式，如：activeColor="#f56c6c" activeColor="red" activeColor="rgb(0,0,0)"

<template>
  <up-switch v-model="value" activeColor="#f56c6c" loading></up-switch>
  <up-switch v-model="value1" activeColor="#5ac725" loading></up-switch>
</template>

<script setup>
import { ref } from 'vue'

const value = ref(true)
const value1 = ref(true)
</script>

<template>
  <up-switch v-model="value" activeColor="#f56c6c" loading></up-switch>
  <up-switch v-model="value1" activeColor="#5ac725" loading></up-switch>
</template>

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

# 自定义样式

同时设置activeColor和inactiveColor属性，可以让您自定义switch的样式，同样支持多种设置方式

<template>
  <up-switch space="2" v-model="value11" activeColor="#f9ae3d" inactiveColor="rgb(230, 230, 230)"></up-switch>
  <up-switch space="2" v-model="value12" activeColor="#f9ae3d" inactiveColor="rgb(230, 230, 230)"></up-switch>
</template>

<script setup>
import { ref } from 'vue'

const value11 = ref(false)
const value12 = ref(true)
</script>

<template>
  <up-switch space="2" v-model="value11" activeColor="#f9ae3d" inactiveColor="rgb(230, 230, 230)"></up-switch>
  <up-switch space="2" v-model="value12" activeColor="#f9ae3d" inactiveColor="rgb(230, 230, 230)"></up-switch>
</template>

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

# 异步控制

异步控制场景，一般发生在用户打开或者关闭选择器时，需要本地或者向后端请求判断，是否允许用户打开或者关闭的场景。
同时您也可以组合使用，例如根据接口结果添加disabled，loading属性等

注意

请添加asyncChange属性来支持异步控制操作，否则您将先操作v-model绑定的值，并失去控制效果

<template>
  <up-switch v-model="value13" asyncChange @change="asyncChange"></up-switch>
</template>

<script setup>
import { ref } from 'vue';

const value13 = ref(true);

const asyncChange = (e) => {
  uni.showModal({
    content: e ? '确定要打开吗' : '确定要关闭吗',
    success: (res) => {
      if (res.confirm) {
        value13.value = e;
      }
    },
  });
};
</script>

<template>
  <up-switch v-model="value13" asyncChange @change="asyncChange"></up-switch>
</template>

<script>
export default {
  data() {
    return {
      value13: true
    };
  },
  methods: {
    asyncChange(e) {
      uni.showModal({
        content: e ? '确定要打开吗' : '确定要关闭吗',
        success: (res) => {
          if (res.confirm) {
            this.value13 = e
          }
        }
      })
    }
  }
};
</script>

# 右侧演示页面源代码地址

点击以下链接以查看右侧演示页面的源码


 github  gitee

# API

# Switch Props

注意：需要给switch组件通过v-model绑定一个布尔值，来初始化switch的状态，随后该值被双向绑定， 当用打开选择器时，该值在switch组件内部被修改为true，并反映到父组件，否则为false，换言之，您无需监听switch的change事件，也能 知道某一个switch是否被选中的状态

参数 说明 类型 默认值 可选值
loading 是否处于加载中 Boolean false true
disabled 是否禁用 Boolean false true
size 开关尺寸，单位rpx String | Number 25 -
activeColor 打开时的背景色 String #2979ff -
inactiveColor 关闭时的背景色 String #ffffff -
modelValue 通过v-model双向绑定的值 Boolean | String | Number false -
activeValue switch打开时的值 Boolean | String | Number true -
inactiveValue switch关闭时的值 Boolean | String | Number false -
asyncChange 是否开启异步变更，开启后需要手动控制输入值 Boolean false true
space 圆点与外边框的距离 String | Number 0 -

# Switch Event

事件名 说明 回调参数
change 在switch打开或关闭时触发 value：打开时为activeValue值，关闭时为inactiveValue值
update:modelValue 在switch打开或关闭时触发（没开启异步） value：打开时为activeValue值，关闭时为inactiveValue值

← Slider 滑动选择器 →