简体中文
FxSwitch
约 671 字大约 2 分钟
2025-12-16
表示两种相互对立的状态间的切换,多用于触发「开/关」。
基本用法
<fx-switch
v-model="value">
</fx-switch>
<fx-switch
v-model="value"
size="medium"
tip="小提示小提示">
</fx-switch>
<fx-switch
v-model="value"
size="small">
</fx-switch>
<fx-switch
v-model="value"
size="mini"
active-color="#13ce66"
inactive-color="#ff4949">
</fx-switch>
<script>
export default {
data() {
return {
value: true
}
}
};
</script>文字描述
<fx-switch
v-model="value1"
active-text="按月付费"
inactive-text="按年付费">
</fx-switch>
<fx-switch
style="display: block"
v-model="value2"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="按月付费"
inactive-text="按年付费">
</fx-switch>
<script>
export default {
data() {
return {
value1: true,
value2: true
}
}
};
</script>扩展的 value 类型
<fx-tooltip :content="'Switch value: ' + value" placement="top">
<fx-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="100"
inactive-value="0">
</fx-switch>
</fx-tooltip>
<script>
export default {
data() {
return {
value: '100'
}
}
};
</script>禁用状态
<fx-switch
v-model="value1"
disabled>
</fx-switch>
<fx-switch
v-model="value2"
disabled>
</fx-switch>
<script>
export default {
data() {
return {
value1: true,
value2: false
}
}
};
</script>Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | PC/移动端支持情况 |
|---|---|---|---|---|---|
| value / v-model | 绑定值 | boolean / string / number | — | — | PC/移动端 |
| disabled | 是否禁用 | boolean | — | false | PC/移动端 |
| width | switch 的宽度(像素) | number | — | 40(移动端为52) | PC/移动端 |
| height | switch 的高度(像素) | number | — | 32 | 仅移动端 |
| active-icon-class | switch 打开时所显示图标的类名,设置此项会忽略 active-text | string | — | — | 仅PC |
| inactive-icon-class | switch 关闭时所显示图标的类名,设置此项会忽略 inactive-text | string | — | — | 仅PC |
| active-text | switch 打开时的文字描述 | string | — | — | 仅PC |
| inactive-text | switch 关闭时的文字描述 | string | — | — | 仅PC |
| active-value | switch 打开时的值 | boolean / string / number | — | true | 仅PC |
| inactive-value | switch 关闭时的值 | boolean / string / number | — | false | 仅PC |
| active-color | switch 打开时的背景色 | string | — | #409EFF | 仅PC |
| inactive-color | switch 关闭时的背景色 | string | — | #C0CCDA | 仅PC |
| name | switch 对应的 name 属性 | string | — | — | 仅PC |
| validate-event | 改变 switch 状态时是否触发表单的校验 | boolean | - | true | 仅PC |
| size | switch 组件尺寸 | string | medium / small / mini | — | 仅PC |
| tip | switch 组件鼠标hover时的小提示 | string | — | — | 仅PC |
Events
| 事件名称 | 说明 | 回调参数 | PC/移动端支持情况 |
|---|---|---|---|
| change | switch 状态发生变化时的回调函数 | 新状态的值 | PC/移动端 |
Methods
| 方法名 | 说明 | 参数 | PC/移动端支持情况 |
|---|---|---|---|
| focus | 使 Switch 获取焦点 | - | 仅PC |
