开关 xSwitch

---

在线预览

在线模拟尺寸:

介绍

开关，用于直观的展示选项表单的选择。

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.76+	1.1.18

文件路径

@/uni_modules/tmx-ui/components/x-switch/x-switch.uvue

使用

<x-switch></x-switch>

Props 属性

名称	说明	类型	默认值
color	激活时的背景色,空值时取全局的值。	string	""
bgColor	未激活时的背景	string	"info"
darkBgColor	未激活时的暗黑背景 空取inputDarkColor	string	""
btnColor	按钮的背景色	string	"white"
size	尺寸	union	"normal"
space	间隙，px单位	number	2
modelValue	当前打开的状态，默认为false 等同v-model=""	boolean	false
disabled	是否禁用	boolean	false
loading	是否加载中	boolean	false
label	开关文字数组第一个为开，后一个为关	Array	[] as string[]
round	圆角。空值时取全局值。	string	""
activeIcon	激活时的按钮图标，不提供不显示	string	""
icon	未激活时的图标，不提供不显示	string	""

Events 事件

名称	参数	说明
change	status: boolean	状态变换时触发。
click	status: boolean	组件被点击时触发。
update:modelValue	-	等同v-model=""

Slots 插槽

名称	说明	数据

Ref 方法

名称	参数	返回值	说明

示例文件路径

/pages/biaodan/switch

示例源码

uvue

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">开关 Switch</x-text>
			<x-text  color="#999999" >样式可全局配置，统一修改风格</x-text>
		</x-sheet>
		<x-sheet class="flex flex-row">
			<x-switch size="small"></x-switch>
			<x-switch class="mx-16"></x-switch>
			<x-switch activeIcon="verified-badge-fill" icon="verified-badge-line" 
			@change="onchange" v-model="switchs" size="large"></x-switch>
		</x-sheet>

		<x-sheet>
			<x-text font-size="18" class=" text-weight-b">显示内文字</x-text>
		</x-sheet>
		<x-sheet class="flex flex-row">
			<x-switch :label='["开","关"]'></x-switch>
			<x-switch class="mx-16" :label='["ON","OFF"]'></x-switch>
		</x-sheet>

		<x-sheet>
			<x-text font-size="18" class=" text-weight-b">修改颜色</x-text>
		</x-sheet>
		<x-sheet class="flex flex-row">
			<x-switch :modelValue="true" color="danger"></x-switch>
			<x-switch :modelValue="true" class="mx-16" color="success"></x-switch>
			<x-switch :modelValue="true" color="error"></x-switch>
		</x-sheet>

		<x-sheet>
			<x-text font-size="18" class=" text-weight-b">状态</x-text>
		</x-sheet>
		<x-sheet class="flex flex-row">
			<x-switch :modelValue="true" :disabled="true"></x-switch>
			<x-switch :modelValue="true" class="mx-16" :loading="true"></x-switch>
		</x-sheet>

		<x-sheet>
			<x-text font-size="18" class=" text-weight-b">圆角风格,及修改间隙</x-text>
		</x-sheet>
		<x-sheet class="flex flex-row">
			<x-switch round="4" :space="3"></x-switch>
			<x-switch round="20" class="mx-16"></x-switch>
		</x-sheet>

		<view class="py-20"></view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	const switchs = ref(true)
	const onchange = (val : boolean) => {
		console.log(val)
	}
</script>
<style lang="scss">

</style>