嘟嘟云A sass ui框架

# Switch 开关

表示两种相互对立的状态间的切换，多用于触发「开/关」。

# 基本用法

  • 绑定v-model到一个Boolean类型的变量。
<db-switch v-model="value">
</db-switch>

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

# 自定义背景

  • 可以使用active-color属性与inactive-color属性来设置开关的背景色。
<db-switch
  v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949">
</db-switch>

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

# 设置icon

  • 通过设置mode为icon来设置icon模式

  • active-icon 可以设置开的时候icon, inactive-icon可以设置关闭的时候icon

<db-switch v-model="value" mode="icon">
</db-switch>

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

# 设置文本

  • 通过设置mode为text来设置text模式

  • active-text 可以设置开的时候text, inactive-text可以设置关闭的时候text

<db-switch v-model="value" mode="text">
</db-switch>

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

# 自定义开关取值

  • active-value 可以设置开的时候值, inactive-value可以设置关闭的时候值
<db-switch v-model="value"  active-value="1" inactive-value="2">
</db-switch>

<script>
  export default {
    data() {
      return {
        value: "1"
      }
    }
  };
</script>
Expand Copy

# 禁用状态

  • 通过设置disabled为true禁用开关
<db-switch v-model="value" disabled>
</db-switch>

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

# Attributes

参数 说明 类型 可选值 默认值
value / v-model 绑定值 boolean / string / number — —
disabled 是否禁用 boolean — false
active-value switch 打开时的值 boolean / string / number — true
inactive-value switch 关闭时的值 boolean / string / number — false
active-color switch 打开时的背景色 string — #409EFF
inactive-color switch 关闭时的背景色 string — #C0CCDA

# Events

事件名称 说明 回调参数
change switch 状态发生变化时的回调函数 新状态的值

← 计数器 input-number →