Rainui

Appearance

r-switch ​

r-switch 开关，用于在打开和关闭状态之间进行切换。

示例 ​

vue
<template>
  <view class="content">
    <!-- <r-badge :content="20" /> -->

    <r-config-provider>
      <view style="padding: 20px">基础使用</view>
      <r-switch v-model:value="checked" />

      <view style="padding: 20px">基础使用</view>
      <r-switch v-model:value="checked" disabled />
      <view style="padding: 20px">加载状态</view>
      <r-switch v-model:value="checked" loading />
      <view style="padding: 20px">自定义大小</view>
      <r-switch v-model:value="checked" size="22px" />
      <view style="padding: 20px">自定义颜色</view>
      <r-switch
        v-model:value="checked"
        active-color="#ee0a24"
        inactive-color="#dcdee0"
      />
      <view style="padding: 20px">自定义按钮</view>
      <r-switch v-model:value="checked">
        <template #node>
          <div class="icon-wrapper">
            <r-icon
              size="36rpx"
              :color="checked ? 'var(--r-blue)' : 'var(--r-gray-5)'"
              :name="checked ? 'success' : 'cross'"
            />
          </div>
        </template>
      </r-switch>

      <view style="padding: 20px">搭配单元格使用</view>
      <r-cell center title="标题">
        <template #rightIcon>
          <r-switch v-model:value="checked" />
        </template>
      </r-cell>
      <view style="padding: 20px"></view>
    </r-config-provider>
  </view>
</template>
<script setup>
import { ref } from "vue";
const checked = ref(false);
</script>
<style>
.icon-wrapper {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  font-size: 36rpx;
}
</style>

API ​

Props ​

名称说明类型默认值可选值
value开关选中状态anyfalse-
loading是否为加载状态Booleanfalsetrue
disabled是否为禁用状态Booleanfalsetrue
size开关按钮的尺寸String52rpx
activeColor打开时的背景色String#1989fa
inactiveColor关闭时的背景色Stringrgba(120, 120, 128, 0.16)
activeValue打开时对应的值anytrue
inactiveValue关闭时对应的值anyfalse
themeNamer-theme 的主题名称Stringdefault

Slots ​

名称说明
node自定义按钮的内容
background自定义开关的背景内容

Events ​

名称说明回调参数
update:value开关状态切换时触发value
change开关状态切换时触发value

更多组件，请前往rainui