# Switch 开关

概述

Switch 开关选择器,原生组件增强。

# 支持平台

App-vue App-Nvue 微信小程序 支付宝小程序 钉钉小程序 百度小程序 字节小程序 QQ小程序 H5/PC

# 引入

以下介绍两种常用的引入方式。
第一种:在页面中引用、注册
import fuiSwitch from "@/components/firstui/fui-switch/fui-switch.vue"
export default {
	components:{
		fuiSwitch
	}
}
1
2
3
4
5
6
第二种:easycom组件规范
传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手

如果不了解easycom,可先查看 官网文档 (opens new window)

# 代码演示

部分示例演示,完整使用请参考示例程序以及文档API。
基础使用

通过 change 事件获取打开关闭状态。

<fui-switch @change="change"></fui-switch>
1
默认打开

通过 checked 属性设置是否默认打开。

<fui-switch checked></fui-switch>
1
改变大小、颜色

通过 scaleRatio 属性来缩放组件大小,color 属性修改打开后颜色。

<fui-switch :scaleRatio="0.8" color="#FFB703"></fui-switch>
1

# Slots

插槽名称 说明
- -

# Props

属性名 类型 说明 默认值 平台差异说明
name String 开关选择器名称 - -
checked Boolean 是否打开 false -
disabled Boolean 是否禁用 false -
type String 开关显示样式,有效值:switch, checkbox switch -
color String 开关打开时颜色 #465CFF 非Nvue端默认为空,可以通过css变量(--fui-color-primary)修改默认颜色值
borderColor String 边框颜色,type=checkbox时生效 #ccc -
checkMarkColor String 对号颜色,type=checkbox时生效 #fff -
scaleRatio Number, String 缩放比例 1 -

# Events

事件名 说明 回调参数
@change 开关切换状态时触发 event.detail={
  value:是否checked
}

示例预览

# 示例代码地址

FirstUISwitch 开关
Last Updated: 9/29/2022, 1:07:59 AM