uview-pro 0.5.17 → 0.5.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/changelog.md +44 -23
  2. package/components/u-calendar/u-calendar.vue +1 -1
  3. package/components/u-tabbar/u-tabbar.vue +66 -35
  4. package/package.json +4 -4
  5. package/readme.md +239 -239
  6. package/types/global.d.ts +2 -0
package/changelog.md CHANGED
@@ -1,26 +1,47 @@
1
- ## 0.5.17（2026-04-15）
2
-
3
- ### 🐛 Bug Fixes | Bug 修复
4
-
5
- - **demo:** 修复topTips组件演示示例在小程序中不弹出的问题，需设置自定义navbar高度 ([0c72d24](https://github.com/anyup/uView-Pro/commit/0c72d24cd77f4ba6b6cb411810fcf5f0bd1d3272))
6
- - **u-table:** 修复表格表头暗黑模式背景色问题 ([c7fd1a5](https://github.com/anyup/uView-Pro/commit/c7fd1a58e87c4efb84ccf737fe9d1e755908ba8f))
7
- - **u-alert-tips:** 修复关闭按钮颜色样式问题 ([94001cf](https://github.com/anyup/uView-Pro/commit/94001cf79a03ea75695e414a7971e7ec39f445b6))
8
-
9
- ### ✨ Features | 新功能
10
-
11
- - **theme:** 更新主题配置和本地化文本 ([4caa2ed](https://github.com/anyup/uView-Pro/commit/4caa2edf9542f7f2b0a7bb9870585390f0241e80))
12
- - **u-calendar:** 增强日历组件功能，支持多种日历模式：打卡签到、节假日标记、价格日历等场景，支持自定义插槽功能，动态价格显示；支持选中日期，只读模式设置；修复范围选择背景色样式问题 ([7a9250e](https://github.com/anyup/uView-Pro/commit/7a9250eb49f6694286bb0c3dad7bc9780ae95864))
13
- - **u-popup:** 新增inline模式支持，允许弹窗组件直接插入页面内容而非传统弹窗形式 ([2e8890c](https://github.com/anyup/uView-Pro/commit/2e8890ca3c9cacb90739b33cb0e38db7e2bdb473))
14
- - **u-calendar:** 统一日期格式YYYY-MM-DD，确保跨组件日期处理的一致性 ([092cc53](https://github.com/anyup/uView-Pro/commit/092cc5392b64990342c43fcbac9aec1bfa2bf982))
15
-
16
- ### ♻️ Code Refactoring | 代码重构
17
-
18
- - **u-calendar:** 重构日历组件模板，统一页面和弹窗模式的日历组件结构 ([42894b8](https://github.com/anyup/uView-Pro/commit/42894b850f903e2471ca42e02f0379443139838b))
19
-
20
- ### 👥 Contributors
21
-
22
- <a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a>
23
-
1
+ ## 0.5.18（2026-04-22）
2
+
3
+ ### 🐛 Bug Fixes | Bug 修复
4
+
5
+ - **u-calendar:** 修复农历数据响应式访问问题 ([0a88b13](https://github.com/anyup/uView-Pro/commit/0a88b13911fc8c47229f5d9cab0fdfc8ade09ecb))
6
+ - **mp-weixin:** 修复微信小程序演示示例vue-i18n多语言切换后uni.getLocale()始终获取中文的问题 ([30b811f](https://github.com/anyup/uView-Pro/commit/30b811f85db29165cd150bea380dfe44f94fda79))
7
+ - **demo:** 取消底部导航标题配置设置国际化文案 ([7b949ab](https://github.com/anyup/uView-Pro/commit/7b949ab8695fbc3d9db51b96da1b25a1f05c2ed3))
8
+ - **demo:** 修复日历组件demo切换逻辑 ([9aa706a](https://github.com/anyup/uView-Pro/commit/9aa706a0e7b564c2bef75d1d6e7a90023dfc1c17))
9
+
10
+ ### ✨ Features | 新功能
11
+
12
+ - **u-tabbar:** 底部导航栏支持自定义item宽度配置，优化item平分功能 ([997846f](https://github.com/anyup/uView-Pro/commit/997846fb5f8ba4648e4d0514f0846ce80a217490))
13
+
14
+ ### 📝 Documentation | 文档
15
+
16
+ - update uview pro desc ([ba65d2e](https://github.com/anyup/uView-Pro/commit/ba65d2e34a1e620b595122a81df48a333c97bbcd))
17
+
18
+ ### 👥 Contributors
19
+
20
+ <a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a>
21
+
22
+ ## 0.5.17（2026-04-15）
23
+
24
+ ### 🐛 Bug Fixes | Bug 修复
25
+
26
+ - **demo:** 修复topTips组件演示示例在小程序中不弹出的问题，需设置自定义navbar高度 ([0c72d24](https://github.com/anyup/uView-Pro/commit/0c72d24cd77f4ba6b6cb411810fcf5f0bd1d3272))
27
+ - **u-table:** 修复表格表头暗黑模式背景色问题 ([c7fd1a5](https://github.com/anyup/uView-Pro/commit/c7fd1a58e87c4efb84ccf737fe9d1e755908ba8f))
28
+ - **u-alert-tips:** 修复关闭按钮颜色样式问题 ([94001cf](https://github.com/anyup/uView-Pro/commit/94001cf79a03ea75695e414a7971e7ec39f445b6))
29
+
30
+ ### ✨ Features | 新功能
31
+
32
+ - **theme:** 更新主题配置和本地化文本 ([4caa2ed](https://github.com/anyup/uView-Pro/commit/4caa2edf9542f7f2b0a7bb9870585390f0241e80))
33
+ - **u-calendar:** 增强日历组件功能，支持多种日历模式：打卡签到、节假日标记、价格日历等场景，支持自定义插槽功能，动态价格显示；支持选中日期，只读模式设置；修复范围选择背景色样式问题 ([7a9250e](https://github.com/anyup/uView-Pro/commit/7a9250eb49f6694286bb0c3dad7bc9780ae95864))
34
+ - **u-popup:** 新增inline模式支持，允许弹窗组件直接插入页面内容而非传统弹窗形式 ([2e8890c](https://github.com/anyup/uView-Pro/commit/2e8890ca3c9cacb90739b33cb0e38db7e2bdb473))
35
+ - **u-calendar:** 统一日期格式YYYY-MM-DD，确保跨组件日期处理的一致性 ([092cc53](https://github.com/anyup/uView-Pro/commit/092cc5392b64990342c43fcbac9aec1bfa2bf982))
36
+
37
+ ### ♻️ Code Refactoring | 代码重构
38
+
39
+ - **u-calendar:** 重构日历组件模板，统一页面和弹窗模式的日历组件结构 ([42894b8](https://github.com/anyup/uView-Pro/commit/42894b850f903e2471ca42e02f0379443139838b))
40
+
41
+ ### 👥 Contributors
42
+
43
+ <a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a>
44
+
24
45
  ## 0.5.16（2026-03-26）
25
46
 
26
47
  ### ✨ Features | 新功能
package/components/u-calendar/u-calendar.vue CHANGED
@@ -527,7 +527,7 @@ function getDateInfo(dayNum: number) {
527
527
  isChecked: props.checkedDates.includes(dateStr),
528
528
  isSelected,
529
529
  isTodayChecked: dateStr === today.value && props.todayChecked,
530
- lunar: lunarArr[dayNum - 1] || null
530
+ lunar: lunarArr.value[dayNum - 1] || null
531
531
  };
532
532
  }
533
533
 
package/components/u-tabbar/u-tabbar.vue CHANGED
@@ -17,7 +17,7 @@
17
17
  :key="index"
18
18
  :class="{ 'u-tabbar__content__circle': props.midButton && item.midButton }"
19
19
  @tap.stop="clickHandler(index)"
20
- :style="{ backgroundColor: props.bgColor }"
20
+ :style="$u.toStyle(getItemStyle(item))"
21
21
  >
22
22
  <view
23
23
  class="u-tabbar__content__item__container"
@@ -32,6 +32,12 @@
32
32
  : 'u-tabbar__content__item__icon'
33
33
  ]"
34
34
  >
35
+ <!-- 凸起按钮边框 -->
36
+ <view
37
+ v-if="props.midButton && item.midButton && props.borderTop"
38
+ class="u-tabbar__content__circle__border"
39
+ :style="{ backgroundColor: props.bgColor }"
40
+ ></view>
35
41
  <u-icon
36
42
  :size="getIconSize(index)"
37
43
  :name="elIconPath(index)"
@@ -69,12 +75,6 @@
69
75
  </view>
70
76
  </view>
71
77
  </view>
72
- <view
73
- v-if="props.midButton"
74
- class="u-tabbar__content__circle__border"
75
- :class="{ 'u-border': props.borderTop }"
76
- :style="{ backgroundColor: props.bgColor, left: midButtonLeft }"
77
- ></view>
78
78
  </view>
79
79
  <!-- 这里加上一个48rpx的高度,是为了增高有凸起按钮时的防塌陷高度(也即按钮凸出来部分的高度) -->
80
80
  <!-- calc 计算0时单位不一致会计算失败，这里+1px -->
@@ -102,6 +102,7 @@ export default {
102
102
  import { ref, computed, onMounted } from 'vue';
103
103
  import { $u } from '../..';
104
104
  import { TabbarProps } from './types';
105
+ import type { TabbarItem } from '../../types/global';
105
106
 
106
107
  /**
107
108
  * u-tabbar 底部导航栏
@@ -128,8 +129,51 @@ const emit = defineEmits<{ (e: 'change', index: number): void; (e: 'update:model
128
129
  // 计算z-index值
129
130
  const uZIndex = computed(() => props?.zIndex ?? $u.zIndex.tabbar);
130
131
 
131
- // 由于安卓太菜了，通过css居中凸起按钮的外层元素有误差，故通过js计算将其居中
132
- const midButtonLeft = ref('50%');
132
+ /**
133
+ * 检查是否有任意item设置了width
134
+ */
135
+ const hasCustomWidth = computed(() => {
136
+ return props.list?.some(item => item.width !== undefined && item.width !== null && item.width !== '') || false;
137
+ });
138
+
139
+ /**
140
+ * 计算每个item的宽度，根据list数量平分
141
+ * 如果任意item设置了width，则不自动计算，返回auto
142
+ */
143
+ const autoItemWidth = computed(() => {
144
+ // 如果用户设置了任意一个width，就不自动计算
145
+ if (hasCustomWidth.value) return 'auto';
146
+
147
+ const count = props.list?.length || 0;
148
+ if (count === 0) return 'auto';
149
+ return `${100 / count}%`;
150
+ });
151
+
152
+ /**
153
+ * 获取单个item的样式
154
+ * 使用 flex 简写属性设置宽度，与原有样式保持一致
155
+ */
156
+ function getItemStyle(item: TabbarItem): Record<string, any> {
157
+ const style: Record<string, any> = {};
158
+ // 背景色
159
+ style.backgroundColor = props.bgColor;
160
+ // flex宽度设置
161
+ if (item.width !== undefined && item.width !== null && item.width !== '') {
162
+ // 固定宽度：不伸缩
163
+ style.flex = `0 0 ${$u.addUnit(item.width)}`;
164
+ style.width = $u.addUnit(item.width);
165
+ } else if (hasCustomWidth.value) {
166
+ // 如果其他item设置了width，未设置的自动填充剩余空间
167
+ style.flex = '1 1 auto';
168
+ style.width = 'auto';
169
+ } else {
170
+ // 自动平分：不伸缩，按百分比分配
171
+ style.flex = `0 0 ${autoItemWidth.value}`;
172
+ style.width = autoItemWidth.value;
173
+ }
174
+ return style;
175
+ }
176
+
133
177
  const pageUrl = ref(''); // 当前页面URL
134
178
 
135
179
  onMounted(() => {
@@ -140,7 +184,6 @@ onMounted(() => {
140
184
  const pages = getCurrentPages();
141
185
  // 页面栈中的最后一个即为项为当前页面，route属性为页面路径
142
186
  pageUrl.value = pages[pages.length - 1].route as string;
143
- if (props.midButton) getMidButtonLeft();
144
187
  });
145
188
 
146
189
  /**
@@ -303,15 +346,6 @@ function getTextSize(index: number) {
303
346
  return props.textSize;
304
347
  }
305
348
 
306
- /**
307
- * 获取凸起按钮外层元素的left值，让其水平居中
308
- */
309
- function getMidButtonLeft() {
310
- const windowWidth = $u.sys().windowWidth;
311
- // 由于安卓中css计算left: 50%的结果不准确，故用js计算
312
- midButtonLeft.value = windowWidth / 2 + 'px';
313
- }
314
-
315
349
  /**
316
350
  * 图标和文字间距
317
351
  */
@@ -358,22 +392,7 @@ function containerStyle(index: number) {
358
392
  /* #ifndef APP-NVUE */
359
393
  box-sizing: content-box;
360
394
  /* #endif */
361
- &__circle__border {
362
- border-radius: 100%;
363
- width: 130rpx;
364
- height: 130rpx;
365
- top: -58rpx;
366
- position: absolute;
367
- z-index: 4;
368
- background-color: var(--u-bg-white);
369
- // 由于安卓的无能，导致只有3个tabbar item时，此css计算方式有误差
370
- // 故使用js计算的形式来定位，此处不注释，是因为js计算有延后，避免出现位置闪动
371
- left: 50%;
372
- transform: translateX(-50%);
373
- &:after {
374
- border-radius: 100px;
375
- }
376
- }
395
+
377
396
  &__item {
378
397
  flex: 1;
379
398
  justify-content: center;
@@ -404,6 +423,7 @@ function containerStyle(index: number) {
404
423
  line-height: 28rpx;
405
424
  text-align: center;
406
425
  width: 100%;
426
+ z-index: 6;
407
427
  }
408
428
  }
409
429
  &__circle {
@@ -440,6 +460,17 @@ function containerStyle(index: number) {
440
460
  z-index: 6;
441
461
  transform: translateX(-50%);
442
462
  }
463
+ &__border {
464
+ position: absolute;
465
+ top: -18rpx;
466
+ width: 130rpx;
467
+ height: 130rpx;
468
+ border-radius: 100%;
469
+ border-top: 1px solid var(--u-border-color);
470
+ background-color: var(--u-bg-white);
471
+ z-index: 0;
472
+ pointer-events: none;
473
+ }
443
474
  }
444
475
  }
445
476
  }
package/package.json CHANGED
@@ -2,17 +2,17 @@
2
2
  "id": "uview-pro",
3
3
  "name": "uview-pro",
4
4
  "displayName": "【支持鸿蒙】uView Pro｜基于Vue3+TS的高质量UI组件库，支持多主题、暗黑模式、多语言",
5
- "version": "0.5.17",
5
+ "version": "0.5.18",
6
6
  "description": "uView Pro是基于Vue3+TS的多平台UI框架，提供80+高质量组件、便捷工具和常用模板，支持多主题、暗黑模式、多语言，支持H5/APP/鸿蒙/小程序多端开发。已在鸿蒙应用商店上架，欢迎体验！",
7
7
  "main": "index.ts",
8
8
  "module": "index.ts",
9
9
  "browser": "index.ts",
10
10
  "keywords": [
11
- "ui",
12
- "uview",
13
11
  "uview-pro",
14
12
  "vue3",
15
- "typescript"
13
+ "多主题",
14
+ "暗黑模式",
15
+ "多语言"
16
16
  ],
17
17
  "author": "anyup",
18
18
  "license": "MIT",
package/readme.md CHANGED
@@ -1,239 +1,239 @@
1
- <p align="center">
2
- <img alt="logo" src="https://ik.imagekit.io/anyup/uview-pro/common/logo-new.png" width="120" height="120" style="margin-bottom: 10px;">
3
- </p>
4
- <h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">uView Pro</h3>
5
- <h3 align="center">uni-app Vue3 多平台快速开发的 UI 框架</h3>
6
-
7
- [![star](https://gitee.com/anyup/uView-Pro/badge/star.svg)](https://gitee.com/anyup/uView-Pro)
8
- [![fork](https://gitee.com/anyup/uView-Pro/badge/fork.svg)](https://gitee.com/anyup/uView-Pro)
9
- [![stars](https://img.shields.io/github/stars/anyup/uView-Pro?style=flat-square&logo=GitHub)](https://github.com/anyup/uView-Pro)
10
- [![forks](https://img.shields.io/github/forks/anyup/uView-Pro?style=flat-square&logo=GitHub)](https://github.com/anyup/uView-Pro)
11
- [![issues](https://img.shields.io/github/issues/anyup/uView-Pro?style=flat-square&logo=GitHub)](https://github.com/anyup/uView-Pro/issues)
12
- [![downloads](https://img.shields.io/npm/dm/uview-pro?logo=npm&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fuview-pro&style=flat-square)](https://www.npmjs.com/package/uview-pro)
13
- [![npm version](https://img.shields.io/npm/v/uview-pro)](https://www.npmjs.com/package/uview-pro)
14
- [![Website](https://img.shields.io/badge/uView%20Pro-docs-blue?style=flat-square)](https://uviewpro.cn)
15
- [![node version](https://img.shields.io/badge/node-%3E%3D18-green)](https://nodejs.org/)
16
- [![pnpm version](https://img.shields.io/badge/pnpm-%3E%3D7.30-green)](https://pnpm.io/)
17
- [![license](https://img.shields.io/github/license/anyup/uView-Pro?style=flat-square)](https://en.wikipedia.org/wiki/MIT_License)
18
-
19
- ## 说明
20
-
21
- `uView UI`，是 [uni-app](https://uniapp.dcloud.io/) 生态优秀的 UI 框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。
22
-
23
- `uView Pro`，是全面支持 Vue3.0、TypeScript 的 uni-app 生态框架，uView Pro 的基线版本是基于 uView 1.8.8 修改，使用 TypeScript 完全重构，目前已全面支持 uni-app Vue3.0。
24
-
25
- ## [官方文档：https://uviewpro.cn](https://uviewpro.cn)
26
-
27
- ## [快速启动模板：https://starter.uviewpro.cn](https://starter.uviewpro.cn)
28
-
29
- ## 特性
30
-
31
- - 兼容安卓，iOS，微信小程序，H5，QQ 小程序，百度小程序，支付宝小程序，头条小程序
32
- - 70+精选组件，功能丰富，多端兼容，让您快速集成，开箱即用
33
- - 众多贴心的 JS 利器，让您飞镖在手，召之即来，百步穿杨
34
- - 众多的常用页面和布局，让您专注逻辑，事半功倍
35
- - 详尽的文档支持，现代化的演示效果
36
- - 按需引入，精简打包体积
37
-
38
- ## 鸿蒙预览
39
-
40
- 🎉🎉 uView Pro 鸿蒙端应用已正式上线华为鸿蒙应用市场，为您提供完整的业务场景演示平台，包含组件库、模板示例、场景案例等，支持一键复制下载，帮助开发者快速上手并体验组件的实际应用价值！
41
-
42
- > 系统要求：仅支持 HarmonyOS 5.0 及以上版本设备
43
-
44
- <table>
45
- <tr align="center">
46
- <td><img src="https://ik.imagekit.io/anyup/images/social/qr_harmony.png" width="180" height="180" ></td>
47
- </tr>
48
- <tr>
49
- <td align="center"><strong>鸿蒙应用</strong><br>（浏览器扫码）</td>
50
- </tr>
51
- </table>
52
-
53
- ## 手机预览
54
-
55
- 您可以通过**微信**或**手机浏览器**扫描以下二维码，查看最佳的演示效果。
56
-
57
- <table class="table">
58
- <tr>
59
- <td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_wx.jpg" width="150" height="150" ></td>
60
- <td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_alipay.png" width="150" height="150" ></td>
61
- <td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_h5.png" width="150" height="150" ></td>
62
- <td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_android.png" width="150" height="150" ></td>
63
- </tr>
64
- <tr>
65
- <td align="center"><strong>微信小程序</strong><br>（微信扫码）</td>
66
- <td align="center"><strong>支付宝小程序</strong><br>（支付宝扫码）</td>
67
- <td align="center"><strong>H5</strong><br>（浏览器扫码）</td>
68
- <td align="center"><strong>Android</strong><br>（浏览器扫码）</td>
69
- </tr>
70
- </table>
71
-
72
- 运行示例工程，请[下载源码](https://github.com/anyup/uview-pro)后，在项目根目录执行以下命令：
73
-
74
- ```bash
75
- pnpm install
76
- pnpm dev
77
- ```
78
-
79
- ## 链接
80
-
81
- - [Github](https://github.com/anyup/uview-pro)
82
- - [Gitee](https://gitee.com/anyup/uview-pro)
83
- - [官方文档](https://uviewpro.cn)
84
- - [更新日志](https://github.com/anyup/uView-Pro/blob/master/src/uni_modules/uview-pro/changelog.md)
85
-
86
- ## 交流反馈
87
-
88
- 欢迎通过各种方式来交流反馈，让 uView Pro 更好的为大家服务：
89
-
90
- [欢迎交流反馈](https://uviewpro.cn/zh/resource/about.html)
91
-
92
- ## 捐赠 uView Pro
93
-
94
- 开源不易，如果您认为 `uView Pro` 帮到了您的开发工作，您可以捐赠 `uView Pro`：
95
-
96
- [欢迎捐赠留名](https://uviewpro.cn/zh/reward/donation.html)
97
-
98
- ## 关于 PR
99
-
100
- 我们非常乐意接受各位的优质 PR，但在此之前我希望您了解 `uView Pro` 是一个需要兼容多个平台的（小程序、h5、iOS App、Android App）包括 nvue 页面、vue 页面。
101
-
102
- 所以希望在您修复 bug 并提交之前尽可能的去这些平台测试一下兼容性。最好能携带测试截图以方便审核。非常感谢！
103
-
104
- ## 安装配置
105
-
106
- `uView Pro` 支持 `npm` 和 `uni_modules` 两种主流安装方式，配置方式高度一致。无论采用哪种方式，均可通过 `easycom` 实现组件自动引入，极大提升开发效率。以下为统一的配置说明：
107
-
108
- ### 1. 安装 uView Pro
109
-
110
- - npm 安装：
111
-
112
- ```bash
113
- npm install uview-pro
114
- # 或
115
- yarn add uview-pro
116
- # 或
117
- pnpm add uview-pro
118
- ```
119
-
120
- - uni_modules 安装：
121
-
122
- 通过 HBuilderX 插件市场或手动下载，将 uView Pro 放入 `uni_modules` 目录。
123
-
124
- [插件市场：https://ext.dcloud.net.cn/plugin?id=24633](https://ext.dcloud.net.cn/plugin?id=24633)
125
-
126
- ### 2. 引入 uView Pro 主库
127
-
128
- 在 `main.ts` 中引入并注册 uView Pro：
129
-
130
- ```js
131
- import { createSSRApp } from 'vue';
132
- // npm 方式
133
- import uViewPro from 'uview-pro';
134
- // uni_modules 方式
135
- // import uViewPro from "@/uni_modules/uview-pro";
136
-
137
- export function createApp() {
138
- const app = createSSRApp(App);
139
- app.use(uViewPro);
140
- return {
141
- app
142
- };
143
- }
144
- ```
145
-
146
- ### 3. 引入全局样式
147
-
148
- 在 `uni.scss` 中引入主题样式：
149
-
150
- ```scss
151
- /* npm 方式 */
152
- @import 'uview-pro/theme.scss';
153
- /* uni_modules 方式 */
154
- /* @import "@/uni_modules/uview-pro/theme.scss"; */
155
- ```
156
-
157
- 在 `App.vue` 首行引入基础样式：
158
-
159
- ```scss
160
- <style lang="scss">
161
- /* npm 方式 */
162
- @import "uview-pro/index.scss";
163
- /* uni_modules 方式 */
164
- /* @import "@/uni_modules/uview-pro/index.scss"; */
165
- </style>
166
- ```
167
-
168
- ### 4. 配置 easycom 自动引入组件
169
-
170
- 在 `pages.json` 中配置 `easycom` 规则，实现组件自动引入：
171
-
172
- ```json
173
- {
174
- "easycom": {
175
- "autoscan": true,
176
- "custom": {
177
- // npm 方式
178
- "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
179
- // uni_modules 方式
180
- // "^u-(.*)": "@/uni_modules/uview-pro/components/u-$1/u-$1.vue"
181
- }
182
- },
183
- "pages": []
184
- }
185
- ```
186
-
187
- **温馨提示**
188
-
189
- - 1.修改 `easycom` 规则后需重启 HX 或重新编译项目。
190
- - 2.请确保 `pages.json` 中只有一个 easycom 字段，否则请自行合并多个规则。
191
- - 3.一定要放在 `custom` 内，否则无效。
192
-
193
- ### 5. Volar 类型提示支持
194
-
195
- 如需在 `CLI` 项目中获得 `Volar` 的全局类型提示，请在 `tsconfig.json` 中添加：
196
-
197
- ```json
198
- {
199
- "compilerOptions": {
200
- // npm 方式
201
- "types": ["uview-pro/types"]
202
- // uni_modules 方式
203
- // "types": ["@/uni_modules/uview-pro/types"]
204
- }
205
- }
206
- ```
207
-
208
- > HBuilderX 项目暂不支持 `tsconfig.json` 的 `types` 配置，`CLI` 项目推荐配置以获得最佳 `TS` 体验。
209
-
210
- ### 6. 组件使用
211
-
212
- 配置完成后，无需 `import` 和 `components` 注册，可直接在 `SFC` 中使用 `uView Pro` 组件：
213
-
214
- ```vue
215
- <template>
216
- <u-button type="primary">按钮</u-button>
217
- </template>
218
- ```
219
-
220
- 请通过[快速上手](https://uviewpro.cn/zh/components/quickstart.html)了解更详细的内容
221
-
222
- ## 贡献者
223
-
224
- <a href="https://github.com/anyup/uView-Pro/graphs/contributors">
225
- <img alt="Contributors" src="https://contrib.rocks/image?repo=anyup/uView-Pro" />
226
- </a>
227
-
228
- ## 版权信息
229
-
230
- `uView Pro` 遵循[MIT](https://en.wikipedia.org/wiki/MIT_License)开源协议，意味着您无需支付任何费用，也无需授权，即可将 `uView Pro` 应用到您的产品中。
231
-
232
- ## 鸣谢
233
-
234
- 再次感谢 `uView UI` 开发团队，以及所有为 `uView UI` 的贡献者，以及所有为 `uView Pro` 的贡献者。
235
-
236
- - [Github](https://github.com/anyup/uview-pro)
237
- - [Gitee](https://gitee.com/anyup/uview-pro)
238
- - [uView UI 1.0](https://github.com/umicro/uView)
239
- - [uView UI 2.0](https://github.com/umicro/uView2.0)
1
+ <p align="center">
2
+ <img alt="logo" src="https://ik.imagekit.io/anyup/uview-pro/common/logo-new.png" width="120" height="120" style="margin-bottom: 10px;">
3
+ </p>
4
+ <h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">uView Pro</h3>
5
+ <h3 align="center">uni-app Vue3 多平台快速开发的 UI 框架</h3>
6
+
7
+ [![star](https://gitee.com/anyup/uView-Pro/badge/star.svg)](https://gitee.com/anyup/uView-Pro)
8
+ [![fork](https://gitee.com/anyup/uView-Pro/badge/fork.svg)](https://gitee.com/anyup/uView-Pro)
9
+ [![stars](https://img.shields.io/github/stars/anyup/uView-Pro?style=flat-square&logo=GitHub)](https://github.com/anyup/uView-Pro)
10
+ [![forks](https://img.shields.io/github/forks/anyup/uView-Pro?style=flat-square&logo=GitHub)](https://github.com/anyup/uView-Pro)
11
+ [![issues](https://img.shields.io/github/issues/anyup/uView-Pro?style=flat-square&logo=GitHub)](https://github.com/anyup/uView-Pro/issues)
12
+ [![downloads](https://img.shields.io/npm/dm/uview-pro?logo=npm&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fuview-pro&style=flat-square)](https://www.npmjs.com/package/uview-pro)
13
+ [![npm version](https://img.shields.io/npm/v/uview-pro)](https://www.npmjs.com/package/uview-pro)
14
+ [![Website](https://img.shields.io/badge/uView%20Pro-docs-blue?style=flat-square)](https://uviewpro.cn)
15
+ [![node version](https://img.shields.io/badge/node-%3E%3D18-green)](https://nodejs.org/)
16
+ [![pnpm version](https://img.shields.io/badge/pnpm-%3E%3D7.30-green)](https://pnpm.io/)
17
+ [![license](https://img.shields.io/github/license/anyup/uView-Pro?style=flat-square)](https://en.wikipedia.org/wiki/MIT_License)
18
+
19
+ ## 说明
20
+
21
+ `uView UI`，是 [uni-app](https://uniapp.dcloud.io/) 生态优秀的 UI 框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。
22
+
23
+ `uView Pro`，是全面支持 Vue3.0、TypeScript 的 uni-app 生态框架，uView Pro 的基线版本是基于 uView 1.8.8 修改，使用 TypeScript 完全重构，已覆盖 Android、iOS、鸿蒙以及微信/头条/支付宝等主流小程序平台，真正实现“一套代码，多端运行”，支持多主题系统、暗黑模式与国际化（i18n）。
24
+
25
+ ## [官方文档：https://uviewpro.cn](https://uviewpro.cn)
26
+
27
+ ## [快速启动模板：https://starter.uviewpro.cn](https://starter.uviewpro.cn)
28
+
29
+ ## 特性
30
+
31
+ - 兼容安卓，iOS，微信小程序，H5，QQ 小程序，百度小程序，支付宝小程序，头条小程序
32
+ - 70+精选组件，功能丰富，多端兼容，让您快速集成，开箱即用
33
+ - 众多贴心的 JS 利器，让您飞镖在手，召之即来，百步穿杨
34
+ - 众多的常用页面和布局，让您专注逻辑，事半功倍
35
+ - 详尽的文档支持，现代化的演示效果
36
+ - 按需引入，精简打包体积
37
+
38
+ ## 鸿蒙预览
39
+
40
+ 🎉🎉 uView Pro 鸿蒙端应用已正式上线华为鸿蒙应用市场，为您提供完整的业务场景演示平台，包含组件库、模板示例、场景案例等，支持一键复制下载，帮助开发者快速上手并体验组件的实际应用价值！
41
+
42
+ > 系统要求：仅支持 HarmonyOS 5.0 及以上版本设备
43
+
44
+ <table>
45
+ <tr align="center">
46
+ <td><img src="https://ik.imagekit.io/anyup/images/social/qr_harmony.png" width="180" height="180" ></td>
47
+ </tr>
48
+ <tr>
49
+ <td align="center"><strong>鸿蒙应用</strong><br>（浏览器扫码）</td>
50
+ </tr>
51
+ </table>
52
+
53
+ ## 手机预览
54
+
55
+ 您可以通过**微信**或**手机浏览器**扫描以下二维码，查看最佳的演示效果。
56
+
57
+ <table class="table">
58
+ <tr>
59
+ <td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_wx.jpg" width="150" height="150" ></td>
60
+ <td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_alipay.png" width="150" height="150" ></td>
61
+ <td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_h5.png" width="150" height="150" ></td>
62
+ <td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_android.png" width="150" height="150" ></td>
63
+ </tr>
64
+ <tr>
65
+ <td align="center"><strong>微信小程序</strong><br>（微信扫码）</td>
66
+ <td align="center"><strong>支付宝小程序</strong><br>（支付宝扫码）</td>
67
+ <td align="center"><strong>H5</strong><br>（浏览器扫码）</td>
68
+ <td align="center"><strong>Android</strong><br>（浏览器扫码）</td>
69
+ </tr>
70
+ </table>
71
+
72
+ 运行示例工程，请[下载源码](https://github.com/anyup/uview-pro)后，在项目根目录执行以下命令：
73
+
74
+ ```bash
75
+ pnpm install
76
+ pnpm dev
77
+ ```
78
+
79
+ ## 链接
80
+
81
+ - [Github](https://github.com/anyup/uview-pro)
82
+ - [Gitee](https://gitee.com/anyup/uview-pro)
83
+ - [官方文档](https://uviewpro.cn)
84
+ - [更新日志](https://github.com/anyup/uView-Pro/blob/master/src/uni_modules/uview-pro/changelog.md)
85
+
86
+ ## 交流反馈
87
+
88
+ 欢迎通过各种方式来交流反馈，让 uView Pro 更好的为大家服务：
89
+
90
+ [欢迎交流反馈](https://uviewpro.cn/zh/resource/about.html)
91
+
92
+ ## 捐赠 uView Pro
93
+
94
+ 开源不易，如果您认为 `uView Pro` 帮到了您的开发工作，您可以捐赠 `uView Pro`：
95
+
96
+ [欢迎捐赠留名](https://uviewpro.cn/zh/reward/donation.html)
97
+
98
+ ## 关于 PR
99
+
100
+ 我们非常乐意接受各位的优质 PR，但在此之前我希望您了解 `uView Pro` 是一个需要兼容多个平台的（小程序、h5、iOS App、Android App）包括 nvue 页面、vue 页面。
101
+
102
+ 所以希望在您修复 bug 并提交之前尽可能的去这些平台测试一下兼容性。最好能携带测试截图以方便审核。非常感谢！
103
+
104
+ ## 安装配置
105
+
106
+ `uView Pro` 支持 `npm` 和 `uni_modules` 两种主流安装方式，配置方式高度一致。无论采用哪种方式，均可通过 `easycom` 实现组件自动引入，极大提升开发效率。以下为统一的配置说明：
107
+
108
+ ### 1. 安装 uView Pro
109
+
110
+ - npm 安装：
111
+
112
+ ```bash
113
+ npm install uview-pro
114
+ # 或
115
+ yarn add uview-pro
116
+ # 或
117
+ pnpm add uview-pro
118
+ ```
119
+
120
+ - uni_modules 安装：
121
+
122
+ 通过 HBuilderX 插件市场或手动下载，将 uView Pro 放入 `uni_modules` 目录。
123
+
124
+ [插件市场：https://ext.dcloud.net.cn/plugin?id=24633](https://ext.dcloud.net.cn/plugin?id=24633)
125
+
126
+ ### 2. 引入 uView Pro 主库
127
+
128
+ 在 `main.ts` 中引入并注册 uView Pro：
129
+
130
+ ```js
131
+ import { createSSRApp } from 'vue';
132
+ // npm 方式
133
+ import uViewPro from 'uview-pro';
134
+ // uni_modules 方式
135
+ // import uViewPro from "@/uni_modules/uview-pro";
136
+
137
+ export function createApp() {
138
+ const app = createSSRApp(App);
139
+ app.use(uViewPro);
140
+ return {
141
+ app
142
+ };
143
+ }
144
+ ```
145
+
146
+ ### 3. 引入全局样式
147
+
148
+ 在 `uni.scss` 中引入主题样式：
149
+
150
+ ```scss
151
+ /* npm 方式 */
152
+ @import 'uview-pro/theme.scss';
153
+ /* uni_modules 方式 */
154
+ /* @import "@/uni_modules/uview-pro/theme.scss"; */
155
+ ```
156
+
157
+ 在 `App.vue` 首行引入基础样式：
158
+
159
+ ```scss
160
+ <style lang="scss">
161
+ /* npm 方式 */
162
+ @import "uview-pro/index.scss";
163
+ /* uni_modules 方式 */
164
+ /* @import "@/uni_modules/uview-pro/index.scss"; */
165
+ </style>
166
+ ```
167
+
168
+ ### 4. 配置 easycom 自动引入组件
169
+
170
+ 在 `pages.json` 中配置 `easycom` 规则，实现组件自动引入：
171
+
172
+ ```json
173
+ {
174
+ "easycom": {
175
+ "autoscan": true,
176
+ "custom": {
177
+ // npm 方式
178
+ "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
179
+ // uni_modules 方式
180
+ // "^u-(.*)": "@/uni_modules/uview-pro/components/u-$1/u-$1.vue"
181
+ }
182
+ },
183
+ "pages": []
184
+ }
185
+ ```
186
+
187
+ **温馨提示**
188
+
189
+ - 1.修改 `easycom` 规则后需重启 HX 或重新编译项目。
190
+ - 2.请确保 `pages.json` 中只有一个 easycom 字段，否则请自行合并多个规则。
191
+ - 3.一定要放在 `custom` 内，否则无效。
192
+
193
+ ### 5. Volar 类型提示支持
194
+
195
+ 如需在 `CLI` 项目中获得 `Volar` 的全局类型提示，请在 `tsconfig.json` 中添加：
196
+
197
+ ```json
198
+ {
199
+ "compilerOptions": {
200
+ // npm 方式
201
+ "types": ["uview-pro/types"]
202
+ // uni_modules 方式
203
+ // "types": ["@/uni_modules/uview-pro/types"]
204
+ }
205
+ }
206
+ ```
207
+
208
+ > HBuilderX 项目暂不支持 `tsconfig.json` 的 `types` 配置，`CLI` 项目推荐配置以获得最佳 `TS` 体验。
209
+
210
+ ### 6. 组件使用
211
+
212
+ 配置完成后，无需 `import` 和 `components` 注册，可直接在 `SFC` 中使用 `uView Pro` 组件：
213
+
214
+ ```vue
215
+ <template>
216
+ <u-button type="primary">按钮</u-button>
217
+ </template>
218
+ ```
219
+
220
+ 请通过[快速上手](https://uviewpro.cn/zh/components/quickstart.html)了解更详细的内容
221
+
222
+ ## 贡献者
223
+
224
+ <a href="https://github.com/anyup/uView-Pro/graphs/contributors">
225
+ <img alt="Contributors" src="https://contrib.rocks/image?repo=anyup/uView-Pro" />
226
+ </a>
227
+
228
+ ## 版权信息
229
+
230
+ `uView Pro` 遵循[MIT](https://en.wikipedia.org/wiki/MIT_License)开源协议，意味着您无需支付任何费用，也无需授权，即可将 `uView Pro` 应用到您的产品中。
231
+
232
+ ## 鸣谢
233
+
234
+ 再次感谢 `uView UI` 开发团队，以及所有为 `uView UI` 的贡献者，以及所有为 `uView Pro` 的贡献者。
235
+
236
+ - [Github](https://github.com/anyup/uview-pro)
237
+ - [Gitee](https://gitee.com/anyup/uview-pro)
238
+ - [uView UI 1.0](https://github.com/umicro/uView)
239
+ - [uView UI 2.0](https://github.com/umicro/uView2.0)
package/types/global.d.ts CHANGED
@@ -440,4 +440,6 @@ export type TabbarItem = {
440
440
  iconSize?: string | number;
441
441
  textSize?: string | number;
442
442
  gap?: string | number;
443
+ /** 自定义宽度，优先级高于自动计算的宽度 */
444
+ width?: string | number;
443
445
  };