uview-pro 0.5.16 → 0.5.18

package/components/u-popup/u-popup.vue

@@ -1,6 +1,11 @@
 <template>
+    <!-- inline 模式：直接渲染内容，不显示为弹窗 -->
+    <view v-if="props.mode === 'inline'" class="u-popup-inline" :class="customClass" :style="inlineStyle">
+        <slot />
+    </view>
+    <!-- 弹窗模式 -->
     <view
-        v-if="visibleSync"
+        v-else-if="visibleSync"
         class="u-drawer"
         :style="$u.toStyle({ zIndex: Number(uZIndex) - 1 }, customStyle)"
         :class="customClass"
@@ -78,7 +83,7 @@ import { PopupProps } from './types';
  * popup 弹窗
  * @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
  * @tutorial https://uviewpro.cn/zh/components/popup.html
- * @property {String} mode 弹出方向（默认left）
+ * @property {String} mode 弹出方向（默认left），新增 inline 模式可直接插入页面
  * @property {Boolean} mask 是否显示遮罩（默认true）
  * @property {Stringr | Number} length mode=left | 见官网说明（默认auto）
  * @property {Boolean} zoom 是否开启缩放动画，只在mode为center时有效（默认true）
@@ -96,6 +101,7 @@ import { PopupProps } from './types';
  * @event {Function} open 弹出层打开
  * @event {Function} close 弹出层收起
  * @example <u-popup v-model="show"><view>出淤泥而不染，濯清涟而不妖</view></u-popup>
+ * @example <u-popup mode="inline"><view>直接插入页面内容</view></u-popup>
  */
 
 const props = defineProps(PopupProps);
@@ -106,6 +112,25 @@ const visibleSync = ref(false);
 const showDrawer = ref(false);
 const timer = ref<ReturnType<typeof setTimeout> | null>(null);
 const closeFromInner = ref(false); // value的值改变，是发生在内部还是外部
+
+// inline 模式的样式
+const inlineStyle = computed(() => {
+    let style: Record<string, any> = {};
+    if (props.width) style.width = getUnitValue(props.width);
+    if (props.height) style.height = getUnitValue(props.height);
+    if (props.borderRadius) style.borderRadius = `${props.borderRadius}rpx`;
+    // 合并用户自定义样式
+    if (props.customStyle) {
+        if (typeof props.customStyle === 'string') {
+            // 简单处理字符串样式
+            style = { ...style };
+        } else {
+            Object.assign(style, props.customStyle);
+        }
+    }
+    return style;
+});
+
 // 根据mode的位置，设定其弹窗的宽度(mode = left|right)，或者高度(mode = top|bottom)
 const style = computed(() => {
     let style: Record<string, any> = {};
@@ -171,6 +196,8 @@ const uZIndex = computed(() => (props.zIndex ? props.zIndex : $u.zIndex.popup));
 watch(
     () => props.modelValue,
     val => {
+        // inline 模式下不响应 modelValue 变化
+        if (props.mode === 'inline') return;
         if (val) {
             open();
         } else if (!closeFromInner.value) {
@@ -181,6 +208,8 @@ watch(
 );
 
 onMounted(() => {
+    // inline 模式下不执行弹窗逻辑
+    if (props.mode === 'inline') return;
     if (props.modelValue) open();
 });
 
@@ -203,6 +232,8 @@ function maskClick() {
  * 关闭弹窗
  */
 function close() {
+    // inline 模式下不执行关闭逻辑
+    if (props.mode === 'inline') return;
     // 标记关闭是内部发生的，否则修改了value值，导致watch中对value检测，导致再执行一遍close
     // 造成@close事件触发两次
     closeFromInner.value = true;
@@ -213,6 +244,8 @@ function close() {
  * 中部弹出时，点击内容区域关闭弹窗
  */
 function modeCenterClose(mode: string) {
+    // inline 模式下不执行关闭逻辑
+    if (props.mode === 'inline') return;
     // 中部弹出时，需要.u-drawer-content将居中内容，此元素会铺满屏幕，点击需要关闭弹窗
     // 让其只在mode=center时起作用
     if (mode != 'center' || !props.maskCloseAble) return;
@@ -223,6 +256,8 @@ function modeCenterClose(mode: string) {
  * 打开弹窗
  */
 function open() {
+    // inline 模式下不执行打开逻辑
+    if (props.mode === 'inline') return;
     change('visibleSync', 'showDrawer', true);
 }
 
@@ -232,6 +267,8 @@ function open() {
  * 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用
  */
 function change(param1: 'showDrawer' | 'visibleSync', param2: 'visibleSync' | 'showDrawer', status: boolean) {
+    // inline 模式下不执行状态变更
+    if (props.mode === 'inline') return;
     // 如果this.popup为false，意味着为picker，actionsheet等组件调用了popup组件
     if (props.popup === true) {
         emit('update:modelValue', status);
@@ -262,6 +299,15 @@ function change(param1: 'showDrawer' | 'visibleSync', param2: 'visibleSync' | 's
 <style scoped lang="scss">
 @import '../../libs/css/style.components.scss';
 
+// inline 模式样式
+.u-popup-inline {
+    /* #ifndef APP-NVUE */
+    display: block;
+    /* #endif */
+    position: relative;
+    background-color: var(--u-bg-white);
+}
+
 .u-drawer {
     /* #ifndef APP-NVUE */
     display: block;

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

@@ -17,7 +17,7 @@
                 :key="index"
                 :class="{ 'u-tabbar__content__circle': props.midButton && item.midButton }"
                 @tap.stop="clickHandler(index)"
-                :style="{ backgroundColor: props.bgColor }"
+                :style="$u.toStyle(getItemStyle(item))"
             >
                 <view
                     class="u-tabbar__content__item__container"
@@ -32,6 +32,12 @@
                                 : 'u-tabbar__content__item__icon'
                         ]"
                     >
+                        <!-- 凸起按钮边框 -->
+                        <view
+                            v-if="props.midButton && item.midButton && props.borderTop"
+                            class="u-tabbar__content__circle__border"
+                            :style="{ backgroundColor: props.bgColor }"
+                        ></view>
                         <u-icon
                             :size="getIconSize(index)"
                             :name="elIconPath(index)"
@@ -69,12 +75,6 @@
                     </view>
                 </view>
             </view>
-            <view
-                v-if="props.midButton"
-                class="u-tabbar__content__circle__border"
-                :class="{ 'u-border': props.borderTop }"
-                :style="{ backgroundColor: props.bgColor, left: midButtonLeft }"
-            ></view>
         </view>
         <!-- 这里加上一个48rpx的高度,是为了增高有凸起按钮时的防塌陷高度(也即按钮凸出来部分的高度) -->
         <!-- calc 计算0时单位不一致会计算失败，这里+1px -->
@@ -102,6 +102,7 @@ export default {
 import { ref, computed, onMounted } from 'vue';
 import { $u } from '../..';
 import { TabbarProps } from './types';
+import type { TabbarItem } from '../../types/global';
 
 /**
  * u-tabbar 底部导航栏
@@ -128,8 +129,51 @@ const emit = defineEmits<{ (e: 'change', index: number): void; (e: 'update:model
 // 计算z-index值
 const uZIndex = computed(() => props?.zIndex ?? $u.zIndex.tabbar);
 
-// 由于安卓太菜了，通过css居中凸起按钮的外层元素有误差，故通过js计算将其居中
-const midButtonLeft = ref('50%');
+/**
+ * 检查是否有任意item设置了width
+ */
+const hasCustomWidth = computed(() => {
+    return props.list?.some(item => item.width !== undefined && item.width !== null && item.width !== '') || false;
+});
+
+/**
+ * 计算每个item的宽度，根据list数量平分
+ * 如果任意item设置了width，则不自动计算，返回auto
+ */
+const autoItemWidth = computed(() => {
+    // 如果用户设置了任意一个width，就不自动计算
+    if (hasCustomWidth.value) return 'auto';
+
+    const count = props.list?.length || 0;
+    if (count === 0) return 'auto';
+    return `${100 / count}%`;
+});
+
+/**
+ * 获取单个item的样式
+ * 使用 flex 简写属性设置宽度，与原有样式保持一致
+ */
+function getItemStyle(item: TabbarItem): Record<string, any> {
+    const style: Record<string, any> = {};
+    // 背景色
+    style.backgroundColor = props.bgColor;
+    // flex宽度设置
+    if (item.width !== undefined && item.width !== null && item.width !== '') {
+        // 固定宽度：不伸缩
+        style.flex = `0 0 ${$u.addUnit(item.width)}`;
+        style.width = $u.addUnit(item.width);
+    } else if (hasCustomWidth.value) {
+        // 如果其他item设置了width，未设置的自动填充剩余空间
+        style.flex = '1 1 auto';
+        style.width = 'auto';
+    } else {
+        // 自动平分：不伸缩，按百分比分配
+        style.flex = `0 0 ${autoItemWidth.value}`;
+        style.width = autoItemWidth.value;
+    }
+    return style;
+}
+
 const pageUrl = ref(''); // 当前页面URL
 
 onMounted(() => {
@@ -140,7 +184,6 @@ onMounted(() => {
     const pages = getCurrentPages();
     // 页面栈中的最后一个即为项为当前页面，route属性为页面路径
     pageUrl.value = pages[pages.length - 1].route as string;
-    if (props.midButton) getMidButtonLeft();
 });
 
 /**
@@ -303,15 +346,6 @@ function getTextSize(index: number) {
     return props.textSize;
 }
 
-/**
- * 获取凸起按钮外层元素的left值，让其水平居中
- */
-function getMidButtonLeft() {
-    const windowWidth = $u.sys().windowWidth;
-    // 由于安卓中css计算left: 50%的结果不准确，故用js计算
-    midButtonLeft.value = windowWidth / 2 + 'px';
-}
-
 /**
  * 图标和文字间距
  */
@@ -358,22 +392,7 @@ function containerStyle(index: number) {
         /* #ifndef APP-NVUE */
         box-sizing: content-box;
         /* #endif */
-        &__circle__border {
-            border-radius: 100%;
-            width: 130rpx;
-            height: 130rpx;
-            top: -58rpx;
-            position: absolute;
-            z-index: 4;
-            background-color: var(--u-bg-white);
-            // 由于安卓的无能，导致只有3个tabbar item时，此css计算方式有误差
-            // 故使用js计算的形式来定位，此处不注释，是因为js计算有延后，避免出现位置闪动
-            left: 50%;
-            transform: translateX(-50%);
-            &:after {
-                border-radius: 100px;
-            }
-        }
+
         &__item {
             flex: 1;
             justify-content: center;
@@ -404,6 +423,7 @@ function containerStyle(index: number) {
                 line-height: 28rpx;
                 text-align: center;
                 width: 100%;
+                z-index: 6;
             }
         }
         &__circle {
@@ -440,6 +460,17 @@ function containerStyle(index: number) {
                 z-index: 6;
                 transform: translateX(-50%);
             }
+            &__border {
+                position: absolute;
+                top: -18rpx;
+                width: 130rpx;
+                height: 130rpx;
+                border-radius: 100%;
+                border-top: 1px solid var(--u-border-color);
+                background-color: var(--u-bg-white);
+                z-index: 0;
+                pointer-events: none;
+            }
         }
     }
 }

package/components/u-th/u-th.vue

@@ -58,6 +58,6 @@ const thStyle = computed(() => {
     font-size: 28rpx;
     color: $u-main-color;
     font-weight: bold;
-    background-color: rgb(245, 246, 248);
+    background-color: $u-bg-color;
 }
 </style>

package/locale/lang/en-US.ts

@@ -97,7 +97,9 @@ export default {
         fri: 'Fri',
         sat: 'Sat',
         confirmText: 'Confirm',
-        to: ' to '
+        to: ' to ',
+        holiday: '休',
+        workday: '班'
     },
     uEmpty: {
         car: 'Shopping cart is empty',

package/locale/lang/zh-CN.ts

@@ -97,7 +97,9 @@ export default {
         fri: '五',
         sat: '六',
         confirmText: '确定',
-        to: '至'
+        to: '至',
+        holiday: '休',
+        workday: '班'
     },
     uEmpty: {
         car: '购物车为空',

package/package.json

@@ -2,17 +2,17 @@
     "id": "uview-pro",
     "name": "uview-pro",
     "displayName": "【支持鸿蒙】uView Pro｜基于Vue3+TS的高质量UI组件库，支持多主题、暗黑模式、多语言",
-    "version": "0.5.16",
+    "version": "0.5.18",
     "description": "uView Pro是基于Vue3+TS的多平台UI框架，提供80+高质量组件、便捷工具和常用模板，支持多主题、暗黑模式、多语言，支持H5/APP/鸿蒙/小程序多端开发。已在鸿蒙应用商店上架，欢迎体验！",
     "main": "index.ts",
     "module": "index.ts",
     "browser": "index.ts",
     "keywords": [
-        "ui",
-        "uview",
         "uview-pro",
         "vue3",
-        "typescript"
+        "多主题",
+        "暗黑模式",
+        "多语言"
     ],
     "author": "anyup",
     "license": "MIT",