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