uview-pro 0.4.12 → 0.5.0

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 (51) hide show
  1. package/changelog.md +58 -14
  2. package/components/u-action-sheet/types.ts +4 -2
  3. package/components/u-avatar-cropper/u-avatar-cropper.vue +8 -6
  4. package/components/u-badge/types.ts +1 -1
  5. package/components/u-calendar/types.ts +6 -4
  6. package/components/u-calendar/u-calendar.vue +18 -6
  7. package/components/u-config-provider/types.ts +11 -0
  8. package/components/u-config-provider/u-config-provider.vue +48 -3
  9. package/components/u-count-down/u-count-down.vue +7 -5
  10. package/components/u-empty/u-empty.vue +22 -17
  11. package/components/u-full-screen/types.ts +2 -0
  12. package/components/u-full-screen/u-full-screen.vue +5 -9
  13. package/components/u-input/types.ts +4 -1
  14. package/components/u-keyboard/types.ts +5 -2
  15. package/components/u-keyboard/u-keyboard.vue +18 -3
  16. package/components/u-link/types.ts +4 -2
  17. package/components/u-loadmore/types.ts +6 -3
  18. package/components/u-modal/types.ts +7 -5
  19. package/components/u-no-network/types.ts +4 -1
  20. package/components/u-no-network/u-no-network.vue +12 -5
  21. package/components/u-notice-bar/u-notice-bar.vue +1 -1
  22. package/components/u-number-box/u-number-box.vue +2 -2
  23. package/components/u-pagination/types.ts +5 -2
  24. package/components/u-picker/types.ts +5 -3
  25. package/components/u-read-more/types.ts +5 -3
  26. package/components/u-search/types.ts +5 -2
  27. package/components/u-section/types.ts +4 -1
  28. package/components/u-select/types.ts +5 -3
  29. package/components/u-skeleton/types.ts +69 -10
  30. package/components/u-skeleton/u-skeleton.vue +211 -189
  31. package/components/u-tabbar/types.ts +4 -2
  32. package/components/u-tabbar/u-tabbar.vue +114 -59
  33. package/components/u-textarea/types.ts +2 -1
  34. package/components/u-textarea/u-textarea.vue +2 -2
  35. package/components/u-upload/types.ts +4 -1
  36. package/components/u-upload/u-upload.vue +15 -13
  37. package/components/u-verification-code/types.ts +6 -3
  38. package/index.ts +39 -9
  39. package/libs/config/config.ts +8 -7
  40. package/libs/config/theme-tokens.ts +1 -1
  41. package/libs/hooks/index.ts +1 -0
  42. package/libs/hooks/useLocale.ts +34 -0
  43. package/libs/hooks/useTheme.ts +41 -30
  44. package/libs/index.ts +15 -1
  45. package/libs/util/config-provider.ts +193 -8
  46. package/locale/index.ts +2 -0
  47. package/locale/lang/en-US.ts +124 -0
  48. package/locale/lang/zh-CN.ts +124 -0
  49. package/package.json +1 -1
  50. package/theme.scss +1 -1
  51. package/types/global.d.ts +23 -1
package/changelog.md CHANGED
@@ -1,24 +1,68 @@
1
- ## 0.4.12(2026-01-04
2
-
3
- ### ♻️ Code Refactoring | 代码重构
4
-
5
- - **u-action-sheet:** 优化u-action-sheet组件的类型定义 ([bc5e474](https://github.com/anyup/uView-Pro/commit/bc5e474e7117e20495504ff0e2397a147595033c))
6
- - **zIndex:** 统一组件z-index值配置 ([ae1da98](https://github.com/anyup/uView-Pro/commit/ae1da986d307e5b4855fa32e5b2995fdb7be69e8))
7
-
8
- ### 🐛 Bug Fixes | Bug 修复
9
-
10
- - **form:** 修复field实例销毁时没有正常移除问题 ([57bfd3b](https://github.com/anyup/uView-Pro/commit/57bfd3bf9315d74c416869cd5a8c41562231166a))
1
+ ## 0.5.0(2026-01-14
11
2
 
12
3
  ### ✨ Features | 新功能
13
4
 
14
- - **u-tabbar:** 新增z-index属性支持自定义层级 ([c75d45f](https://github.com/anyup/uView-Pro/commit/c75d45f45e237453d0248124cdbe5bb797edb117))
15
- - **u-modal:** 增加u-modal基础属性支持和自定义样式功能 ([201231e](https://github.com/anyup/uView-Pro/commit/201231ee2e0c25c605f12f582650b048e83213de))
16
- - **components:** 增加u-pagination和u-picker自定义样式支持 ([eb22265](https://github.com/anyup/uView-Pro/commit/eb222657540179fcf8359133df83da89c10b09b8))
5
+ - **locale:** 添加组件国际化支持和 use locale hooks ([ff96211](https://github.com/anyup/uView-Pro/commit/ff96211423d27bde350a2ea4b9f1d5a5eb72d604))
6
+ - **locale:** 添加中、英文国际化语言字段支持 ([257eb41](https://github.com/anyup/uView-Pro/commit/257eb4143ac39cab4940ab76844d0c3be02b198c))
7
+ - **locale:** 所有组件实现组件国际化显示替换 ([ef52ff7](https://github.com/anyup/uView-Pro/commit/ef52ff7669c8cb7389377b8bdd4da681dddbb0a6))
8
+ - **locale:** 跟随vue-i18n国际化语言切换功能 ([cccecb0](https://github.com/anyup/uView-Pro/commit/cccecb03763990689e6e66d856cf3588157a61b6))
9
+ - **fullScreen:** 优化fullscreen页面配置和实现,支持国际化 ([8518218](https://github.com/anyup/uView-Pro/commit/85182186848fa6443ed74de9af1e3f5cd15fa724))
10
+ - **locale:** 新增locale国际化和vue-i18n切换示例页面 ([da79723](https://github.com/anyup/uView-Pro/commit/da797230005ff130ea66c315921e4d8d9fa613c1))
11
+ - **demo-page:** 添加支付宝小程序navbar兼容性处理 ([75284a4](https://github.com/anyup/uView-Pro/commit/75284a403b9eb7dee9625279ca5cadd14bba3a63))
12
+ - **u-skeleton:** 重构u-skeleton骨架屏组件实现全新设计 ([c39405d](https://github.com/anyup/uView-Pro/commit/c39405dfd8c4e1fe06fd842efde79ebf6706b0d1))
13
+ - **u-tabbar:** 重构u-tabbar组件内部结构,增加图标文字间距配置 ([e5655da](https://github.com/anyup/uView-Pro/commit/e5655da55c515a8288b12e37084dfec093da542b))
14
+ - **mp-weixin:** 添加小程序全局分享功能 ([e4f8bf5](https://github.com/anyup/uView-Pro/commit/e4f8bf5baae237e8dc443de7c90cd751ef045101))
15
+ - **useLocale:** uselocale hooks 支持命名空间功能 ([4d6e8f2](https://github.com/anyup/uView-Pro/commit/4d6e8f26976725cfdf862bd21af3648b864fdc29))
16
+ - **u-tabbar:** 优化u-tabbar文本样式渲染优先级 ([7d73861](https://github.com/anyup/uView-Pro/commit/7d73861b4cbe1266bc4cbfff31b45a57d9ed960f))
17
+ - **locale:** 初始化多语言时添加 isForce 参数支持强制设置默认语言 ([3309017](https://github.com/anyup/uView-Pro/commit/3309017e6fea3bc00f10efcec9f3ec3f83de9a88))
18
+ - **demo:** 优化国际化配置示例并添加多语言支持 ([177b978](https://github.com/anyup/uView-Pro/commit/177b97869f14023daf4bca632093076716b616d6))
19
+ - **theme:** 主题配置支持强制初始化功能 ([95c895d](https://github.com/anyup/uView-Pro/commit/95c895d0cfb1df37aa6285b88a2247f83add7361))
17
20
 
18
21
  ### 👥 Contributors
19
22
 
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> <a href="https://github.com/yoshinosk"><img src="https://github.com/yoshinosk.png?size=40" width="40" height="40" alt="yoshinosk" title="yoshinosk"/></a> <a href="https://github.com/liujiayii"><img src="https://github.com/liujiayii.png?size=40" width="40" height="40" alt="liujiayii" title="liujiayii"/></a>
23
+ <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
24
 
25
+ ## 0.4.13(2026-01-06)
26
+
27
+ ### ✨ Features | 新功能
28
+
29
+ - **theme:** 主题初始化时支持默认主题设置 ([f2b61f6](https://github.com/anyup/uView-Pro/commit/f2b61f6caa1c285753b2e02f97309aa55bb77cca))
30
+ - **theme:** 增强主题系统初始化配置,支持在初始化时设置默认主题和暗黑模式 ([d228d10](https://github.com/anyup/uView-Pro/commit/d228d100baf619799b1dc1c8e289e1e8c9a30699))
31
+
32
+ ### 🐛 Bug Fixes | Bug 修复
33
+
34
+ - **u-number-box:** 修复 u-number-box 步进器 disabled 时字体不显示问题 ([75b3a74](https://github.com/anyup/uView-Pro/commit/75b3a74e6e763dec1a1ee0d3b4d0a62d646ee389))
35
+ - **u-textarea:** 修复u-textarea组件设置props.border='none'无效的问题 ([c5a97ba](https://github.com/anyup/uView-Pro/commit/c5a97ba4c00d226c8c0fd9605660d2654dec9dc2))
36
+
37
+ ### ♻️ Code Refactoring | 代码重构
38
+
39
+ - **theme:** 调整u-bg-gray-light默认色值,优化演示示例 ([37d6bda](https://github.com/anyup/uView-Pro/commit/37d6bda939f5d7c54aec09960878f236dfa32bb2))
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
+
45
+ ## 0.4.12(2026-01-04)
46
+
47
+ ### ♻️ Code Refactoring | 代码重构
48
+
49
+ - **u-action-sheet:** 优化u-action-sheet组件的类型定义 ([bc5e474](https://github.com/anyup/uView-Pro/commit/bc5e474e7117e20495504ff0e2397a147595033c))
50
+ - **zIndex:** 统一组件z-index值配置 ([ae1da98](https://github.com/anyup/uView-Pro/commit/ae1da986d307e5b4855fa32e5b2995fdb7be69e8))
51
+
52
+ ### 🐛 Bug Fixes | Bug 修复
53
+
54
+ - **form:** 修复field实例销毁时没有正常移除问题 ([57bfd3b](https://github.com/anyup/uView-Pro/commit/57bfd3bf9315d74c416869cd5a8c41562231166a))
55
+
56
+ ### ✨ Features | 新功能
57
+
58
+ - **u-tabbar:** 新增z-index属性支持自定义层级 ([c75d45f](https://github.com/anyup/uView-Pro/commit/c75d45f45e237453d0248124cdbe5bb797edb117))
59
+ - **u-modal:** 增加u-modal基础属性支持和自定义样式功能 ([201231e](https://github.com/anyup/uView-Pro/commit/201231ee2e0c25c605f12f582650b048e83213de))
60
+ - **components:** 增加u-pagination和u-picker自定义样式支持 ([eb22265](https://github.com/anyup/uView-Pro/commit/eb222657540179fcf8359133df83da89c10b09b8))
61
+
62
+ ### 👥 Contributors
63
+
64
+ <a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a> <a href="https://github.com/yoshinosk"><img src="https://github.com/yoshinosk.png?size=40" width="40" height="40" alt="yoshinosk" title="yoshinosk"/></a> <a href="https://github.com/liujiayii"><img src="https://github.com/liujiayii.png?size=40" width="40" height="40" alt="liujiayii" title="liujiayii"/></a>
65
+
22
66
  ## 0.4.11(2025-12-30)
23
67
 
24
68
  ### 📦‍ Build System | 打包构建
@@ -1,7 +1,9 @@
1
1
  import { type ExtractPropTypes, type PropType } from 'vue';
2
2
  import type { ActionSheetItem, ActionSheetTips } from '../../types/global';
3
3
  import { baseProps } from '../common/props';
4
- import { getColor } from '../../';
4
+ import { getColor, useLocale } from '../../';
5
+
6
+ const { t } = useLocale();
5
7
 
6
8
  /**
7
9
  * actionSheet 操作菜单
@@ -32,7 +34,7 @@ export const ActionSheetProps = {
32
34
  /** 弹出的z-index值 */
33
35
  zIndex: { type: [String, Number], default: 0 },
34
36
  /** 取消按钮的文字提示 */
35
- cancelText: { type: String, default: '取消' },
37
+ cancelText: { type: String, default: () => t('actionSheet.cancelText') },
36
38
  /** 字体颜色 */
37
39
  color: { type: String, default: () => getColor('mainColor') },
38
40
  /** 字体大小 */
@@ -27,12 +27,12 @@
27
27
  </view>
28
28
  <view class="cropper-buttons safe-area-padding" :style="{ height: bottomNavHeight + 'px' }">
29
29
  <!-- #ifdef H5 -->
30
- <view class="upload" @tap="uploadTap">选择图片</view>
30
+ <view class="upload" @tap="uploadTap">{{ t('avatarCropper.select') }}</view>
31
31
  <!-- #endif -->
32
32
  <!-- #ifndef H5 -->
33
- <view class="upload" @tap="uploadTap">重新选择</view>
33
+ <view class="upload" @tap="uploadTap">{{ t('avatarCropper.reselect') }}</view>
34
34
  <!-- #endif -->
35
- <view class="getCropperImage" @tap="() => getCropperImage(false)">确定</view>
35
+ <view class="getCropperImage" @tap="() => getCropperImage(false)">{{ t('avatarCropper.confirm') }}</view>
36
36
  </view>
37
37
  </view>
38
38
  </template>
@@ -53,7 +53,7 @@ export default {
53
53
  <script setup lang="ts">
54
54
  // @ts-nocheck
55
55
  import { ref, reactive, onMounted } from 'vue';
56
- import { $u } from '../..';
56
+ import { $u, useLocale } from '../..';
57
57
  // 兼容 UMD/ESM 导入 weCropper.js
58
58
  import WeCropper from './weCropper';
59
59
  import { AvatarCropperProps } from './types';
@@ -64,6 +64,8 @@ import { AvatarCropperProps } from './types';
64
64
  */
65
65
  const props = defineProps(AvatarCropperProps);
66
66
 
67
+ const { t } = useLocale();
68
+
67
69
  /**
68
70
  * 组合式API变量声明
69
71
  * 保留所有说明注释
@@ -190,7 +192,7 @@ function touchEnd(e: any) {
190
192
  * @param isPre 是否预览
191
193
  */
192
194
  function getCropperImage(isPre = false) {
193
- if (!src.value) return $u.toast('请先选择图片再裁剪');
195
+ if (!src.value) return $u.toast(t('avatarCropper.noSelect'));
194
196
 
195
197
  const cropper_opt = {
196
198
  destHeight: Number(destWidth.value), // uni.canvasToTempFilePath要求这些参数为数值
@@ -200,7 +202,7 @@ function getCropperImage(isPre = false) {
200
202
  cropper.getCropperImage(cropper_opt, (path: string, err: any) => {
201
203
  if (err) {
202
204
  uni.showModal({
203
- title: '温馨提示',
205
+ title: t('avatarCropper.modalTitle'),
204
206
  content: err.message
205
207
  });
206
208
  } else {
@@ -28,7 +28,7 @@ export const BadgeProps = {
28
28
  /** 字体大小 */
29
29
  fontSize: { type: [String, Number], default: '24' },
30
30
  /** 字体颜色 */
31
- color: { type: String, default: '#ffffff' },
31
+ color: { type: String, default: 'var(--u-white-color)' },
32
32
  /** badge的背景颜色 */
33
33
  bgColor: { type: String, default: '' },
34
34
  /** 是否让badge组件的中心点和父组件右上角重合,配置的话,offset将会失效 */
@@ -1,7 +1,9 @@
1
1
  import { type ExtractPropTypes, type PropType } from 'vue';
2
2
  import type { CalendarChangeDate, CalendarChangeRange, CalendarMode, ThemeType } from '../../types/global';
3
3
  import { baseProps } from '../common/props';
4
- import { getColor } from '../../';
4
+ import { getColor, useLocale } from '../../';
5
+
6
+ const { t } = useLocale();
5
7
 
6
8
  /**
7
9
  * calendar 日历类型定义
@@ -48,9 +50,9 @@ export const CalendarProps = {
48
50
  /** 范围内日期字体颜色 */
49
51
  rangeColor: { type: String, default: () => getColor('primary') },
50
52
  /** mode=range时生效,起始日期自定义文案 */
51
- startText: { type: String, default: '开始' },
53
+ startText: { type: String, default: () => t('calendar.startText') },
52
54
  /** mode=range时生效,结束日期自定义文案 */
53
- endText: { type: String, default: '结束' },
55
+ endText: { type: String, default: () => t('calendar.endText') },
54
56
  /** 按钮样式类型 */
55
57
  btnType: { type: String as PropType<ThemeType>, default: 'primary' },
56
58
  /** 当前选中日期带选中效果 */
@@ -60,7 +62,7 @@ export const CalendarProps = {
60
62
  /** 是否显示右上角的关闭图标 */
61
63
  closeable: { type: Boolean, default: true },
62
64
  /** 顶部的提示文字 */
63
- toolTip: { type: String, default: '选择日期' },
65
+ toolTip: { type: String, default: () => t('calendar.toolTip') },
64
66
  /** 是否显示农历 */
65
67
  showLunar: { type: Boolean, default: false },
66
68
  /** 是否在页面中显示 */
@@ -223,10 +223,12 @@
223
223
  <view class="u-calendar__bottom">
224
224
  <view class="u-calendar__bottom__choose">
225
225
  <text>{{ mode == 'date' ? activeDate : startDate }}</text>
226
- <text v-if="endDate">至{{ endDate }}</text>
226
+ <text v-if="endDate">{{ t('calendar.to') }}{{ endDate }}</text>
227
227
  </view>
228
228
  <view class="u-calendar__bottom__btn">
229
- <u-button :type="btnType" shape="circle" size="default" @click="btnFix(false)">确定</u-button>
229
+ <u-button :type="btnType" shape="circle" size="default" @click="btnFix(false)">
230
+ {{ t('calendar.confirmText') }}
231
+ </u-button>
230
232
  </view>
231
233
  </view>
232
234
  </view>
@@ -248,7 +250,7 @@ export default {
248
250
 
249
251
  <script setup lang="ts">
250
252
  import { ref, computed, watch, onMounted, useSlots } from 'vue';
251
- import { $u } from '../..';
253
+ import { $u, useLocale } from '../..';
252
254
  import { CalendarProps, type CalendarEmits } from './types';
253
255
  import Calendar from '../../libs/util/calendar';
254
256
 
@@ -287,6 +289,8 @@ const props = defineProps(CalendarProps);
287
289
  const emit = defineEmits<CalendarEmits>();
288
290
  const slots = useSlots();
289
291
 
292
+ const { t } = useLocale();
293
+
290
294
  // 组件内部状态
291
295
  // 星期几,值为1-7
292
296
  const weekday = ref(1);
@@ -312,7 +316,15 @@ const endDate = ref('');
312
316
  const isStart = ref(true);
313
317
  const min = ref<{ year: number; month: number; day: number } | null>(null);
314
318
  const max = ref<{ year: number; month: number; day: number } | null>(null);
315
- const weekDayZh = ref(['日', '一', '二', '三', '四', '五', '六']);
319
+ const weekDayZh = ref([
320
+ t('calendar.sun'),
321
+ t('calendar.mon'),
322
+ t('calendar.tue'),
323
+ t('calendar.wed'),
324
+ t('calendar.thu'),
325
+ t('calendar.fri'),
326
+ t('calendar.sat')
327
+ ]);
316
328
 
317
329
  const dataChange = computed(() => `${props.mode}-${props.minDate}-${props.maxDate}`);
318
330
  const lunarChange = computed(() => props.showLunar);
@@ -443,7 +455,7 @@ function getWeekday(yearNum: number, monthNum: number) {
443
455
  function checkRange(yearNum: number) {
444
456
  let overstep = false;
445
457
  if (yearNum < Number(props.minYear) || yearNum > Number(props.maxYear)) {
446
- uni.showToast({ title: '日期超出范围啦~', icon: 'none' });
458
+ uni.showToast({ title: t('calendar.outOfRange'), icon: 'none' });
447
459
  overstep = true;
448
460
  }
449
461
  return overstep;
@@ -491,7 +503,7 @@ function changeData() {
491
503
  daysArr.value = generateArray(1, days.value);
492
504
  weekday.value = getWeekday(year.value, month.value);
493
505
  weekdayArr.value = generateArray(1, weekday.value);
494
- showTitle.value = `${year.value}年${month.value}月`;
506
+ showTitle.value = `${year.value}${t('calendar.year')}${month.value}${t('calendar.month')}`;
495
507
  if (props.showLunar) {
496
508
  lunarArr.value = [];
497
509
  daysArr.value.forEach(d => {
@@ -28,6 +28,17 @@ export const ConfigProviderProps = {
28
28
  themes: {
29
29
  type: Array as PropType<Theme[]>,
30
30
  default: () => configProvider.getThemes()
31
+ },
32
+ /**
33
+ * 国际化配置:传入 locale 列表(数组)并可指定默认语言 currentLocale
34
+ */
35
+ locales: {
36
+ type: Array as PropType<any[]>,
37
+ default: () => []
38
+ },
39
+ currentLocale: {
40
+ type: String,
41
+ default: () => configProvider.getCurrentLocale()?.name ?? ''
31
42
  }
32
43
  };
33
44
 
@@ -13,7 +13,7 @@
13
13
  * - 组件/页面场景(推荐):使用 `useTheme()` 组合式函数在组件内部读取响应式 `currentTheme`、`themes`、`darkMode` 并通过 `setTheme()` 和 `setDarkMode()` 切换主题/模式。
14
14
  *
15
15
  * 该组件的行为:
16
- * - 如果在挂载时传入 `themes`,会调用 `configProvider.init(themes)`
16
+ * - 如果在挂载时传入 `themes`,会调用 `configProvider.initTheme(themes)`
17
17
  * - 如果传入 `currentTheme`,会优先设置当前主题
18
18
  * - 如果传入 `darkMode`,会设置当前的暗黑模式状态,同时在 document 上添加 `u-theme-dark` 或 `u-theme-light` 类名
19
19
  *
@@ -36,6 +36,7 @@ import { computed, watch, onMounted } from 'vue';
36
36
  import { ConfigProviderProps } from './types';
37
37
  import { $u, configProvider } from '../../libs';
38
38
  import { useTheme } from '../../libs/hooks/useTheme';
39
+ import { useLocale } from '../../libs/hooks/useLocale';
39
40
 
40
41
  const props = defineProps(ConfigProviderProps);
41
42
 
@@ -63,7 +64,7 @@ const bootstrapTheme = () => {
63
64
 
64
65
  // 未初始化,进行初始化
65
66
  if (props.themes && props.themes.length) {
66
- configProvider.init(props.themes, props.currentTheme as any);
67
+ configProvider.initTheme(props.themes, props.currentTheme as any);
67
68
  } else {
68
69
  // 使用 useTheme 的 initTheme,它会处理默认主题
69
70
  const { initTheme } = useTheme();
@@ -78,9 +79,31 @@ const bootstrapTheme = () => {
78
79
  }
79
80
  };
80
81
 
82
+ const bootstrapLocale = () => {
83
+ // 初始化国际化
84
+ try {
85
+ const { initLocales, setLocale, getLocales } = useLocale();
86
+ const existingLocales = getLocales();
87
+ if (existingLocales.length > 0) {
88
+ if (props.currentLocale) {
89
+ setLocale(props.currentLocale as string);
90
+ }
91
+ } else {
92
+ if (props.locales && props.locales.length) {
93
+ initLocales(props.locales, props.currentLocale as any);
94
+ } else {
95
+ initLocales(undefined, props.currentLocale as any);
96
+ }
97
+ }
98
+ } catch (e) {
99
+ console.warn('[u-config-provider] init locales failed', e);
100
+ }
101
+ };
102
+
81
103
  // 当传入自定义 themes 时,初始化全局 configProvider(覆盖已有)
82
104
  onMounted(() => {
83
105
  bootstrapTheme();
106
+ bootstrapLocale();
84
107
  });
85
108
 
86
109
  // 监听外部 props 变化(如果上层修改 prop)
@@ -91,7 +114,7 @@ watch(
91
114
  // 那么对其做深度监听会在我们内部更新主题对象时触发该回调,进而再次调用 init 导致循环更新。
92
115
  // 为避免该情况,先做简单保护:当传入对象正是 configProvider.themesRef.value 时不重复初始化。
93
116
  if (val && val.length && val !== configProvider.themesRef.value) {
94
- configProvider.init(val, props.currentTheme as any);
117
+ configProvider.initTheme(val, props.currentTheme as any);
95
118
  }
96
119
  },
97
120
  { deep: true }
@@ -116,6 +139,28 @@ watch(
116
139
  }
117
140
  );
118
141
 
142
+ // 监听 locales prop 变化
143
+ watch(
144
+ () => props.locales,
145
+ val => {
146
+ if (val && val.length) {
147
+ const { initLocales } = useLocale();
148
+ initLocales(val, props.currentLocale as any);
149
+ }
150
+ },
151
+ { deep: true }
152
+ );
153
+
154
+ watch(
155
+ () => props.currentLocale,
156
+ val => {
157
+ if (val) {
158
+ const { setLocale } = useLocale();
159
+ setLocale(val);
160
+ }
161
+ }
162
+ );
163
+
119
164
  // 监听全局主题变更并触发事件
120
165
  watch(
121
166
  () => configProvider.currentThemeRef.value,
@@ -18,7 +18,7 @@
18
18
  }"
19
19
  v-if="props.showDays && (props.hideZeroDay || (!props.hideZeroDay && d != '00'))"
20
20
  >
21
- {{ props.separator == 'colon' && props.showHours ? ':' : '' }}
21
+ {{ props.separator == 'colon' && props.showHours ? ':' : t('countDown.day') }}
22
22
  </view>
23
23
  <view class="u-countdown-item" :style="$u.toStyle(itemStyle)" v-if="props.showHours">
24
24
  <view class="u-countdown-time" :style="{ fontSize: props.fontSize + 'rpx', color: props.color }">
@@ -34,7 +34,7 @@
34
34
  }"
35
35
  v-if="props.showHours"
36
36
  >
37
- {{ props.separator == 'colon' && props.showMinutes ? ':' : '' }}
37
+ {{ props.separator == 'colon' && props.showMinutes ? ':' : t('countDown.hour') }}
38
38
  </view>
39
39
  <view class="u-countdown-item" :style="$u.toStyle(itemStyle)" v-if="props.showMinutes">
40
40
  <view class="u-countdown-time" :style="{ fontSize: props.fontSize + 'rpx', color: props.color }">
@@ -50,7 +50,7 @@
50
50
  }"
51
51
  v-if="props.showMinutes"
52
52
  >
53
- {{ props.separator == 'colon' && props.showSeconds ? ':' : '' }}
53
+ {{ props.separator == 'colon' && props.showSeconds ? ':' : t('countDown.minute') }}
54
54
  </view>
55
55
  <view class="u-countdown-item" :style="$u.toStyle(itemStyle)" v-if="props.showSeconds">
56
56
  <view class="u-countdown-time" :style="{ fontSize: props.fontSize + 'rpx', color: props.color }">
@@ -62,7 +62,7 @@
62
62
  :style="{ fontSize: props.separatorSize + 'rpx', color: props.separatorColor, paddingBottom: 0 }"
63
63
  v-if="props.showSeconds && props.separator == 'zh'"
64
64
  >
65
-
65
+ {{ t('countDown.second') }}
66
66
  </view>
67
67
  </view>
68
68
  </template>
@@ -83,7 +83,9 @@ export default {
83
83
  <script setup lang="ts">
84
84
  import { ref, computed, watch, onMounted } from 'vue';
85
85
  import { CountDownProps } from './types';
86
- import { $u } from '../../';
86
+ import { $u, useLocale } from '../../';
87
+
88
+ const { t } = useLocale();
87
89
 
88
90
  /**
89
91
  * countDown 倒计时
@@ -37,7 +37,10 @@ export default {
37
37
 
38
38
  <script setup lang="ts">
39
39
  import { EmptyProps } from './types';
40
- import { $u } from '../../';
40
+ import { $u, useLocale } from '../../';
41
+ import { computed } from 'vue';
42
+
43
+ const { t } = useLocale();
41
44
 
42
45
  /**
43
46
  * empty 内容为空
@@ -61,22 +64,24 @@ const props = defineProps(EmptyProps);
61
64
  /**
62
65
  * 预置图标对应的提示文字
63
66
  */
64
- const icons: Record<string, string> = {
65
- car: '购物车为空',
66
- page: '页面不存在',
67
- search: '没有搜索结果',
68
- address: '没有收货地址',
69
- wifi: '没有WiFi',
70
- order: '订单为空',
71
- coupon: '没有优惠券',
72
- favor: '暂无收藏',
73
- permission: '无权限',
74
- history: '无历史记录',
75
- news: '无新闻列表',
76
- message: '消息列表为空',
77
- list: '列表为空',
78
- data: '数据为空'
79
- };
67
+ const icons = computed(() => {
68
+ return {
69
+ car: t('empty.car'),
70
+ page: t('empty.page'),
71
+ search: t('empty.search'),
72
+ address: t('empty.address'),
73
+ wifi: t('empty.wifi'),
74
+ order: t('empty.order'),
75
+ coupon: t('empty.coupon'),
76
+ favor: t('empty.favor'),
77
+ permission: t('empty.permission'),
78
+ history: t('empty.history'),
79
+ news: t('empty.news'),
80
+ message: t('empty.message'),
81
+ list: t('empty.list'),
82
+ data: t('empty.data')
83
+ };
84
+ });
80
85
  </script>
81
86
 
82
87
  <style scoped lang="scss">
@@ -9,6 +9,8 @@ export const FullScreenProps = {
9
9
  ...baseProps,
10
10
  /** 是否显示弹窗 */
11
11
  show: { type: Boolean, default: false },
12
+ /** 弹窗标题 */
13
+ title: { type: String, default: '' },
12
14
  /** 升级内容,支持富文本 */
13
15
  content: { type: String, default: '' }
14
16
  };
@@ -4,8 +4,8 @@
4
4
  :class="customClass"
5
5
  :style="$u.toStyle(customStyle)"
6
6
  :show-cancel-button="true"
7
- confirm-text="升级"
8
- title="发现新版本"
7
+ :confirm-text="t('fullScreen.upgrade')"
8
+ :title="title || t('fullScreen.title')"
9
9
  @cancel="cancel"
10
10
  @confirm="confirm"
11
11
  >
@@ -31,7 +31,7 @@ export default {
31
31
  <script setup lang="ts">
32
32
  import { FullScreenProps } from './types';
33
33
  import { ref, onMounted } from 'vue';
34
- import { $u } from '../../';
34
+ import { $u, useLocale } from '../../';
35
35
 
36
36
  /**
37
37
  * 压窗屏升级弹窗组件
@@ -48,12 +48,8 @@ const show = ref(false);
48
48
  /**
49
49
  * 升级内容,支持富文本
50
50
  */
51
- const content = ref<string>(`
52
- 1. 修复badge组件的size参数无效问题<br>
53
- 2. 新增Modal模态框组件<br>
54
- 3. 新增压窗屏组件,可以在APP上以弹窗的形式遮盖导航栏和底部tabbar<br>
55
- 4. 修复键盘组件在微信小程序上遮罩无效的问题
56
- `);
51
+
52
+ const { t } = useLocale();
57
53
 
58
54
  /**
59
55
  * 页面加载完成后自动显示弹窗
@@ -1,6 +1,9 @@
1
1
  import type { ExtractPropTypes, PropType } from 'vue';
2
2
  import type { InputAlign, InputConfirmType, InputType } from '../../types/global';
3
3
  import { baseProps } from '../common/props';
4
+ import { useLocale } from '../../';
5
+
6
+ const { t } = useLocale();
4
7
 
5
8
  /**
6
9
  * u-input 组件 props 类型定义
@@ -27,7 +30,7 @@ export const InputProps = {
27
30
  /** placeholder显示值(默认 '请输入内容') */
28
31
  placeholder: {
29
32
  type: String,
30
- default: '请输入内容'
33
+ default: () => t('input.placeholder')
31
34
  },
32
35
  /** 是否禁用输入框(默认false) */
33
36
  disabled: {
@@ -1,4 +1,7 @@
1
1
  import type { ExtractPropTypes, PropType } from 'vue';
2
+ import { useLocale } from '../../';
3
+
4
+ const { t } = useLocale();
2
5
 
3
6
  /**
4
7
  * u-keyboard 组件 Props 类型定义
@@ -32,9 +35,9 @@ export const KeyboardProps = {
32
35
  /** z-index值 */
33
36
  zIndex: { type: [Number, String] as PropType<string | number>, default: '' },
34
37
  /** 取消按钮的文字 */
35
- cancelText: { type: String, default: '取消' },
38
+ cancelText: { type: String, default: () => t('keyboard.cancelText') },
36
39
  /** 确认按钮的文字 */
37
- confirmText: { type: String, default: '确认' }
40
+ confirmText: { type: String, default: () => t('keyboard.confirmText') }
38
41
  };
39
42
 
40
43
  export type KeyboardProps = ExtractPropTypes<typeof KeyboardProps>;
@@ -16,7 +16,15 @@
16
16
  {{ cancelBtn ? cancelText : '' }}
17
17
  </view>
18
18
  <view v-if="showTips" class="u-tooltip-item u-tooltip-tips">
19
- {{ tips ? tips : mode == 'number' ? '数字键盘' : mode == 'card' ? '身份证键盘' : '车牌号键盘' }}
19
+ {{
20
+ tips
21
+ ? tips
22
+ : mode == 'number'
23
+ ? t('keyboard.number')
24
+ : mode == 'card'
25
+ ? t('keyboard.idCard')
26
+ : t('keyboard.plate')
27
+ }}
20
28
  </view>
21
29
  <view
22
30
  v-if="confirmBtn"
@@ -58,7 +66,7 @@ export default {
58
66
  <script setup lang="ts">
59
67
  import { KeyboardProps } from './types';
60
68
  import { computed } from 'vue';
61
- import { $u } from '../..';
69
+ import { $u, useLocale } from '../..';
62
70
 
63
71
  /**
64
72
  * keyboard 键盘
@@ -87,6 +95,8 @@ import { $u } from '../..';
87
95
  const props = defineProps(KeyboardProps);
88
96
  const emit = defineEmits(['change', 'update:modelValue', 'confirm', 'cancel', 'backspace']);
89
97
 
98
+ const { t } = useLocale();
99
+
90
100
  const uZIndex = computed(() => (props.zIndex ? props.zIndex : $u.zIndex.popup));
91
101
 
92
102
  const popupValue = computed({
@@ -147,12 +157,17 @@ function backspace() {
147
157
 
148
158
  .u-tooltip-item {
149
159
  color: var(--u-main-color);
150
- flex: 0 0 33.333333%;
160
+ flex: 0 0 30%;
151
161
  text-align: center;
152
162
  padding: 20rpx 10rpx;
153
163
  font-size: 28rpx;
154
164
  }
155
165
 
166
+ .u-tooltip-tips {
167
+ flex-basis: 40%;
168
+ word-break: break-all;
169
+ }
170
+
156
171
  .u-tooltips-submit {
157
172
  text-align: right;
158
173
  flex-grow: 1;
@@ -1,5 +1,7 @@
1
1
  import type { ExtractPropTypes, PropType } from 'vue';
2
- import { getColor } from '../../';
2
+ import { getColor, useLocale } from '../../';
3
+
4
+ const { t } = useLocale();
3
5
 
4
6
  /**
5
7
  * u-link 组件 props 类型定义
@@ -29,7 +31,7 @@ export const LinkProps = {
29
31
  /** 小程序中复制到粘贴板的提示语 */
30
32
  mpTips: {
31
33
  type: String,
32
- default: '链接已复制,请在浏览器打开'
34
+ default: () => t('link.mpTips')
33
35
  },
34
36
  /** 下划线颜色 */
35
37
  lineColor: {