uview-plus 3.3.11 → 3.3.13

package/changelog.md

@@ -1,3 +1,15 @@
+## 3.3.13（2024-08-08）
+feat: input支持调用原生组件的focus和blur方法
+
+improvement: grid-item条件编译优化
+
+add: 新增迷你导航组件
+
+## 3.3.12（2024-08-06）
+improvement: $u挂载时机调整便于打包分离chunk
+
+fix: steps新增itemStyle属性名称冲突
+
 ## 3.3.11（2024-08-05）
 feat: 新增支持upload组件的deletable/maxCount/accept变更监听 #333
 

package/components/u-grid/u-grid.vue

@@ -92,7 +92,7 @@
 	@import "../../libs/css/components.scss";
      $u-grid-width:100% !default;
 	.u-grid {
-		/* #ifdef MP */
+		/* #ifdef APP-NVUE */
 		width: $u-grid-width;
 		position: relative;
 		box-sizing: border-box;
@@ -105,7 +105,7 @@
 		align-items: center;
 		// 在uni-app中应尽量避免使用flex布局以外的方式,因为nvue/uvue等方案都支持flex布局
 		// 这里使用grid布局使用为目前20240409uni-app在抖音小程序开启virtualHost时有bug，存在事件失效问题。
-		/* #ifdef MP */
+		/* #ifndef APP-NVUE */
 		display: grid;
 		grid-template-columns: repeat(v-bind(col), 1fr);
 		/* #endif */

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

@@ -52,9 +52,6 @@
 				// #ifdef APP-NVUE
 				width: 0, // nvue下才这么计算，vue下放到computed中，否则会因为延时造成闪烁
 				// #endif
-				// #ifdef MP-TOUTIAO
-				width: '100%',
-				// #endif
 				classes: [], // 类名集合，用于判断是否显示右边和下边框
 			};
 		},
@@ -69,26 +66,16 @@
 		},
 		// #endif
 		computed: {
-			// #ifndef APP-NVUE || MP-TOUTIAO
-			// vue下放到computed中，否则会因为延时造成闪烁
-			width() {
-				if (this.parentData.col > 0) {
-					return 100 / Number(this.parentData.col) + '%'
-				} else {
-					return 0;
-				}
-			},
-			// #endif
 			itemStyle() {
 				const style = {
-					background: this.bgColor,
-					// #ifndef MP
-					width: this.width
-					// #endif
-					// #ifdef MP
-					width: '100%'
-					// #endif
+					background: this.bgColor
 				}
+				// #ifdef APP-NVUE
+				style['width'] = this.width
+				// #endif
+				// #ifndef APP-NVUE
+				style['width'] = '100%'
+				// #endif
 				return deepMerge(style, addStyle(this.customStyle))
 			}
 		},

package/components/u-input/u-input.vue

@@ -18,6 +18,7 @@
 					为了防止type=number时，又存在password属性，type无效，此时需要设置password为undefined
 				 -->
             	<input
+                    ref="input-native"
             	    class="u-input__content__field-wrapper__field"
             	    :style="[inputStyle]"
             	    :type="type"
@@ -258,6 +259,12 @@ export default {
             this.focused = true;
             this.$emit("focus");
         },
+        doFocus() {
+            this.$refs['input-native'].focus();
+        },
+        doBlur() {
+            this.$refs['input-native'].blur();
+        },
         // 点击完成按钮时触发
         onConfirm(event) {
             this.$emit("confirm", this.innerValue);

package/components/u-navbar-mini/props.js

@@ -0,0 +1,51 @@
+import { defineMixin } from '../../libs/vue'
+
+export const props = defineMixin({
+	props: {
+		// 是否开启顶部安全区适配
+		safeAreaInsetTop: {
+			type: Boolean,
+			default: () => true
+		},
+		// 是否固定在顶部
+		fixed: {
+			type: Boolean,
+			default: () => true
+		},
+		// 左边的图标
+		leftIcon: {
+			type: String,
+			default: 'arrow-leftward'
+		},
+		// 背景颜色
+		bgColor: {
+			type: String,
+			default: () => 'rgba(0,0,0,.15)'
+		},
+		// 导航栏高度
+		height: {
+			type: [String, Number],
+			default: () => '32px'
+		},
+		// 图标的大小
+		iconSize: {
+			type: [String, Number],
+			default: '20px'
+		},
+		// 图标的颜色
+		iconColor: {
+			type: String,
+			default: '#fff'
+		},
+		// 点击左侧区域(返回图标)，是否自动返回上一页
+		autoBack: {
+			type: Boolean,
+			default: () => true
+		},
+		// 首页路径
+		homeUrl: {
+			type: [String],
+			default: ''
+		}
+	}
+})

package/components/u-navbar-mini/u-navbar-mini.vue

@@ -0,0 +1,148 @@
+<template>
+	<view class="u-navbar-mini" :class="[customClass]">
+		<view
+			class="u-navbar-mini__placeholder"
+			v-if="fixed"
+			:style="{
+				height: addUnit(getPx(height) + sys().statusBarHeight,'px'),
+			}"
+		></view>
+		<view class="u-navbar-mini__inner" :class="[fixed && 'u-navbar-mini--fixed']">
+			<u-status-bar
+				v-if="safeAreaInsetTop"
+				:bgColor="bgColor"
+			></u-status-bar>
+			<view
+				class="u-navbar-mini__content"
+				:class="[border && 'u-border-bottom']"
+				:style="{
+					height: addUnit(height),
+					backgroundColor: bgColor,
+				}"
+			>
+				<view
+					class="u-navbar-mini__content__left"
+					hover-class="u-navbar-mini__content__left--hover"
+					hover-start-time="150"
+					@tap="leftClick"
+				>
+					<slot name="left">
+						<up-icon
+							:name="leftIcon"
+							:size="iconSize"
+							:color="iconColor"
+						></up-icon>
+					</slot>
+				</view>
+				<view style="padding: 10px 10px;">
+					<up-line direction="col" color="#fff" length="16px"></up-line>
+				</view>
+                <view
+					class="u-navbar-mini__content__center" @tap="homeClick">
+                    <slot name="center">
+                        <up-icon name="home" :size="iconSize" :color="iconColor"></up-icon>
+                    </slot>
+                </view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { props } from './props';
+	console.log(props)
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, addStyle, getPx, sys } from '../../libs/function/index';
+	/**
+	 * NavbarMini 迷你导航栏
+	 * @description 此组件一般用于在全屏页面中，典型的如微信小程序左上角。
+	 * @tutorial https://ijry.github.io/uview-plus/components/navbar-mini.html
+	 * @property {Boolean}			safeAreaInsetTop	是否开启顶部安全区适配  （默认 true ）
+	 * @property {Boolean}			placeholder			固定在顶部时，是否生成一个等高元素，以防止塌陷 （默认 false ）
+	 * @property {Boolean}			fixed				导航栏是否固定在顶部 （默认 false ）
+	 * @property {String}			leftIcon			左边返回图标的名称，只能为uView自带的图标 （默认 'arrow-left' ）
+	 * @property {String}			title				导航栏标题，如设置为空字符，将会隐藏标题占位区域
+	 * @property {String}			bgColor				导航栏背景设置 （默认 '#ffffff' ）
+	 * @property {String | Number}	height				导航栏高度(不包括状态栏高度在内，内部自动加上)（默认 '44px' ）
+	 * @property {String | Number}	iconSize			左侧返回图标的大小（默认 20px ）
+	 * @property {String | Number}	leftIconColor		左侧返回图标的颜色（默认 #303133 ）
+	 * @property {Boolean}	        autoBack			点击左侧区域(返回图标)，是否自动返回上一页（默认 false ）
+	 * @property {Object | String}	titleStyle			标题的样式，对象或字符串
+	 * @event {Function} leftClick		点击左侧区域
+	 * @event {Function} rightClick		点击右侧区域
+	 * @example <u-navbar-mini @click-left="onClickBack"></u-navbar-mini>
+	 */
+	export default {
+		name: 'u-navbar-mini',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+			}
+		},
+		emits: ["leftClick", "homeClick"],
+        created() {
+        },
+		methods: {
+			addStyle,
+			addUnit,
+			sys,
+			getPx,
+			// 点击左侧区域
+			leftClick() {
+				// 如果配置了autoBack，自动返回上一页
+				this.$emit('leftClick')
+				if(this.autoBack) {
+					uni.navigateBack()
+				}
+			},
+			homeClick() {
+				if (this.homeUrl) {
+					uni.reLaunch({ url: this.homeUrl })
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.u-navbar-mini {
+
+        &__inner {
+            width: 180rpx;
+            border-radius: 20px;
+            overflow: hidden;
+        }
+
+		&--fixed {
+			position: fixed;
+			left: 20px;
+			right: 0;
+			top: 10px;
+			z-index: 11;
+		}
+
+		&__content {
+			@include flex(row);
+            padding: 0 15px;
+			align-items: center;
+			height: 44px;
+			background-color: #9acafc;
+			position: relative;
+			justify-content: space-between;
+
+			&__left {
+				@include flex(row);
+				align-items: center;
+			}
+
+			&__left {
+				&--hover {
+					opacity: 0.7;
+				}
+			}
+		}
+	}
+</style>

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

@@ -4,7 +4,7 @@
 			:class="[`u-steps-item__line--${parentData.direction}`]" :style="[lineStyle]"></view>
 		<view class="u-steps-item__wrapper"
 			:class="[`u-steps-item__wrapper--${parentData.direction}`, parentData.dot && `u-steps-item__wrapper--${parentData.direction}--dot`]"
-			:style="[itemStyle]">
+			:style="[itemStyleInner]">
 			<slot name="icon">
 				<view class="u-steps-item__wrapper__dot" v-if="parentData.dot" :style="{
 						backgroundColor: statusColor
@@ -117,7 +117,7 @@
 					.current ? this.parentData.activeColor : this.parentData.inactiveColor
 				return style
 			},
-			itemStyle() {
+			itemStyleInner() {
 				return {
 					...this.itemStyle
 				}

package/index.js

@@ -77,11 +77,11 @@ const $u = {
     platform
 }
 
-// $u挂载到uni对象上
-uni.$u = $u
-
 const install = (Vue) => {
     // 同时挂载到uni和Vue.prototype中
+    // $u挂载到uni对象上
+    uni.$u = $u
+
     // #ifndef APP-NVUE
     // 只有vue，挂载到Vue.prototype才有意义，因为nvue中全局Vue.prototype和Vue.mixin是无效的
     Vue.config.globalProperties.$u = $u

package/package.json

@@ -2,7 +2,7 @@
 	"id": "uview-plus",
 	"name": "uview-plus",
 	"displayName": "uview-plus3.0重磅发布，全面的Vue3移动组件库。",
-	"version": "3.3.11",
+	"version": "3.3.13",
 	"description": "uview-plus已兼容vue3，全面的组件和便捷的工具会让您信手拈来，如鱼得水",
 	"keywords": [
         "uview",