uview-plus 3.8.125 → 3.8.127

package/changelog.md

@@ -1,3 +1,24 @@
+## 3.8.127
+fix: 修复抖音小程序 tabbar-item / steps-item 因父子生命周期顺序导致的崩溃
+
+抖音小程序中，子组件的 created 可能早于父组件的 created 执行，此时父组件实例已可通过 $parent 找到，但父组件的 children 数组尚未初始化（u-tabbar / u-steps / u-list 都在自己的 created 里才赋值 children=[]）。子组件 init() 直接访问 this.parent.children.indexOf(this) 时 children 仍为 undefined，抛出 TypeError: Cannot read properties of undefined (reading 'indexOf')，并伴随「up-tabbar-item必须搭配up-tabbar组件使用」的误报警告（该分支只 log 未 return，继续执行才崩溃）。对照 u-radio / u-checkbox：它们在 mounted() 调 init() 且不访问 parent.children，所以不受影响。
+
+- u-tabbar-item：init() 在 error() 后补 return，并加 !this.parent.children 守卫；mounted() 新增 init() 补偿重试（created 阶段被跳过时补齐激活态）；clickHandler() 补 this.parent / children 守卫
+- u-steps-item：init() 加 !this.parent.children 守卫；mounted() 新增 init() 补偿重试，确保自身已注册进父组件 children
+- u-list-item：init() 加 !this.parent / !this.parent.children 守卫，避免 $parent 返回 false 时报错
+- 共享 mixin getParentData()：访问 children 前先判断 this.parent 存在，避免 $parent 返回 false 时读取 false.children 崩溃，影响所有父子联动组件
+
+## 3.8.126
+feat: 新增 u-flex 通用弹性布局容器组件
+
+新增 u-flex（up-flex）通用 flexbox 容器组件，跨端同名同默认，作为页面 view 之上的一层弹性布局落点，免去每处手写 display:flex 与各类对齐样式，让行列布局在 H5、小程序、App 各端保持一致表现。
+
+- 支持 direction 主轴方向 row / column / row-reverse / column-reverse（默认 row）
+- 支持 justify 主轴对齐 flex-start / flex-end / center / space-between / space-around / space-evenly，并兼容 start / end 简写
+- 支持 align 交叉轴对齐 flex-start / flex-end / center / stretch / baseline（默认 stretch）
+- 支持 wrap 是否换行（默认 false）与 gap 子元素间距（任意单位，自动 addUnit 处理）
+- 支持 customStyle 外部样式深合并，暴露 click 点击事件
+
 ## 3.8.125
 fix: 修复签名组件在 App 端无法绘制、笔迹画出后闪退的问题
 

package/components/u-flex/flex.js

@@ -0,0 +1,10 @@
+export default {
+    // flex
+    flex: {
+        direction: 'row',
+        justify: 'flex-start',
+        align: 'stretch',
+        wrap: false,
+        gap: 0
+    }
+}

package/components/u-flex/props.js

@@ -0,0 +1,34 @@
+import { defineMixin } from '../../libs/vue'
+import FlexDefaultProps from './flex'
+import { registerComponentProps } from '../../libs/config/props.js'
+
+const defProps = registerComponentProps(FlexDefaultProps)
+export const props = defineMixin({
+    props: {
+        // 主轴方向 row/column/row-reverse/column-reverse
+        direction: {
+            type: String,
+            default: () => defProps.flex.direction
+        },
+        // 主轴对齐 flex-start/flex-end/center/space-between/space-around/space-evenly（兼容 start/end）
+        justify: {
+            type: String,
+            default: () => defProps.flex.justify
+        },
+        // 交叉轴对齐 flex-start/flex-end/center/stretch/baseline
+        align: {
+            type: String,
+            default: () => defProps.flex.align
+        },
+        // 是否换行
+        wrap: {
+            type: Boolean,
+            default: () => defProps.flex.wrap
+        },
+        // 子元素间距，单位任意
+        gap: {
+            type: [String, Number],
+            default: () => defProps.flex.gap
+        }
+    }
+})

package/components/u-flex/u-flex.vue

@@ -0,0 +1,63 @@
+<template>
+	<view
+	    class="u-flex"
+	    :style="[flexStyle]"
+	    @tap="clickHandler"
+	>
+		<slot />
+	</view>
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, addStyle, deepMerge } from '../../libs/function/index';
+	/**
+	 * Flex 通用弹性布局容器
+	 * @description 通用 flexbox 容器，跨端同名同默认，作为页面 view 的原生落点
+	 * @property {String}			direction	主轴方向 row/column/row-reverse/column-reverse (默认 'row')
+	 * @property {String}			justify		主轴对齐 (默认 'flex-start')
+	 * @property {String}			align		交叉轴对齐 (默认 'stretch')
+	 * @property {Boolean}			wrap		是否换行 (默认 false)
+	 * @property {String | Number}	gap			子元素间距，单位任意 (默认 0)
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * @event {Function} click 组件被点击
+	 * @example <up-flex direction="column" gap="16">...</up-flex>
+	 */
+	export default {
+		name: "u-flex",
+		mixins: [mpMixin, mixin, props],
+		emits: ["click"],
+		computed: {
+			uJustify() {
+				if (this.justify === 'start' || this.justify === 'end') return 'flex-' + this.justify
+				return this.justify
+			},
+			flexStyle() {
+				const style = {
+					display: 'flex',
+					flexDirection: this.direction,
+					justifyContent: this.uJustify,
+					alignItems: this.align,
+					flexWrap: this.wrap ? 'wrap' : 'nowrap'
+				}
+				if (this.gap && Number(this.gap) !== 0) {
+					style.gap = addUnit(this.gap)
+				}
+				return deepMerge(style, addStyle(this.customStyle))
+			}
+		},
+		methods: {
+			clickHandler() {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.u-flex {
+		display: flex;
+	}
+</style>

package/components/u-list-item/u-list-item.vue

@@ -73,6 +73,10 @@
 			init() {
 				// 初始化数据
 				this.updateParentData()
+				// 父组件未找到或 children 尚未初始化时跳过，避免 indexOf 报错
+				if (!this.parent || !this.parent.children) {
+					return
+				}
 				this.index = this.parent.children.indexOf(this)
 				this.resize()
 			},

package/components/u-steps-item/u-steps-item.vue

@@ -187,6 +187,9 @@
 			}
 		},
 		mounted() {
+			// 抖音小程序等平台子组件 created 可能在父组件 created 之前执行，
+			// 此时 parent.children 尚未初始化，init 被跳过，此处补偿重试
+			this.init()
 			this.parent && this.parent.updateFromChild()
 			sleep().then(() => {
 				this.getStepsItemRect()
@@ -199,6 +202,12 @@
 				if (!this.parent) {
 					return error('u-steps-item必须要搭配u-steps组件使用')
 				}
+				// 抖音小程序等平台子组件 created 可能在父组件 created 之前执行，
+				// 此时 parent.children 尚未初始化（u-steps 在 created 中才赋值 children=[]），
+				// 跳过本次初始化，由 mounted 钩子补偿重试
+				if (!this.parent.children) {
+					return
+				}
 				this.index = this.parent.children.indexOf(this)
 				this.childLength = this.parent.children.length
 			},

package/components/u-tabbar-item/u-tabbar-item.vue

@@ -239,6 +239,9 @@
 			this.init()
 		},
 		mounted() {
+			// 抖音小程序等平台子组件 created 可能在父组件 created 之前执行，
+			// 此时 parent.children 尚未初始化，init 被跳过，此处补偿重试
+			this.init()
 			this.scheduleMidButtonBorderMeasure()
 		},
 		watch: {
@@ -260,6 +263,13 @@
 				this.updateParentData()
 				if (!this.parent) {
 					error('up-tabbar-item必须搭配up-tabbar组件使用')
+					return
+				}
+				// 抖音小程序等平台子组件 created 可能在父组件 created 之前执行，
+				// 此时 parent.children 尚未初始化（u-tabbar 在 created 中才赋值 children=[]），
+				// 跳过本次初始化，由 mounted 钩子补偿重试
+				if (!this.parent.children) {
+					return
 				}
 				// 本子组件在u-tabbar的children数组中的索引
 				const index = this.parent.children.indexOf(this)
@@ -299,10 +309,11 @@
 			},
 			clickHandler() {
 				this.$nextTick(() => {
+					if (!this.parent || !this.parent.children) return
 					const index = this.parent.children.indexOf(this)
 					const name = this.name || index
 					// 点击的item为非激活的item才发出change事件
-					if (name !== this.parent.value) {
+					if (this.parent && name !== this.parent.value) {
 						this.parent.$emit('change', name)
 					}
 					this.$emit('click', name)

package/libs/config/props.js

@@ -42,6 +42,7 @@ const componentKeys = [
     'dropdown',
     'dropdownItem',
     'empty',
+    'flex',
     'form',
     'formItem',
     'gap',

package/libs/mixin/mixin.js

@@ -227,7 +227,7 @@ export const mixin = defineMixin({
             // 之所以需要这么做，是因为所有端中，头条小程序不支持通过this.parent.xxx去监听父组件参数的变化
             // 此处并不会自动更新子组件的数据，而是依赖父组件u-radio-group去监听data的变化，手动调用更新子组件的方法去重新获取
             this.parent = $parent.call(this, parentName)
-            if (this.parent.children) {
+            if (this.parent && this.parent.children) {
                 // 如果父组件的children不存在本组件的实例，才将本实例添加到父组件的children中
                 this.parent.children.indexOf(this) === -1 && this.parent.children.push(this)
             }

package/package.json

@@ -2,7 +2,7 @@
   "id": "uview-plus",
   "name": "uview-plus",
   "displayName": "零云®uview-plus3.0重磅发布，全面的Vue3鸿蒙跨端移动组件库，组件丰富维护更新稳定。",
-  "version": "3.8.125",
+  "version": "3.8.127",
   "description": "零云®uview-plus已兼容vue3支持多语言，120+全面的组件和便捷的工具会让您信手拈来。近期新增拖动排序、条码、图片裁剪、下拉刷新、虚拟列表、签名、Markdown等。",
   "keywords": [
     "uview",