cczg-lottery-activity/uni_modules/zebra-swiper/components/z-swiper-item/z-swiper-item.vue

<template>
	<!-- #ifndef MP-WEIXIN || MP-QQ -->
	<view :class="['swiper-slide',slideClass]" :style="[itemStyle,customStyle]" @click.stop="onClickSlide">
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN || MP-QQ -->
		<view :class="['swiper-slide',slideClass]" :style="[itemStyle,customStyle]" @click.stop="onClickSlide"
			:swiperItemTransform="wxsItemTransform" :change:swiperItemTransform="zSwiperWxs.wxsItemTransformObserver">
			<!-- #endif -->
			<slot></slot>
		</view>
</template>
<!-- #ifdef MP-WEIXIN || MP-QQ  -->
<script src="../../wxs/z-swiper-wxs.wxs" module="zSwiperWxs" lang="wxs"></script>
<!-- #endif -->
<script>
	import {
		ChildrenMixin
	} from '../../libs/mixins/relation.js';
	import {
		getRect
	} from '../../libs/utils/utils.js';
	export default {
		name: "z-swipe-item",
		// #ifdef MP-WEIXIN
		options: {
			virtualHost: true
		},
		// #endif
		mixins: [ChildrenMixin('zSwipe')],
		props: {
			customStyle: {
				type: Object,
				default: () => {
					return {};
				}
			},
			swiperItemWidth: {
				type: [String, Number],
				default: 0
			},
			swiperItemHeight: {
				type: [String, Number],
				default: 0
			},
		},
		data() {
			return {
				wxsItemTransform: "",
				itemStyle: {},
				offsetLeft: 0,
				offsetTop: 0,
				itemClass: [],
				width: 0,
				height: 0,
			};
		},
		mounted() {
			this.getSize();
		},
		computed: {
			slideClass() {
				return this.itemClass.join(" ");
			}
		},
		watch: {
			swiperItemWidth: {
				handler(val) {
					if (val) {
						this.$set(this.itemStyle, 'width', this.unitFormat(val, "rpx"))
					}
				},
				immediate: true
			},
			swiperItemHeight: {
				handler(val) {
					if (val) {
						this.$set(this.itemStyle, 'height', this.unitFormat(val, "rpx"))
					}
				},
				immediate: true
			}
		},
		methods: {
			unitFormat(val, type) {
				if (type == "rpx") {
					if (val.includes("rpx") || val.includes("px")) {
						return val;
					} else {
						return val + 'px';
					}
				}
				if (type == "number") {
					if (val.includes("rpx")) {
						return uni.upx2px(parseInt(val.replace("rpx", "")))
					} else if (!val.includes("rpx") && val.includes("px")) {
						return parseInt(val.replace("px", ""))
					} else {
						return val;
					}
				}
			},
			onClickSlide(event) {
				this.$emit("click", {
					event,
					index: this.index
				});
				this.parent.swiper.updateClickedSlide(this.index);
				this.parent.swiper.emit("slideClick", this.index);
			},
			transform(value) {
				// #ifndef MP-WEIXIN || MP-QQ
				this.$set(this.itemStyle, 'transform', value)
				// #endif
				// #ifdef MP-WEIXIN || MP-QQ
				this.wxsItemTransform = value
				// #endif
			},
			transition(value) {
				// #ifdef MP-BAIDU
				this.$set(this.itemStyle, 'transitionDuration', `${value}ms`)
				// #endif
				// #ifndef MP-BAIDU
				this.$set(this.itemStyle, 'transition-duration', `${value}ms`)
				// #endif
			},
			willChange(value) {
				this.$set(this.itemStyle, 'will-change', value)
			},
			css(value) {
				Object.keys(value).forEach((item) => {
					this.$set(this.itemStyle, item, value[item])
				})
			},
			transitionEnd(callback, duration) {
				setTimeout(callback, duration)
			},
			getSize() {
				const query = uni.createSelectorQuery().in(this);
				return new Promise((resolve, reject) => {
					query.select('.swiper-slide').boundingClientRect(data => {
						if (this.swiperItemWidth) {
							this.width = this.unitFormat(this.swiperItemWidth, "number");
							this.height = data.height;
						}
						if (this.swiperItemHeight) {
							this.width = data.width;
							this.height = this.unitFormat(this.swiperItemHeight, "number");
						}
						if (!this.swiperItemWidth && !this.swiperItemHeight) {
							this.width = data.width;
							this.height = data.height;
						}
						resolve({
							width: this.width,
							height: this.height
						})
					}).exec();
				})
			},
			addClass(value) {
				this.itemClass = Array.from(new Set([...this.itemClass, ...value.split(" ")]));
			},
			removeClass(value) {
				this.itemClass = this.itemClass.filter(item => !value.split(" ").includes(item));
			},
			hasClass(value) {
				return this.itemClass.includes(value);
			},
			nextAll() {
				return this.parent.children.filter((item) => {
					return item.index > this.index
				})
			},
			prevAll() {
				return this.parent.children.filter((item) => {
					return item.index < this.index
				}).reverse()
			},
		}
	}
</script>

<style scoped lang="scss">
	@import '../../libs/core.scss';
</style>