c5_labsci/fapp/ciyon_ap/components/ciy-switch/ciy-switch.vue

<template>
	<view class="_switch" :class="{_disabled:disabled}" @tap="clickswitch(!this.tvalue)" :animation="anidatabg">
		<switch :name="name" :checked="tvalue" @change="chg" style="display:none;" />
		<view class="_y" :animation="anidatay">{{y}}</view>
		<view class="_n" :animation="anidatan">{{n}}</view>
		<ciy-gesture :pxlen="10" @toleft="gestureto(false)" @toright="gestureto(true)">
			<view class="_bn" :animation="anidatabn"></view>
		</ciy-gesture>
	</view>
</template>

<style scoped>
	@import '@/pages/demo/zdemo.css';

	._switch {
		display: inline-block;
		line-height: 2em;
		height: 2em;
		font-size: 1em;
		position: relative;
		border: 1px solid var(--e-switch-br);
		background: var(--e-switch-bg);
		color: var(--e-switch-txt);
		border-radius: 1em;
		overflow: hidden;
	}

	._switch._disabled {
		background: var(--bg4);
	}

	._switch ._n {
		position: relative;
		margin-top: -2em;
		margin-left: 2em;
		margin-right: 0.8em;
		color: var(--e-switch-txt);
		text-align: right;
	}

	._switch ._y {
		margin-right: 2em;
		margin-left: 0.8em;
		color: var(--e-switch-chktxt);
		opacity: 0;
	}

	._switch ._bn {
		position: absolute;
		top: 0;
		left: 0;
		width: 1.6em;
		height: 1.6em;
		margin: 0.1em;
		border-radius: 0.8em;
		background: var(--e-switch-bg);
		box-shadow: var(--e-switch-shadow);
	}

	._switch._disabled ._bn {
		background: var(--bg5);
	}
</style>

<script>
	import zmixin from '@/pages/demo/zmixin.js';
	export default {
		behaviors: ['uni://form-field-group'],
		emits: ['change', 'update:modelValue'],
		props: {
			name: {
				type: String
			},
			modelValue: {
				type: [String, Number, Boolean],
				default: -998
			},
			value: {
				type: [String, Number, Boolean],
				default: -998
			},
			disabled: {
				type: Boolean,
				default: false
			},
			initevent: {
				type: Boolean,
				default: false
			},
			y: { //选中文字
				type: String,
				default: ''
			},
			n: { //未选中文字
				type: String,
				default: ''
			},
			ms: { //动画毫秒数
				type: Number,
				default: 200
			}
		},
		data() {
			return {
				v: false,
				anidatabg: {},
				anidatay: {},
				anidatan: {},
				anidatabn: {},
			};
		},
		watch: {
			tvalue: {
				handler(newD, oldD) {
					if (this.v == 'modelValue' || this.v == 'value')
						this.ani();
				}
			},
			value: {
				handler(newD, oldD) {
					if (newD === -998)
						return;
					if (newD || oldD)
						this.v = 'value';
				},
				immediate: true
			},
			modelValue: {
				handler(newD, oldD) {
					if (newD === -998)
						return;
					if (newD || oldD)
						this.v = 'modelValue';
				},
				immediate: true
			}
		},
		computed: {
			tvalue() {
				if (this.v == 'modelValue') {
					if (typeof(this.modelValue) == 'boolean')
						return this.modelValue;
					else if (typeof(this.modelValue) == 'number')
						return this.modelValue != 0;
					else if (this.modelValue.toLowerCase() == 'true')
						return true;
					else
						return false;
				} else if (this.v == 'value') {
					if (typeof(this.value) == 'boolean')
						return this.value;
					else if (typeof(this.value) == 'number')
						return this.value != 0;
					else if (this.value.toLowerCase() == 'true')
						return true;
					else
						return false;
				}
				return this.v;
			}
		},
		mounted() {
			if (this.initevent) {
				this.$emit('change', {
					name: this.name,
					from: 'init',
					value: this.tvalue
				});
			}
			if (this.tvalue)
				this.ani();
		},
		methods: {
			chg(e) {
				this.clickswitch(!this.tvalue);
			},
			ani() {
				var query = uni.createSelectorQuery().in(this);
				query.select('._switch').boundingClientRect(data => {
					if (!data)
						return;
					var ln = data.width - data.height;
					var time = this.ms;
					var len = this.y.length > this.n.length ? this.y.length : this.n.length;
					len = 0;
					if (this.tvalue) {
						var animation = uni.createAnimation({});
						if (len > 0) {
							animation.translateX((ln / 2) + 'px');
							animation.translateY('4px');
							animation.scale(0.9);
							animation.step({
								duration: time / 2
							});
						}
						animation.translateX(ln + 'px');
						//animation.translateY(0);
						animation.scale(1);
						animation.step({
							duration: (len > 0 ? time / 2 : time)
						});
						this.anidatabn = animation.export();

						var animation = uni.createAnimation({});
						animation.backgroundColor(this.disabled ? 'var(--e-switch-chkbgdis)' : 'var(--e-switch-chkbg)');
						animation.step({
							duration: time
						});
						this.anidatabg = animation.export();
						var animation = uni.createAnimation({});
						animation.translateX('20px');
						animation.opacity(0);
						animation.step({
							duration: time
						});
						this.anidatan = animation.export();
						var animation = uni.createAnimation({});
						animation.opacity(1);
						animation.step({
							duration: time
						});
						this.anidatay = animation.export();
					} else {
						var animation = uni.createAnimation({});
						if (len > 0) {
							animation.translateX((ln / 2) + 'px');
							animation.translateY('-4px');
							animation.scale(0.9);
							animation.step({
								duration: time / 2
							});
						}
						animation.translateX(0);
						//animation.translateY(0);
						animation.scale(1);
						animation.step({
							duration: (len > 0 ? time / 2 : time)
						});
						this.anidatabn = animation.export();

						var animation = uni.createAnimation({});
						animation.backgroundColor(this.disabled ? 'var(--e-switch-br)' : 'var(--e-switch-bg)');
						animation.step({
							duration: time
						});
						this.anidatabg = animation.export();

						var animation = uni.createAnimation({});
						animation.opacity(1);
						animation.step({
							duration: time
						});
						this.anidatan = animation.export();
						var animation = uni.createAnimation({});
						animation.translateX('-20px');
						animation.opacity(0);
						animation.step({
							duration: time
						});
						this.anidatay = animation.export();
					}
				}).exec();
			},
			gestureto(chk) {
				if (chk == this.v)
					return;
				this.clickswitch(chk);
			},
			clickswitch(chk) {
				if (this.disabled)
					return;
				this.v = chk;
				this.ani();
				this.$emit('update:modelValue', this.tvalue);
				this.$emit('change', {
					name: this.name,
					from: 'input',
					value: this.tvalue
				});
			}
		}
	}
</script>