低代码可视化-uniapp开关选择组件-低码生成器

开关（Switch）选择组件是一种用户界面元素，允许用户在两种状态（通常是开/关、是/否、启用/禁用等）之间进行切换。这种组件在移动应用、桌面软件、网页以及物联网设备中广泛应用。以下是对开关Switch选择组件的详细介绍：

一、基本概念

开关Switch选择组件通常由一个滑块和一个滑道组成。滑块是用户可以拖动的部分，而滑道是背景。用户可以通过拖动滑块或点按开关来改变其状态。

二、主要属性

状态：
- 表示开关的当前状态，通常是一个布尔值（true/false或1/0）。
状态改变回调：
- 当开关状态发生变化时调用的回调函数。
- 该函数通常接收一个新的状态值作为参数。
启用/禁用：
- 控制开关是否可用。
- 当设置为禁用状态时，用户无法更改开关的状态。
文本标签：
- 在某些实现中，可以为开关的打开和关闭状态设置文本标签。
- 这些标签通常用于提供更清晰的指示或说明。
颜色（colors）：
- 自定义开关的颜色，包括滑块和滑道的颜色。
- 某些框架允许为开关的不同状态（打开/关闭）设置不同的颜色。

三、组件扩展

基于uview类型的u-switch我们增加了有效文本、无效文本及颜色。扩展组件如下。

<template>
	<view
		class="u-switch"
		:class="[valueCom? 'u-switch--on' : '', disabled ? 'u-switch--disabled' : '']"
		@tap="onClick"
		:style="[switchStyle]"
	>
		<view
			class="u-switch__node node-class"
			:style="nodeStyle"
		>
			<u-loading
				:show="loading"
				class="u-switch__loading"
				:size="size * 0.6"
				:color="loadingColor"
			/>
		</view>
		<view v-if="activeText || inactiveText" class="u-switch__text" :class="{'u-switch__text-end':!valueCom}" >
			<text v-if="!valueCom" class="u-switch__text--inactive"  :style="{color:inactiveTextColor}">{
  
  { inactiveText }}</text>
			<text v-else class="u-switch__text--active" :style="{color:activeTextColor}">{
  
  { activeText }}</text>
		</view>
	</view>
</template>

<script>
/**
 * switch 开关选择器
 * @description 选择开关一般用于只有两个选择，且只能选其一的场景。
 * @tutorial https://www.uviewui.com/components/switch.html
 * @property {Boolean} loading 是否处于加载中（默认false）
 * @property {Boolean} disabled 是否禁用（默认false）
 * @property {String Number} size 开关尺寸，单位rpx（默认50）
 * @property {String} active-color 打开时的背景色（默认#19be6b）
 * @property {Boolean} inactive-color 关闭时的背景色（默认#ffffff）
 * @property {Boolean | Number | String} active-value 打开选择器时通过change事件发出的值（默认true）
 * @property {Boolean | Number | String} inactive-value 关闭选择器时通过change事件发出的值（默认false）
 * @event {Function} change 在switch打开或关闭时触发
 * @example <u-switch v-model="checked" active-color="red" inactive-color="#eee">