开关 xSwitch

---

在线预览

在线模拟尺寸:

介绍

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

平台兼容

H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑️	☑️	☑️	☑️	4.44+	1.1.9

文件路径

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

使用

<x-switch></x-switch>

Props 属性

名称	说明	类型	默认值
color	激活时的背景色,空值时取全局的值。	string	""
bgColor	未激活时的背景	string	"info"
darkBgColor	未激活时的暗黑背景<br>空取inputDarkColor	string	""
btnColor	按钮的背景色	string	"white"
size	尺寸	string	"normal"
space	间隙，px单位	number	2
modelValue	当前打开的状态，默认为false<br>等同v-model=""	boolean	false
disabled	是否禁用	boolean	false
loading	是否加载中	boolean	false
label	开关文字数组第一个为开，后一个为关	string[]	() : 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="switch" 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>
	export default {
		data() {
			return {
				switch: true
			};
		},
		methods: {
			onchange(val : boolean) {
				console.log(val)
			}
		}
	}
</script>

<style lang="scss">

</style>