小鹅通组件

# Switch 开关

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

# 初始化

单独引入时：在入口js文件处引入

import { Switch } from '@xiaoe/sense'
import '@xiaoe/sense/static/index.css'
Vue.use(Switch)
1
2
3

# 效果

# 基本用法


<ss-switch v-model="isOpen"></ss-switch>
1

# 文字描述




<ss-switch
  v-model="isOpen1"
  inactive-color="#dcdfe6"
  inactive-text="已关闭"
  active-text="已开启"
  text-active-color="#2A75ED"
  text-inactive-color='#C2C2C2'
></ss-switch>

<ss-switch
  v-model="isOpen2"
  inactive-color="#FB6161"
  active-color="#2FCE63"
  inactive-text="已关闭"
  active-text="已开启"
  text-active-color="#2A75ED"
  text-inactive-color='#C2C2C2'
></ss-switch>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 禁用状态


# 文字描述类型




<ss-switch
  v-model="isOpen3"
  inactive-text="已关闭"
  active-text="已开启"
  text-num='1'
></ss-switch>

<ss-switch
  v-model="isOpen4"
  inactive-text="已关闭"
  active-text="已开启"
  text-num='2'
></ss-switch>
1
2
3
4
5
6
7
8
9
10
11
12
13

# 参数

参数 说明 类型 默认值 可选值
value value 值 Boolean / String / Number — —
disabled 是否禁用 Boolean false —
limit 是否需要判断可否开启/关闭开关 Boolean false —
width switch 的宽度（像素） Number 40 —
active-color switch 打开时的背景色 String — —
inactive-color switch 关闭时的背景色 String — —
active-text switch 打开时的文字描述 String — —
inactive-text switch 关闭时的文字描述 String — —
text-active-color switch 打开时文字描述的颜色 String — —
text-Inactive-color switch 关闭时文字描述的颜色 String — —
text-font-size switch 文字描述大小 Number 12 —
text-num switch 文字描述类型 Number 2 1,2

# 事件

事件名称 说明 回调参数
changeSwitch switch 状态发生变化时的回调函数 {objSwitch : 新状态的值}

← Tabs 标签页 →