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

<template>
	<label style="min-width:auto;">
		<view class="_radio" :class="{_sq:sq,_disabled:disabled}" @tap="clickswitch(!this.tvalue)">
			<switch :name="name" :checked="tvalue" @change="chg" style="display:none;" />
			<view class="_bn" :class="{_checked:tvalue}" :animation="anidatabn"></view>
		</view>
		<slot></slot>
	</label>
</template>

<style scoped>
	._radio {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		flex-shrink: 0;
		height: 1.6em;
		width: 1.6em;
		margin: 0 0.3em;
		border-radius: 1em;
		background: var(--e-switch-bg);
		box-shadow: var(--e-switch-shadow);
	}

	._radio._disabled {
		background: var(--bg5);
	}

	._radio._sq {
		border-radius: 0.4em;
	}

	._radio._sq ._bn {
		border-radius: 0.4em;
	}

	._radio ._bn {
		position: relative;
		height: 100%;
		width: 100%;
		border-radius: 1em;
		background: var(--e-switch-chkbg);
		opacity: 0.05;
		transform: scale(0.6);
	}

	._radio._disabled ._bn {
		background: var(--e-switch-chkbgdis);
	}

	._radio ._bn._checked {
		box-shadow: var(--e-switch-shadow);
		opacity: 1;
	}
</style>

<script>
	export default {
		behaviors: ['uni://form-field-group'],
		emits: ['update:modelValue', 'change'],
		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
			},
			ms: { //动画毫秒数
				type: [String, Number],
				default: 200
			},
			sq: { //方形
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				v: '',
				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: {
			ani() {
				var time = this.toint(this.ms);
				if (this.tvalue) {
					var animation = uni.createAnimation({});
					animation.opacity(0.3);
					animation.scale(1.1);
					animation.step({
						duration: time / 2
					});
					animation.opacity(1);
					animation.scale(0.6);
					animation.step({
						duration: time / 2
					});
					this.anidatabn = animation.export();
				} else {
					var animation = uni.createAnimation({});
					animation.opacity(0.8);
					animation.scale(0.2);
					animation.step({
						duration: time / 2
					});
					animation.scale(0.6);
					animation.opacity(0.05);
					animation.step({
						duration: time
					});
					this.anidatabn = animation.export();
				}
			},
			chg(e) {
				this.clickswitch(!this.tvalue);
			},
			clickswitch(chk) {
				if (this.disabled)
					return;
				if (!chk && !this.sq)
					return;
				var time = this.toint(this.ms);
				if (time < 500)
					time = 500;
				if (new Date().getTime() - this._time < time)
					return;
				this._time = new Date().getTime();
				this.v = chk;
				this.ani();
				this.$emit('update:modelValue', chk);
				this.$emit('change', {
					name: this.name,
					from: 'input',
					value: chk
				});
			}
		}
	}
</script>