stellar-ui-v2 1.35.3

package/components/ste-touch-swipe/README.md

@@ -0,0 +1,104 @@
+# TouchSwipe 手势切屏
+手势切屏组件，支持水平手势切换和垂直手势切换。
+
+---$
+
+
+#### 水平切换，固定宽度
+- 外层使用`ste-touch-swipe`父标签包裹
+	- `index`属性设置当前激活区域，支持`sync`双向绑定
+	- `width`属性设置区域宽度，默认`100%`
+- 内层使用`ste-touch-swipe-item`子标签包裹每一块区域的内容
+
+
+```html
+<ste-touch-swipe width="690" :index.sync="hIndex">
+	<ste-touch-swipe-item v-for="(img, index) in imgs" :key="index">
+		<image :src="img" mode="widthFix" style="width: 100%" />
+	</ste-touch-swipe-item>
+</ste-touch-swipe>
+
+<script>
+export default {
+	data() {
+		return {
+			hIndex: 0,
+			imgs: [
+				'https://image.whzb.com/chain/StellarUI/image/img1.jpg',
+				'https://image.whzb.com/chain/StellarUI/image/img2.jfif',
+				'https://image.whzb.com/chain/StellarUI/image/img3.jpg',
+				'https://image.whzb.com/chain/StellarUI/image/img4.jpg',
+			],
+		};
+	},
+};
+</script>
+```
+#### 垂直切换，固定高度
+- 外层使用`ste-touch-swipe`父标签包裹
+	- `height`属性设置区域高度，默认`100%`
+- 内层使用`ste-touch-swipe-item`子标签包裹每一块区域的内容
+
+
+```html
+<ste-touch-swipe height="600" direction="vertical" :index.sync="vIndex">
+	<ste-touch-swipe-item v-for="(img, index) in imgs" :key="index">
+		<image :src="img" mode="heightFix" style="height: 100%" />
+	</ste-touch-swipe-item>
+</ste-touch-swipe>
+
+<script>
+export default {
+	data() {
+		return {
+			vIndex: 0,
+			imgs: [
+				'https://image.whzb.com/chain/StellarUI/image/img1.jpg',
+				'https://image.whzb.com/chain/StellarUI/image/img2.jfif',
+				'https://image.whzb.com/chain/StellarUI/image/img3.jpg',
+				'https://image.whzb.com/chain/StellarUI/image/img4.jpg',
+			],
+		};
+	}
+};
+</script>
+```
+
+
+---$
+### API
+### touch-swipe Props
+
+| 参数             | 说明                                                                                                                                                   | 类型              | 默认值       | 可选值                                                                      |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------- | ------------ | --------------------------------------------------------------------------- |
+| `index`          | 当前展示的面板索引，支持 sync 双向绑定                                                                                                                 | `Number`          | `0`          | -                                                                           |
+| `direction`      | 滑动方向                                                                                                                                               | `String`          | `horizontal` | `horizontal`:水平方向(必须固定宽度) <br />`vertical`:垂直方向(必须固定高度) |
+| `width`          | 宽度（单位 rpx）                                                                                                                                       | `String`/`Number` | `100%`       | -                                                                           |
+| `height`         | 高度（单位 rpx）                                                                                                                                       | `String`/`Number` | `100%`       | -                                                                           |
+| `duration`       | 动画时长（单位 s）                                                                                                                                     | `Number`          | `0.3`        | -                                                                           |
+| `swipeThreshold` | 灵敏度（0-1 之间的数值，数值越小越灵敏）                                                                                                               | `Number`          | `0.35`       | -                                                                           |
+| `disabled`       | 是否禁用                                                                                                                                               | `Boolean`         | `false`      | -                                                                           |
+| `childrenLength` | 子元素数量（使用 `touch-swipe-item` 作为子元素时不需要传递，不使用 `touch-swipe-item` 作为子元素盒子时必传）                                           | `Number`          | `0`          | -                                                                           |
+| `disabledIndexs` | 禁用的面板索引（使用 `touch-swipe-item` 作为子元素时直接在 `touch-swipe-item` 上定义某个标签禁用即可，不使用 `touch-swipe-item` 作为子元素盒子时可传） | `Array`           | `[]`         | -                                                                           |
+
+### touch-swipe Event
+
+| 事件名   | 说明         | 事件参数      |
+| -------- | ------------ | ------------- |
+| `change` | 滑动切换触发 | 最新的`index` |
+
+### touch-swipe Method
+
+| 事件名	| 说明															| 事件参数				|
+| --------| ------------										| -------------	|
+| `init`	| 初始化滑块信息，在渲染完成后调用	| -							|
+
+### touch-swipe-item Props
+
+| 参数       | 说明                                             | 类型      | 默认值  | 可选值 |
+| ---------- | ------------------------------------------------ | --------- | ------- | ------ |
+| `disabled` | 是否禁用当前子元素（禁用后无法滑动到当前子元素） | `Boolean` | `false` | ---    |
+
+
+---$
+{{xuyajun}}

package/components/ste-touch-swipe/TouchEvent.js

@@ -0,0 +1,72 @@
+export default class TouchEvent {
+	startX = null;
+	startY = null;
+	moveX = null;
+	moveY = null;
+	// 滑动的最小距离
+	minDis = 50;
+	timeout = null;
+
+	constructor(minDis = 50) {
+		this.minDis = minDis;
+	}
+
+	_getInfo(e) {
+		return e.changedTouches?.length ? e.changedTouches[0] : e;
+	}
+
+	// 滑动开始
+	touchStart(e) {
+		const { pageX, pageY } = this._getInfo(e);
+		this.startX = pageX;
+		this.startY = pageY;
+	}
+	touchMove(e) {
+		if (this.startX === null || this.startY === null) return null;
+		const { pageX, pageY } = this._getInfo(e);
+		const moveX = pageX - this.startX;
+		const moveY = pageY - this.startY;
+		if (Math.abs(moveX - this.moveX) < 1 && Math.abs(moveY - this.moveY) < 1) {
+			return null;
+		}
+		this.moveX = moveX;
+		this.moveY = moveY;
+
+		return { moveX, moveY };
+	}
+	// 滑动结束
+	touchEnd(e) {
+		if (this.startX === null || this.startY === null) {
+			return {
+				direction: null,
+				moveX: 0,
+				moveY: 0,
+			};
+		}
+		const { pageX, pageY } = this._getInfo(e);
+		const moveX = pageX - this.startX;
+		const moveY = pageY - this.startY;
+		this.startX = null;
+		this.startY = null;
+		this.moveX = null;
+		this.moveY = null;
+		let direction = null;
+
+		if (Math.abs(moveX) > Math.abs(moveY) && Math.abs(moveX) > this.minDis) {
+			if (moveX > 0) {
+				direction = 'right';
+			} else {
+				direction = 'left';
+			}
+		}
+		if (Math.abs(moveY) > Math.abs(moveX) && Math.abs(moveY) > this.minDis) {
+			if (moveY > 0) {
+				direction = 'down';
+			} else {
+				direction = 'up';
+			}
+		}
+
+		return { direction, moveX, moveY };
+	}
+}

package/components/ste-touch-swipe/ste-touch-swipe.vue

@@ -0,0 +1,327 @@
+<template>
+	<view class="ste-touch-swipe-root" :style="[cmpRootStyle]">
+		<view
+			class="content"
+			@mousedown="onTouchstart"
+			@mousemove="onTouchmove"
+			@mouseup="onTouchend"
+			@mouseleave="onTouchend"
+			@touchstart="onTouchstart"
+			@touchmove.stop="onTouchmove"
+			@touchend="onTouchend"
+			@touchcancel="onTouchend"
+		>
+			<view class="content-view" :style="[cmpBoxStyle, cmpTransform]">
+				<slot />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+import TouchEvent from './TouchEvent.js';
+import { parentMixin } from '../../utils/mixin.js';
+/**
+ * touch-swipe 手势切屏
+ * @description 手势切屏组件
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-touch-swipe
+ * @property {Number} 	index  当前展示的面板索引，支持sync双向绑定
+ * @property {String} 	direction  滑动方向
+ * @value horizontal 	（默认）水平方向：必须固定宽度
+ * @value vertical 		垂直方向：必须固定高度
+ * @property {String | Number} 	width 					宽度，默认值100%
+ * @property {String | Number} 	height 					高度，默认值100%
+ * @property {Number}						duration				动画时长，单位s
+ * @property {Number} 					swipeThreshold	灵敏度（0-1之间的数值，数值越小越灵敏）
+ * @property {Boolean} 					disabled				是否禁用
+ * @property {Number} 					childrenLength	面板数量（使用touch-swipe-item作为子元素时不需要传递，不使用touch-swipe-item作为子元素盒子时必传）
+ * @property {Array} 						disabledIndexs	禁用的面板索引（使用touch-swipe-item作为子元素时直接在touch-swipe-item上定义某个标签禁用即可，不使用touch-swipe-item作为子元素盒子时可传）
+ * */
+export default {
+	group: '导航组件',
+	title: 'TouchSwipe 手势切屏',
+	name: 'ste-touch-swipe',
+	mixins: [parentMixin('ste-touch-swipe')],
+	provide() {
+		return {
+			_flickPanel: { getParent: () => this },
+		};
+	},
+	props: {
+		// 当前展示的面板索引
+		index: {
+			type: [Number, null],
+			default: () => 0,
+		},
+		// 滑动方向  "horizontal" | "vertical"(水平方向时宽度必须固定，垂直方向时高度必须固定)
+		direction: {
+			type: [String, null],
+			default: () => 'horizontal',
+		},
+		width: {
+			type: [String, Number, null],
+			default: () => '100%',
+		},
+		height: {
+			type: [String, Number, null],
+			default: () => '100%',
+		},
+		// 动画时长
+		duration: {
+			type: [Number, null],
+			default: () => 0.3,
+		},
+		// 灵敏度（0-1之间的数值，数值越小越灵敏）
+		swipeThreshold: {
+			type: [Number, null],
+			default: () => 0.35,
+		},
+		// 是否禁用
+		disabled: {
+			type: [Boolean, null],
+			default: () => false,
+		},
+		// 面板数量（使用touch-swipe-item作为子元素时不需要传递，不使用touch-swipe-item作为子元素盒子时必传）
+		childrenLength: {
+			type: [Number, null],
+			default: () => 0,
+		},
+		// 禁用的面板索引（使用touch-swipe-item作为子元素时直接在touch-swipe-item上定义某个标签禁用即可，不使用touch-swipe-item作为子元素盒子时可传）
+		disabledIndexs: {
+			type: [Array, null],
+			default: () => [],
+		},
+	},
+	data() {
+		return {
+			initializing: true,
+			showNode: false,
+			boxEl: null,
+			touch: new TouchEvent(),
+			moveing: false,
+			translateX: 0,
+			translateY: 0,
+			dataIndex: 0,
+			dataChildrenLength: 0,
+			dataDisabledIndexs: [],
+			_timeout: null,
+		};
+	},
+
+	computed: {
+		cmpRootStyle() {
+			return {
+				'--touch-swipe-width': utils.formatPx(this.width),
+				'--touch-swipe-height': utils.formatPx(this.height),
+				opacity: this.showNode ? '1' : '0',
+			};
+		},
+		cmpChildrenLength() {
+			return this.childrenLength ? this.childrenLength : this.dataChildrenLength;
+		},
+		cmpDisabledIndexs() {
+			return this.disabledIndexs.length ? this.disabledIndexs : this.dataDisabledIndexs;
+		},
+		cmpBoxStyle() {
+			let style = {};
+			if (this.direction === 'horizontal') {
+				style.gridTemplateColumns = `repeat(${this.cmpChildrenLength || 'auto-fill'}, 100%)`;
+			} else if (this.direction === 'vertical') {
+				style.gridTemplateRows = `repeat(${this.cmpChildrenLength || 'auto-fill'}, 100%)`;
+			}
+			return style;
+		},
+		cmpTransform() {
+			this.$nextTick(() => {
+				if (!this.showNode) this.showNode = true;
+			});
+			let transform = '';
+			if (this.direction === 'horizontal') {
+				transform = `translateX(${this.translateX}px)`;
+			} else if (this.direction === 'vertical') {
+				transform = `translateY(${this.translateY}px)`;
+			}
+			return {
+				transform,
+				transitionDuration: this.initializing || this.moveing ? 'inherit' : `${this.duration}s`,
+			};
+		},
+		cmpItemLefts() {
+			const list = [];
+			if (!this.boxEl?.width) return list;
+			for (let i = 0; i < this.cmpChildrenLength; i++) {
+				list.push(this.boxEl.width * i);
+			}
+			return list;
+		},
+		cmpItemTops() {
+			const list = [];
+			if (!this.boxEl?.height) return list;
+			for (let i = 0; i < this.cmpChildrenLength; i++) {
+				list.push(this.boxEl.height * i);
+			}
+			return list;
+		},
+	},
+	watch: {
+		index: {
+			handler(v) {
+				if (this.dataIndex === v) return;
+				this.dataIndex = v;
+			},
+			immediate: true,
+		},
+		dataIndex() {
+			if (!this.cmpChildrenLength) return;
+			this.$nextTick(async () => {
+				await this.getBoxSize();
+				this.setTransform();
+			});
+		},
+		children() {
+			if (!this.cmpChildrenLength) return;
+			this.$nextTick(async () => {
+				await this.getBoxSize();
+			});
+		},
+		cmpItemLefts() {
+			if (!this.cmpChildrenLength) return;
+			this.$nextTick(async () => {
+				this.setTransform();
+			});
+		},
+	},
+	async mounted() {
+		await this.getBoxSize();
+		this.init();
+	},
+	methods: {
+		init() {
+			clearTimeout(this._timeout);
+			this.showNode = false;
+			this._timeout = setTimeout(() => {
+				if (this.dataChildrenLength !== this.children.length) this.dataChildrenLength = this.children.length;
+				let disabledIndexs = [];
+				this.children.forEach((m, i) => {
+					if (m.disabled) disabledIndexs.push(i);
+				});
+				let diff = this.dataDisabledIndexs.length !== disabledIndexs.length;
+				if (!diff) {
+					for (let i = 0; i < this.dataDisabledIndexs.length; i++) {
+						if (this.dataDisabledIndexs[i] !== disabledIndexs[i]) {
+							diff = true;
+							break;
+						}
+					}
+				}
+				if (diff) this.dataDisabledIndexs = disabledIndexs;
+				this.$nextTick(async () => {
+					await this.getBoxSize();
+					this.showNode = true;
+				});
+			}, 50);
+		},
+		async getBoxSize() {
+			if (this.boxEl && this.boxEl.width > 0 && this.boxEl.height > 0) return;
+			this.boxEl = await utils.querySelector('.ste-touch-swipe-root', this);
+		},
+		setTransform() {
+			if (!this.cmpItemLefts?.length) return;
+			if (this.direction === 'horizontal') {
+				this.translateX = -this.cmpItemLefts[this.dataIndex];
+			} else if (this.direction === 'vertical') {
+				this.translateY = -this.cmpItemTops[this.dataIndex];
+			}
+			if (this.initializing) {
+				setTimeout(() => {
+					this.initializing = false;
+				}, 50);
+			}
+		},
+		nextItem(moveX, moveY) {
+			let index = this.dataIndex;
+			if (this.direction === 'horizontal' && moveX !== 0) {
+				index = moveX > 0 ? index - 1 : index + 1;
+			} else if (this.direction === 'vertical' && moveY !== 0) {
+				index = moveY > 0 ? index - 1 : index + 1;
+			}
+			const disabled = this.cmpDisabledIndexs.indexOf(index) !== -1;
+			return [index, disabled];
+		},
+		swipeNext(moveX, moveY) {
+			if (this.direction === 'horizontal') {
+				return Math.abs(moveX) > this.boxEl.width * this.swipeThreshold;
+			} else if (this.direction === 'vertical') {
+				return Math.abs(moveY) > this.boxEl.height * this.swipeThreshold;
+			}
+		},
+		onTouchstart(e) {
+			if (this.disabled || !this.touch) return;
+			this.moveing = true;
+			this.getBoxSize();
+			this.touch.touchStart(e);
+		},
+		onTouchmove(e) {
+			if (this.disabled || this.duration === 0 || !this.touch || !this.moveing) return;
+			const res = this.touch.touchMove(e);
+			if (!res) return;
+			let { moveX, moveY } = res;
+			const [nextIndex, nextDisabled] = this.nextItem(moveX, moveY);
+			if (nextDisabled || nextIndex < 0 || nextIndex > this.cmpChildrenLength - 1) {
+				if (this.direction === 'horizontal') {
+					moveX = Math.floor(moveX / 4);
+				} else if (this.direction === 'vertical') {
+					moveY = Math.floor(moveY / 4);
+				}
+			}
+			if (this.direction === 'horizontal') {
+				this.translateX = -this.cmpItemLefts[this.dataIndex] + Math.floor(moveX);
+			} else if (this.direction === 'vertical') {
+				this.translateY = -this.cmpItemTops[this.dataIndex] + Math.floor(moveY);
+			}
+		},
+		onTouchend(e) {
+			if (this.disabled || !this.touch) return;
+			this.moveing = false;
+			const { moveX, moveY } = this.touch.touchEnd(e);
+			if (this.direction === 'horizontal' && !moveX) return;
+			else if (this.direction === 'vertical' && !moveY) return;
+			const [nextIndex, nextDisabled] = this.nextItem(moveX, moveY);
+			const isSwipeNext = this.swipeNext(moveX, moveY);
+			if (nextDisabled || !isSwipeNext || nextIndex < 0 || nextIndex > this.cmpChildrenLength - 1) {
+				if (this.direction === 'horizontal') {
+					this.$nextTick(() => {
+						this.translateX = -this.cmpItemLefts[this.dataIndex];
+					});
+				} else if (this.direction === 'vertical') {
+					this.$nextTick(() => {
+						this.translateY = -this.cmpItemTops[this.dataIndex];
+					});
+				}
+				return;
+			}
+			this.dataIndex = nextIndex;
+			this.$emit('update:index', nextIndex);
+			this.$emit('change', nextIndex);
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-touch-swipe-root {
+	width: var(--touch-swipe-width);
+	height: var(--touch-swipe-height);
+	.content {
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		.content-view {
+			width: 100%;
+			height: 100%;
+			display: grid;
+		}
+	}
+}
+</style>

package/components/ste-touch-swipe-item/ste-touch-swipe-item.vue

@@ -0,0 +1,33 @@
+<template>
+	<view class="ste-touch-swipe-item-root">
+		<slot />
+	</view>
+</template>
+
+<script>
+import { childMixin } from '../../utils/mixin.js';
+/**
+ * ste-touch-swipe-item 手势切屏
+ * @description 手势切屏组件
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-touch-swipe
+ * @property {Boolean} 	disabled  当前面板是否禁用
+ */
+export default {
+	name: 'ste-touch-swipe-item',
+	mixins: [childMixin('ste-touch-swipe')],
+	props: {
+		disabled: {
+			type: [Boolean, null],
+			default: () => false,
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-touch-swipe-item-root {
+	width: 100%;
+	height: 100%;
+	display: inline-block;
+}
+</style>