From f4991944d13b94355fb8aaf03dad7d60ca530ee9 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 30 Nov 2023 16:36:45 +0800
Subject: [PATCH] fix:是否修改

---
 uni_modules/uview-ui/components/u-switch/u-switch.vue |  177 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 177 insertions(+), 0 deletions(-)

diff --git a/uni_modules/uview-ui/components/u-switch/u-switch.vue b/uni_modules/uview-ui/components/u-switch/u-switch.vue
new file mode 100644
index 0000000..6f8577b
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-switch/u-switch.vue
@@ -0,0 +1,177 @@
+<template>
+	<view
+	    class="u-switch"
+	    :class="[disabled && 'u-switch--disabled']"
+	    :style="[switchStyle, $u.addStyle(customStyle)]"
+	    @tap="clickHandler"
+	>
+		<view
+		    class="u-switch__bg"
+		    :style="[bgStyle]"
+		>
+		</view>
+		<view
+		    class="u-switch__node"
+		    :class="[value && 'u-switch__node--on']"
+		    :style="[nodeStyle]"
+		    ref="u-switch__node"
+		>
+			<u-loading-icon
+			    :show="loading"
+			    mode="circle"
+			    timingFunction='linear'
+			    :color="value ? activeColor : '#AAABAD'"
+			    :size="size * 0.6"
+			/>
+		</view>
+	</view>
+</template>
+
+<script>
+	import props from './props.js';
+	/**
+	 * switch ���������������
+	 * @description ���������������������������������������������������������������������������
+	 * @tutorial https://www.uviewui.com/components/switch.html
+	 * @property {Boolean}						loading			������������������������������ false ���
+	 * @property {Boolean}						disabled		��������������������� false ���
+	 * @property {String | Number}				size			���������������������px ��������� 25 ���
+	 * @property {String}						activeColor		��������������������� ��������� '#2979ff' ���
+	 * @property {String} 						inactiveColor	��������������������� ��������� '#ffffff' ���
+	 * @property {Boolean | String | Number}	value			������v-model������������������ ��������� false ���
+	 * @property {Boolean | String | Number}	activeValue		������������������������change������������������ ��������� true ���
+	 * @property {Boolean | String | Number}	inactiveValue	������������������������change������������������ ��������� false ���
+	 * @property {Boolean}						asyncChange		��������������������������������������������������������������� ��������� false ���
+	 * @property {String | Number}				space			��������������������������� ��������� 0 ���
+	 * @property {Object}						customStyle		���������������������������������
+	 *
+	 * @event {Function} change ���switch������������������������
+	 * @example <u-switch v-model="checked" active-color="red" inactive-color="#eee"></u-switch>
+	 */
+	export default {
+		name: "u-switch",
+		mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
+		watch: {
+			value: {
+				immediate: true,
+				handler(n) {
+					if(n !== this.inactiveValue && n !== this.activeValue) {
+						uni.$u.error('v-model���������������������inactiveValue���activeValue������������')
+					}
+				}
+			}
+		},
+		data() {
+			return {
+				bgColor: '#ffffff'
+			}
+		},
+		computed: {
+			isActive(){
+				return this.value === this.activeValue;
+			},
+			switchStyle() {
+				let style = {}
+				// ���������������2������������������������������������������������node������������������������������
+				style.width = uni.$u.addUnit(this.size * 2 + 2)
+				style.height = uni.$u.addUnit(Number(this.size) + 2)
+				// style.borderColor = this.value ? 'rgba(0, 0, 0, 0)' : 'rgba(0, 0, 0, 0.12)'
+				// ������������������������������������������name���������������������������(������������������������)
+				// ������������������������������������������������������������������������������������������������������������
+				if(this.customInactiveColor) {
+					style.borderColor = 'rgba(0, 0, 0, 0)'
+				}
+				style.backgroundColor = this.isActive ? this.activeColor : this.inactiveColor
+				return style;
+			},
+			nodeStyle() {
+				let style = {}
+				// ������������������������������������node������������������������������������������������������������������������
+				style.width = uni.$u.addUnit(this.size - this.space)
+				style.height = uni.$u.addUnit(this.size - this.space)
+				const translateX = this.isActive ? uni.$u.addUnit(this.space) : uni.$u.addUnit(this.size);
+				style.transform = `translateX(-${translateX})`
+				return style
+			},
+			bgStyle() {
+				let style = {}
+				// ������������������������������������HTML������������������switch������������������������������������������������(���������������)
+				style.width = uni.$u.addUnit(Number(this.size) * 2 - this.size / 2)
+				style.height = uni.$u.addUnit(this.size)
+				style.backgroundColor = this.inactiveColor
+				// ���������������������������������������������
+				style.transform = `scale(${this.isActive ? 0 : 1})`
+				return style
+			},
+			customInactiveColor() {
+				// ���������������������������������������������������������������������������node���������������������������������������
+				return this.inactiveColor !== '#fff' && this.inactiveColor !== '#ffffff'
+			}
+		},
+		methods: {
+			clickHandler() {
+				if (!this.disabled && !this.loading) {
+					const oldValue = this.isActive ? this.inactiveValue : this.activeValue
+					if(!this.asyncChange) {
+						this.$emit('input', oldValue)
+					}
+					// ���������������������������������������������������value���������������������������������������������������
+					this.$nextTick(() => {
+						this.$emit('change', oldValue)
+					})
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.u-switch {
+		@include flex(row);
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		/* #endif */
+		position: relative;
+		background-color: #fff;
+		border-width: 1px;
+		border-radius: 100px;
+		transition: background-color 0.4s;
+		border-color: rgba(0, 0, 0, 0.12);
+		border-style: solid;
+		justify-content: flex-end;
+		align-items: center;
+		// ������weex���������������������KPI���������������bug������������������������������������
+		// ���������iOS���������������������������������������������switch���������������
+		overflow: hidden;
+
+		&__node {
+			@include flex(row);
+			align-items: center;
+			justify-content: center;
+			border-radius: 100px;
+			background-color: #fff;
+			border-radius: 100px;
+			box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.25);
+			transition-property: transform;
+			transition-duration: 0.4s;
+			transition-timing-function: cubic-bezier(0.3, 1.05, 0.4, 1.05);
+		}
+
+		&__bg {
+			position: absolute;
+			border-radius: 100px;
+			background-color: #FFFFFF;
+			transition-property: transform;
+			transition-duration: 0.4s;
+			border-top-left-radius: 0;
+			border-bottom-left-radius: 0;
+			transition-timing-function: ease;
+		}
+
+		&--disabled {
+			opacity: 0.6;
+		}
+	}
+</style>

--
Gitblit v1.8.0