uview-plus 3.8.125 → 3.8.126

package/changelog.md

@@ -1,3 +1,14 @@
+## 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/libs/config/props.js

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

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.126",
   "description": "零云®uview-plus已兼容vue3支持多语言，120+全面的组件和便捷的工具会让您信手拈来。近期新增拖动排序、条码、图片裁剪、下拉刷新、虚拟列表、签名、Markdown等。",
   "keywords": [
     "uview",