stellar-ui-v2 1.40.26 → 1.40.27

package/components/ste-index-item/ste-index-item.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="ste-scroll-to-item-root" data-test="index-item">
+	<view class="ste-index-item-root" data-test="index-item">
 		<slot name="title">
 			<block v-if="title">
 				<ste-sticky v-if="sticky">
@@ -10,7 +10,8 @@
 		</slot>
 		<slot>
 			<view class="index-item-text-list">
-				<view class="index-item-text" data-test="index-item-text" v-for="(text, i) in list" :key="i" @click="onClickItem(text)">
+				<view class="index-item-text" data-test="index-item-text" v-for="(text, i) in list" :key="i"
+					@click="onClickItem(text)">
 					{{ text }}
 				</view>
 			</view>
@@ -30,7 +31,7 @@ import { childMixin } from '../../utils/mixin.js';
  */
 export default {
 	name: 'ste-index-item',
-	mixins: [childMixin('ste-index-list')],
+	mixins: [childMixin('ste-index-list', ['setActive', 'getView'])],
 	props: {
 		title: {
 			type: [String, null],
@@ -59,12 +60,15 @@ export default {
 		onClickItem(item) {
 			this.parent.onClickItem(this.title, item);
 		},
+		async getView() {
+			return await utils.querySelector('.ste-index-item-root', this)
+		}
 	},
 };
 </script>
 
 <style lang="scss" scoped>
-.ste-scroll-to-item-root {
+.ste-index-item-root {
 	width: 100%;
 
 	.index-item-title {
@@ -96,4 +100,5 @@ export default {
 			border-bottom: 2rpx solid #f9f9f9;
 		}
 	}
-}</style>
+}
+</style>

package/components/ste-scroll-to/mixin.js

@@ -55,6 +55,7 @@ export default {
 		},
 		childrenTops() {
 			if (!this.children.length) return;
+			if (this.scrollType === 'active') return;
 			this.scrollType = 'init';
 			this.setScrollTopByIndex(this.dataActive);
 		},
@@ -89,8 +90,8 @@ export default {
 				const childrenTops = [];
 				for (let i = 0; i < this.children.length; i++) {
 					const comp = this.children[i];
-					const child = await utils.querySelector('.ste-scroll-to-item-root', comp);
-					const top = child.top - box.top;
+					const childView = await comp.getView();
+					const top = childView.top - box.top;
 					childrenTops.push(top > max + 10 ? max + 10 : top);
 				}
 				let diff = this.childrenTops.length !== childrenTops.length;

package/components/ste-scroll-to/ste-scroll-to.vue

@@ -11,10 +11,6 @@
 import { parentMixin } from '../../utils/mixin.js';
 import mixin from './mixin.js';
 
-function isNum(num) {
-	return typeof num === 'number' && !isNaN(num);
-}
-
 /**
  * ste-scroll-to 滚动锚点
  * @description 滚动锚点

package/components/ste-scroll-to-item/ste-scroll-to-item.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script>
-import utils from '../../utils/utils.js';
 import { childMixin } from '../../utils/mixin.js';
+import utils from '../../utils/utils.js';
 /**
  * ste-scroll-to-item 锚点项
  * @description 锚点项
@@ -14,7 +14,12 @@ import { childMixin } from '../../utils/mixin.js';
  */
 export default {
 	name: 'ste-scroll-to-item',
-	mixins: [childMixin('ste-scroll-to')],
+	mixins: [childMixin('ste-scroll-to', ['getView'])],
+	methods: {
+		async getView() {
+			return await utils.querySelector('.ste-scroll-to-item-root', this)
+		}
+	}
 };
 </script>
 

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

@@ -59,7 +59,7 @@ export default {
 	group: '展示组件',
 	title: 'SwipeAction 滑动单元格',
 	name: 'ste-swipe-action',
-	mixins: [childMixin('ste-swipe-action-group')],
+	mixins: [childMixin('ste-swipe-action-group', ['open', 'close', 'onchange'])],
 	props: {
 		mode: {
 			type: [String, null],
@@ -129,7 +129,7 @@ export default {
 			};
 		},
 	},
-	mounted() { },
+	mounted() {},
 	methods: {
 		/**
 		 * 打开侧滑

package/components/ste-swiper-item/ste-swiper-item.vue

@@ -5,66 +5,60 @@
 </template>
 
 <script>
-	/**
-	 * ste-swiper 轮播
-	 * @description 轮播组件
-	 * @tutorial https://stellar-ui.intecloud.com.cn/?projectName=stellar-ui&menu=%E7%BB%84%E4%BB%B6&active=ste-swiper
-	 * */
-	import {
-		childMixin
-	} from '../../utils/mixin.js';
-	export default {
-		name: 'ste-swiper-item',
-		mixins: [childMixin('ste-swiper')],
-		data() {
+/**
+ * ste-swiper 轮播
+ * @description 轮播组件
+ * @tutorial https://stellar-ui.intecloud.com.cn/?projectName=stellar-ui&menu=%E7%BB%84%E4%BB%B6&active=ste-swiper
+ * */
+import { childMixin } from '../../utils/mixin.js';
+export default {
+	name: 'ste-swiper-item',
+	mixins: [childMixin('ste-swiper', ['setTransform', 'setLinearScale'])],
+	data() {
+		return {
+			transformX: 0,
+			transformY: 0,
+			transformZ: 0,
+			linearScale: 1,
+		};
+	},
+	computed: {
+		cmpStyle() {
 			return {
-				transformX: 0,
-				transformY: 0,
-				transformZ: 0,
-				linearScale: 1,
+				transform: `translate3d(${this.transformX}px,${this.transformY}px,${this.transformZ}px) scale(${this.linearScale})`,
+				transformOrigin: 'center center',
 			};
 		},
-		computed: {
-			cmpStyle() {
-				return {
-					transform: `translate3d(${this.transformX}px,${this.transformY}px,${this.transformZ}px) scale(${this.linearScale})`,
-					transformOrigin: 'center center',
-				};
-			},
+	},
+	methods: {
+		setTransform({ x = 0, y = 0, z = 0 }) {
+			if (this.transformX !== x) this.transformX = x;
+			if (this.transformY !== y) this.transformY = y;
+			if (this.transformZ !== z) this.transformZ = z;
 		},
-		methods: {
-			setTransform({
-				x = 0,
-				y = 0,
-				z = 0
-			}) {
-				if (this.transformX !== x) this.transformX = x;
-				if (this.transformY !== y) this.transformY = y;
-				if (this.transformZ !== z) this.transformZ = z;
-			},
-			setLinearScale(scale) {
-				this.linearScale = scale;
-			},
+		setLinearScale(scale) {
+			this.linearScale = scale;
 		},
-	};
+	},
+};
 </script>
 
 <style>
-	.ste-swiper-item-root {
-		width: 100%;
-		height: 100%;
-		/* 添加此行以确保在循环播放时不会出现闪烁 */
-		will-change: transform;
-		/* 隐藏背面，避免翻转时闪烁 */
-		backface-visibility: hidden;
-		/* CSS containment 优化 */
-		contain: layout style paint;
-		/* 抗锯齿 */
-		-webkit-font-smoothing: antialiased;
-		-moz-osx-font-smoothing: grayscale;
-		/* 优化图像渲染 */
-		image-rendering: -webkit-optimize-contrast;
-		/* 确保子元素也使用硬件加速 */
-		transform-style: flat;
-	}
-</style>
+.ste-swiper-item-root {
+	width: 100%;
+	height: 100%;
+	/* 添加此行以确保在循环播放时不会出现闪烁 */
+	will-change: transform;
+	/* 隐藏背面，避免翻转时闪烁 */
+	backface-visibility: hidden;
+	/* CSS containment 优化 */
+	contain: layout style paint;
+	/* 抗锯齿 */
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	/* 优化图像渲染 */
+	image-rendering: -webkit-optimize-contrast;
+	/* 确保子元素也使用硬件加速 */
+	transform-style: flat;
+}
+</style>

package/components/ste-tab/ste-tab.vue

@@ -5,7 +5,6 @@
 </template>
 
 <script>
-import utils from '../../utils/utils.js';
 import { childMixin } from '../../utils/mixin.js';
 /**
  * ste-tab 标签页选项
@@ -67,14 +66,46 @@ export default {
 			default: () => false,
 		},
 	},
+	data() {
+		return {};
+	},
 	watch: {
-		$props: {
-			handler() {
-				this.$nextTick(() => {
-					this.parent.getChildrenProps();
-				});
-			},
-			deep: true,
+		title() {
+			this.updateParent();
+		},
+		subTitle() {
+			this.updateParent();
+		},
+		image() {
+			this.updateParent();
+		},
+		name() {
+			this.updateParent();
+		},
+		index() {
+			this.updateParent();
+		},
+		disabled() {
+			this.updateParent();
+		},
+		showDot() {
+			this.updateParent();
+		},
+		badge() {
+			this.updateParent();
+		},
+		showZeroBadge() {
+			this.updateParent();
+		},
+	},
+	onMounted() {
+		this.updateParent();
+	},
+	methods: {
+		updateParent() {
+			if (this.parent && typeof this.parent.getChildrenProps === 'function') {
+				this.parent.getChildrenProps();
+			}
 		},
 	},
 };

package/components/ste-table/ste-table.vue

@@ -15,13 +15,7 @@
 						<ste-icon code="&#xe6ae;" :color="selectionIconColor.disabled || selectionColor.disabled" :size="checkIconSize" v-if="canCheckStates.length === 0" />
 						<template v-else>
 							<ste-icon code="&#xe6ac;" :color="selectionIconColor.main || selectionColor.main" :size="checkIconSize" v-if="checkAllState == 'all'" @click="changeCheckAll" />
-							<ste-icon
-								code="&#xe6ad;"
-								:color="selectionIconColor.main || selectionColor.main"
-								:size="checkIconSize"
-								v-else-if="checkAllState == 'indeterminate'"
-								@click="changeCheckAll"
-							/>
+							<ste-icon code="&#xe6ad;" :color="selectionIconColor.main || selectionColor.main" :size="checkIconSize" v-else-if="checkAllState == 'indeterminate'" @click="changeCheckAll" />
 							<ste-icon code="&#xe6af;" :color="selectionIconColor.unSelected || selectionColor.unSelected" :size="checkIconSize" v-else @click="changeCheckAll" />
 						</template>
 					</view>
@@ -33,14 +27,7 @@
 			<template v-if="height || height > 0">
 				<scroll-view scroll-y class="ste-table-scroll" @scrolltolower="handleScrollToLower">
 					<view class="ste-table-body">
-						<view
-							class="ste-table-row"
-							:class="[getRowClass(row, rowIndex)]"
-							:style="[getRowStyle(row, rowIndex)]"
-							v-for="(row, rowIndex) in tableData"
-							:key="rowIndex"
-							@click="rowClick(row, $event)"
-						>
+						<view class="ste-table-row" :class="[getRowClass(row, rowIndex)]" :style="[getRowStyle(row, rowIndex)]" v-for="(row, rowIndex) in tableData" :key="rowIndex" @click="rowClick(row, $event)">
 							<slot :row="row"></slot>
 						</view>
 						<view class="ste-table-row sum" v-if="showSummary">
@@ -58,14 +45,7 @@
 			</template>
 			<template v-else>
 				<view class="ste-table-body">
-					<view
-						class="ste-table-row"
-						:class="[getRowClass(row, rowIndex)]"
-						:style="[getRowStyle(row, rowIndex)]"
-						v-for="(row, rowIndex) in tableData"
-						:key="rowIndex"
-						@click="rowClick(row, $event)"
-					>
+					<view class="ste-table-row" :class="[getRowClass(row, rowIndex)]" :style="[getRowStyle(row, rowIndex)]" v-for="(row, rowIndex) in tableData" :key="rowIndex" @click="rowClick(row, $event)">
 						<slot :row="row"></slot>
 					</view>
 					<view class="ste-table-row sum" v-if="showSummary">
@@ -295,7 +275,7 @@ export default {
 				const rowIndex = Math.floor(index / colNums); // 计算出当前元素属于哪一行
 				const colIndex = index % colNums; // 计算出当前元素属于哪一列
 				const row = this.tableData[rowIndex];
-				child.row = { ...row, rowIndex, colIndex };
+				child.setRow({ ...row, rowIndex, colIndex });
 			});
 		},
 		initColumns(childs) {

package/components/ste-table-column/ste-table-column.vue

@@ -2,20 +2,10 @@
 	<view class="ste-table-cell" :class="[cmpRootClass]" :style="[cmpRootStyle, cmpCellStyle]" @click="cellClick">
 		<template v-if="type">
 			<view class="cell-box" v-if="type == 'checkbox'" @click.stop="changeCheck">
-				<check-box-icon
-					:disabled="cmpDisableCheck"
-					:readonly="cmpReadonlyCheck"
-					:checked="cmpShowCheck"
-					:iconColorConfig="cmpSelectionIconColor"
-				/>
+				<check-box-icon :disabled="cmpDisableCheck" :readonly="cmpReadonlyCheck" :checked="cmpShowCheck" :iconColorConfig="cmpSelectionIconColor" />
 			</view>
 			<view class="cell-box" v-if="type == 'radio'" @click.stop="changeCheck">
-				<radio-icon
-					:disabled="cmpDisableCheck"
-					:readonly="cmpReadonlyCheck"
-					:checked="cmpShowCheck"
-					:iconColorConfig="cmpSelectionIconColor"
-				/>
+				<radio-icon :disabled="cmpDisableCheck" :readonly="cmpReadonlyCheck" :checked="cmpShowCheck" :iconColorConfig="cmpSelectionIconColor" />
 			</view>
 			<view class="cell-box" v-if="type == 'index'">
 				{{ row.rowIndex + 1 }}
@@ -60,7 +50,7 @@ import { childMixin } from '../../utils/mixin.js';
  */
 export default {
 	name: 'ste-table-column',
-	mixins: [childMixin('ste-table')],
+	mixins: [childMixin('ste-table', ['setRow'])],
 	components: { RadioIcon, CheckBoxIcon, SubTable, TablePopover },
 	options: {
 		virtualHost: true,
@@ -236,6 +226,9 @@ export default {
 				this.changeCheck();
 			}
 		},
+		setRow(row = {}) {
+			this.row = row;
+		},
 	},
 };
 </script>

package/components/ste-tabs/ste-tabs.vue

@@ -170,6 +170,7 @@ export default {
 			pullTransform: false,
 			_updateChildrenTimeout: null,
 			_updateTabsTimeout: null,
+			_upadteChildrenTimeout: null,
 		};
 	},
 	computed: {
@@ -192,9 +193,11 @@ export default {
 		},
 		cmpDisabledIndexs() {
 			const list = [];
+
 			this.cmpTabList.forEach((m, i) => {
 				if (m.disabled) list.push(i);
 			});
+
 			return list;
 		},
 		cmpRootStyle() {
@@ -369,8 +372,7 @@ export default {
 			this.showComponent = false;
 			clearTimeout(this._updateChildrenTimeout);
 			this._updateChildrenTimeout = setTimeout(() => {
-				this.getChildrenProps();
-				this.$nextTick(async () => {
+				this.getChildrenProps().then(async () => {
 					this.listBoxEl = await utils.querySelector('.tab-list-box', this);
 					this.listEl = await utils.querySelector('.tab-list-box .tab-list.view-list', this);
 					this.tabEls = await utils.querySelector('.tab-list-box .tab-list.view-list .tab-item', this, true);
@@ -379,17 +381,27 @@ export default {
 			}, 100);
 		},
 		getChildrenProps() {
-			this.tabPropsList = this.children.map((m) => ({
-				title: m.title,
-				subTitle: m.subTitle,
-				image: m.image,
-				name: m.name,
-				index: m.index,
-				disabled: m.disabled,
-				showDot: m.showDot,
-				badge: m.badge,
-				showZeroBadge: m.showZeroBadge,
-			}));
+			return new Promise((resolve, reject) => {
+				clearTimeout(this._upadteChildrenTimeout);
+				this._upadteChildrenTimeout = setTimeout(() => {
+					try {
+						this.tabPropsList = this.children.map((m) => ({
+							title: m.title,
+							subTitle: m.subTitle,
+							image: m.image,
+							name: m.name,
+							index: m.index,
+							disabled: m.disabled,
+							showDot: m.showDot,
+							badge: m.badge,
+							showZeroBadge: m.showZeroBadge,
+						}));
+						resolve();
+					} catch (e) {
+						reject(e);
+					}
+				}, 100);
+			});
 		},
 		onClickTab(tab, index) {
 			this.$emit('click-tab', { index, ...tab });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "stellar-ui-v2",
-	"version": "1.40.26",
+	"version": "1.40.27",
 	"description": "StellarUI组件库",
 	"main": "stellar-ui/index.js",
 	"private": false,

package/utils/mixin.js

@@ -7,7 +7,7 @@ export function parentMixin(name) {
 		provide() {
 			return {
 				[name]: {
-					getParent: () => this
+					getParent: () => this,
 				},
 			};
 		},
@@ -23,7 +23,7 @@ export function parentMixin(name) {
  * 子组件混入对象
  * @param {String} parentName 父组件名称
  */
-export function childMixin(parentName) {
+export function childMixin(parentName, methodNames = []) {
 	return {
 		options: {
 			virtualHost: true,
@@ -31,37 +31,45 @@ export function childMixin(parentName) {
 		inject: {
 			[parentName]: {
 				value: parentName,
-				default: null
-			}
+				default: null,
+			},
 		},
 		data() {
 			return {
-				parent: {},
+				parent: {
+					children: [],
+				},
 			};
 		},
 		created() {
-			this.parent = this[parentName]?.getParent();
-			this.getParentData();
+			if (this[parentName] && this[parentName]?.getParent) {
+				this.parent = this[parentName].getParent();
+				this.setParentData();
+			}
 		},
 		beforeDestroy() {
 			// 判断当前页面是否存在parent和chldren，一般在checkbox和checkbox-group父子联动的场景会有此情况
 			// 组件销毁时，移除子组件在父组件children数组中的实例，释放资源，避免数据混乱
-			if (this.parent && Array.isArray(this.parent.children)) {
-				// 组件销毁时，移除父组件中的children数组中对应的实例
-				this.parent.children.map((child, index) => {
-					// 如果相等，则移除
-					if (child === this) {
-						this.parent.children.splice(index, 1);
-					}
-				});
+			const ids = this.parent.children.map((item) => item._uid);
+			if (ids.indexOf(this._uid) !== -1) {
+				this.parent.children.splice(ids.indexOf(this._uid), 1);
 			}
 		},
 		methods: {
-			getParentData() {
-				if (this.parent?.children && this.parent.children.indexOf(this) === -1) {
-					this.parent.children.push(this);
+			setParentData() {
+				const child = Object.assign({ _uid: this._uid }, this.$props);
+				methodNames.forEach((name) => {
+					child[name] = (...a) => {
+						if (this[name]) {
+							return this[name](...a);
+						}
+					};
+				});
+				const ids = this.parent.children.map((item) => item._uid);
+				if (ids.indexOf(child._uid) === -1) {
+					this.parent.children.push(child);
 				}
 			},
 		},
 	};
-}
+}