SlugTeam

# Switch 开关

用于展示开关。

# 用法

# 基础用法

<template>
  <sui-switch v-model="switchValue"></sui-switch>
</template>

<script>
  export default {
    data() {
      return {
        switchValue: false,
      }
    },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

效果示例：

# 属性

# colors

  • 类型：Object
  • 用法：
<template>
  <sui-switch v-model="switchValue" :colors="{ 4: 'red' }"></sui-switch>
</template>

<script>
  export default {
    data() {
      return {
        switchValue: true,
      }
    },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

自定义主题色，优先级最高，可覆盖 默认主题 与 全局配置 设置的主题色，相关色号：4 8

效果示例：

# 指令

# v-model

  • 类型：Boolean
  • 用法：
<template>
  <sui-switch v-model="switchValue"></sui-switch>
</template>

<script>
  export default {
    data() {
      return {
        switchValue: true,
      }
    },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

双向绑定开关状态，效果示例：

← Toast 提示 →