uview-plus 3.8.127 → 3.8.129
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.
- package/README.md +13 -0
- package/changelog.md +38 -0
- package/components/u-barcode/u-barcode.vue +1 -1
- package/components/u-calendar/month.vue +71 -35
- package/components/u-calendar/u-calendar.vue +67 -31
- package/components/u-car-keyboard/u-car-keyboard.vue +21 -8
- package/components/u-cate-tab/u-cate-tab.vue +56 -11
- package/components/u-cell/u-cell.vue +20 -16
- package/components/u-collapse-item/u-collapse-item.vue +34 -11
- package/components/u-datetime-picker/u-datetime-picker.vue +16 -0
- package/components/u-dropdown/u-dropdown.vue +15 -0
- package/components/u-grid/u-grid.vue +9 -0
- package/components/u-grid-item/u-grid-item.vue +8 -0
- package/components/u-icon/util.js +16 -1
- package/components/u-list/u-list.vue +59 -8
- package/components/u-list-item/u-list-item.vue +9 -3
- package/components/u-navbar/navbar.js +2 -1
- package/components/u-navbar/props.js +6 -1
- package/components/u-navbar/u-navbar.vue +20 -3
- package/components/u-number-keyboard/u-number-keyboard.vue +18 -6
- package/components/u-parse/parser.js +4 -3
- package/components/u-picker/u-picker.vue +6 -3
- package/components/u-search/u-search.vue +15 -5
- package/components/u-select/u-select.vue +206 -31
- package/components/u-slider/u-slider.vue +21 -12
- package/components/u-tabs/u-tabs.vue +5 -1
- package/components/u-text/u-text.vue +34 -32
- package/components/u-textarea/props.js +5 -0
- package/components/u-textarea/textarea.js +4 -1
- package/components/u-textarea/u-textarea.vue +3 -1
- package/components/u-upload/u-upload.vue +15 -4
- package/components/u-upload/utils.js +4 -1
- package/components/u-video/danmaku.js +97 -0
- package/components/u-video/props.js +205 -0
- package/components/u-video/u-video.vue +1427 -0
- package/components/u-video/video-danmaku.vue +273 -0
- package/components/u-video/video-slider.vue +179 -0
- package/components/u-video/video-utils.js +98 -0
- package/components/u-video/video.js +72 -0
- package/libs/config/props.js +2 -1
- package/libs/function/test.js +2 -0
- package/libs/i18n/locales/de.js +14 -1
- package/libs/i18n/locales/en.js +14 -1
- package/libs/i18n/locales/es.js +14 -1
- package/libs/i18n/locales/fr.js +14 -1
- package/libs/i18n/locales/ja.js +14 -1
- package/libs/i18n/locales/ko.js +14 -1
- package/libs/i18n/locales/ru.js +14 -1
- package/libs/i18n/locales/th.js +14 -1
- package/libs/i18n/locales/zh-Hans.js +14 -1
- package/libs/i18n/locales/zh-Hant.js +14 -1
- package/libs/mixin/mixin.js +11 -6
- package/package.json +1 -1
- package/skills/README.md +66 -0
- package/skills/uview-plus/SKILL.md +95 -0
- package/skills/uview-plus/references/api.md +105 -0
- package/skills/uview-plus/references/components.md +156 -0
- package/skills/uview-plus/references/icons.md +223 -0
- package/skills/uview-plus/references/pitfalls.md +77 -0
- package/skills/uview-plus/references/setup.md +168 -0
- package/types/comps/form.d.ts +44 -8
- package/types/comps/list.d.ts +1 -1
- package/types/comps/listItem.d.ts +1 -1
- package/types/comps/navbar.d.ts +6 -0
- package/types/comps/numberBox.d.ts +85 -21
- package/types/comps/pagination.d.ts +96 -0
- package/types/comps/swipeActionItem.d.ts +3 -4
- package/types/comps/textarea.d.ts +9 -3
- package/types/comps.d.ts +1 -0
- package/types/index.d.ts +5 -0
package/libs/i18n/locales/es.js
CHANGED
|
@@ -82,5 +82,18 @@ export default {
|
|
|
82
82
|
"up.goodsSku.price": "Precio",
|
|
83
83
|
"up.goodsSku.amount": "Piezas",
|
|
84
84
|
"up.goodsSku.choosed": "Seleccionado",
|
|
85
|
-
"up.goodsSku.buyAmount": "Cantidad"
|
|
85
|
+
"up.goodsSku.buyAmount": "Cantidad",
|
|
86
|
+
"up.video.rate": "Velocidad",
|
|
87
|
+
"up.video.volume": "Volumen",
|
|
88
|
+
"up.video.danmu": "Comentarios",
|
|
89
|
+
"up.video.danmuPlaceholder": "Envía un comentario",
|
|
90
|
+
"up.video.send": "Enviar",
|
|
91
|
+
"up.video.episodes": "Episodios",
|
|
92
|
+
"up.video.lock": "Bloqueado",
|
|
93
|
+
"up.video.unlock": "Desbloqueado",
|
|
94
|
+
"up.video.ad": "Anuncio",
|
|
95
|
+
"up.video.adCountdown": "Anuncio {seconds}s",
|
|
96
|
+
"up.video.skipAd": "Saltar anuncio",
|
|
97
|
+
"up.video.adDetail": "Más información",
|
|
98
|
+
"up.video.error": "Error de reproducción"
|
|
86
99
|
}
|
package/libs/i18n/locales/fr.js
CHANGED
|
@@ -82,5 +82,18 @@ export default {
|
|
|
82
82
|
"up.goodsSku.price": "Prix",
|
|
83
83
|
"up.goodsSku.amount": "Pièces",
|
|
84
84
|
"up.goodsSku.choosed": "Sélectionné",
|
|
85
|
-
"up.goodsSku.buyAmount": "Quantité"
|
|
85
|
+
"up.goodsSku.buyAmount": "Quantité",
|
|
86
|
+
"up.video.rate": "Vitesse",
|
|
87
|
+
"up.video.volume": "Volume",
|
|
88
|
+
"up.video.danmu": "Commentaires",
|
|
89
|
+
"up.video.danmuPlaceholder": "Envoyer un commentaire",
|
|
90
|
+
"up.video.send": "Envoyer",
|
|
91
|
+
"up.video.episodes": "Épisodes",
|
|
92
|
+
"up.video.lock": "Verrouillé",
|
|
93
|
+
"up.video.unlock": "Déverrouillé",
|
|
94
|
+
"up.video.ad": "Publicité",
|
|
95
|
+
"up.video.adCountdown": "Publicité {seconds}s",
|
|
96
|
+
"up.video.skipAd": "Ignorer la publicité",
|
|
97
|
+
"up.video.adDetail": "En savoir plus",
|
|
98
|
+
"up.video.error": "Échec de la lecture"
|
|
86
99
|
}
|
package/libs/i18n/locales/ja.js
CHANGED
|
@@ -82,5 +82,18 @@ export default {
|
|
|
82
82
|
"up.goodsSku.price": "価格",
|
|
83
83
|
"up.goodsSku.amount": "個",
|
|
84
84
|
"up.goodsSku.choosed": "選択済み",
|
|
85
|
-
"up.goodsSku.buyAmount": "購入数量"
|
|
85
|
+
"up.goodsSku.buyAmount": "購入数量",
|
|
86
|
+
"up.video.rate": "再生速度",
|
|
87
|
+
"up.video.volume": "音量",
|
|
88
|
+
"up.video.danmu": "コメント",
|
|
89
|
+
"up.video.danmuPlaceholder": "コメントを送信",
|
|
90
|
+
"up.video.send": "送信",
|
|
91
|
+
"up.video.episodes": "エピソード",
|
|
92
|
+
"up.video.lock": "ロック中",
|
|
93
|
+
"up.video.unlock": "ロック解除",
|
|
94
|
+
"up.video.ad": "広告",
|
|
95
|
+
"up.video.adCountdown": "広告 {seconds}秒",
|
|
96
|
+
"up.video.skipAd": "広告をスキップ",
|
|
97
|
+
"up.video.adDetail": "詳細を見る",
|
|
98
|
+
"up.video.error": "再生できません"
|
|
86
99
|
}
|
package/libs/i18n/locales/ko.js
CHANGED
|
@@ -82,5 +82,18 @@ export default {
|
|
|
82
82
|
"up.goodsSku.price": "가격",
|
|
83
83
|
"up.goodsSku.amount": "개",
|
|
84
84
|
"up.goodsSku.choosed": "선택됨",
|
|
85
|
-
"up.goodsSku.buyAmount": "구매 수량"
|
|
85
|
+
"up.goodsSku.buyAmount": "구매 수량",
|
|
86
|
+
"up.video.rate": "재생 속도",
|
|
87
|
+
"up.video.volume": "음량",
|
|
88
|
+
"up.video.danmu": "탄막",
|
|
89
|
+
"up.video.danmuPlaceholder": "탄막을 입력하세요",
|
|
90
|
+
"up.video.send": "보내기",
|
|
91
|
+
"up.video.episodes": "회차",
|
|
92
|
+
"up.video.lock": "잠김",
|
|
93
|
+
"up.video.unlock": "잠금 해제",
|
|
94
|
+
"up.video.ad": "광고",
|
|
95
|
+
"up.video.adCountdown": "광고 {seconds}초",
|
|
96
|
+
"up.video.skipAd": "광고 건너뛰기",
|
|
97
|
+
"up.video.adDetail": "자세히 보기",
|
|
98
|
+
"up.video.error": "재생 실패"
|
|
86
99
|
}
|
package/libs/i18n/locales/ru.js
CHANGED
|
@@ -82,5 +82,18 @@ export default {
|
|
|
82
82
|
"up.goodsSku.price": "Цена",
|
|
83
83
|
"up.goodsSku.amount": "Штук",
|
|
84
84
|
"up.goodsSku.choosed": "Выбрано",
|
|
85
|
-
"up.goodsSku.buyAmount": "Количество"
|
|
85
|
+
"up.goodsSku.buyAmount": "Количество",
|
|
86
|
+
"up.video.rate": "Скорость",
|
|
87
|
+
"up.video.volume": "Громкость",
|
|
88
|
+
"up.video.danmu": "Комментарии",
|
|
89
|
+
"up.video.danmuPlaceholder": "Отправить комментарий",
|
|
90
|
+
"up.video.send": "Отправить",
|
|
91
|
+
"up.video.episodes": "Серии",
|
|
92
|
+
"up.video.lock": "Заблокировано",
|
|
93
|
+
"up.video.unlock": "Разблокировано",
|
|
94
|
+
"up.video.ad": "Реклама",
|
|
95
|
+
"up.video.adCountdown": "Реклама {seconds} с",
|
|
96
|
+
"up.video.skipAd": "Пропустить рекламу",
|
|
97
|
+
"up.video.adDetail": "Подробнее",
|
|
98
|
+
"up.video.error": "Ошибка воспроизведения"
|
|
86
99
|
}
|
package/libs/i18n/locales/th.js
CHANGED
|
@@ -82,5 +82,18 @@ export default {
|
|
|
82
82
|
"up.goodsSku.price": "ราคา",
|
|
83
83
|
"up.goodsSku.amount": "ชิ้น",
|
|
84
84
|
"up.goodsSku.choosed": "เลือกแล้ว",
|
|
85
|
-
"up.goodsSku.buyAmount": "จำนวน"
|
|
85
|
+
"up.goodsSku.buyAmount": "จำนวน",
|
|
86
|
+
"up.video.rate": "ความเร็ว",
|
|
87
|
+
"up.video.volume": "ระดับเสียง",
|
|
88
|
+
"up.video.danmu": "คอมเมนต์",
|
|
89
|
+
"up.video.danmuPlaceholder": "ส่งคอมเมนต์",
|
|
90
|
+
"up.video.send": "ส่ง",
|
|
91
|
+
"up.video.episodes": "ตอน",
|
|
92
|
+
"up.video.lock": "ล็อกแล้ว",
|
|
93
|
+
"up.video.unlock": "ปลดล็อกแล้ว",
|
|
94
|
+
"up.video.ad": "โฆษณา",
|
|
95
|
+
"up.video.adCountdown": "โฆษณา {seconds} วิ",
|
|
96
|
+
"up.video.skipAd": "ข้ามโฆษณา",
|
|
97
|
+
"up.video.adDetail": "ดูรายละเอียด",
|
|
98
|
+
"up.video.error": "เล่นไม่สำเร็จ"
|
|
86
99
|
}
|
|
@@ -82,5 +82,18 @@ export default {
|
|
|
82
82
|
"up.goodsSku.price": "价格",
|
|
83
83
|
"up.goodsSku.amount": "件",
|
|
84
84
|
"up.goodsSku.choosed": "已选",
|
|
85
|
-
"up.goodsSku.buyAmount": "购买数量"
|
|
85
|
+
"up.goodsSku.buyAmount": "购买数量",
|
|
86
|
+
"up.video.rate": "倍速",
|
|
87
|
+
"up.video.volume": "音量",
|
|
88
|
+
"up.video.danmu": "弹幕",
|
|
89
|
+
"up.video.danmuPlaceholder": "发条弹幕吧",
|
|
90
|
+
"up.video.send": "发送",
|
|
91
|
+
"up.video.episodes": "选集",
|
|
92
|
+
"up.video.lock": "已锁定",
|
|
93
|
+
"up.video.unlock": "已解锁",
|
|
94
|
+
"up.video.ad": "广告",
|
|
95
|
+
"up.video.adCountdown": "广告 {seconds}s",
|
|
96
|
+
"up.video.skipAd": "跳过广告",
|
|
97
|
+
"up.video.adDetail": "了解详情",
|
|
98
|
+
"up.video.error": "播放失败"
|
|
86
99
|
}
|
|
@@ -82,5 +82,18 @@ export default {
|
|
|
82
82
|
"up.goodsSku.price": "價格",
|
|
83
83
|
"up.goodsSku.amount": "件",
|
|
84
84
|
"up.goodsSku.choosed": "已選",
|
|
85
|
-
"up.goodsSku.buyAmount": "購買數量"
|
|
85
|
+
"up.goodsSku.buyAmount": "購買數量",
|
|
86
|
+
"up.video.rate": "倍速",
|
|
87
|
+
"up.video.volume": "音量",
|
|
88
|
+
"up.video.danmu": "彈幕",
|
|
89
|
+
"up.video.danmuPlaceholder": "發條彈幕吧",
|
|
90
|
+
"up.video.send": "發送",
|
|
91
|
+
"up.video.episodes": "選集",
|
|
92
|
+
"up.video.lock": "已鎖定",
|
|
93
|
+
"up.video.unlock": "已解鎖",
|
|
94
|
+
"up.video.ad": "廣告",
|
|
95
|
+
"up.video.adCountdown": "廣告 {seconds}s",
|
|
96
|
+
"up.video.skipAd": "跳過廣告",
|
|
97
|
+
"up.video.adDetail": "了解詳情",
|
|
98
|
+
"up.video.error": "播放失敗"
|
|
86
99
|
}
|
package/libs/mixin/mixin.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineMixin } from '../vue'
|
|
2
|
-
import {
|
|
2
|
+
import { $parent, upGetRect } from '../function/index'
|
|
3
3
|
import test from '../function/test'
|
|
4
4
|
import route from '../util/route'
|
|
5
5
|
import {
|
|
@@ -87,11 +87,16 @@ export const mixin = defineMixin({
|
|
|
87
87
|
return instance.__upUCache
|
|
88
88
|
}
|
|
89
89
|
// 在非nvue端,移除props,http,mixin等对象,避免在小程序setData时数据过大影响性能
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
90
|
+
// 这里只做浅拷贝:本mixin是全局注册的(见index.js的Vue.mixin),深拷贝整个uni.$u
|
|
91
|
+
// (含上百个组件的props默认值)的开销会随组件实例数线性放大,日历、长列表这类
|
|
92
|
+
// 一次渲染上千个节点的场景会因此长时间阻塞主线程
|
|
93
|
+
const globalU = typeof uni !== 'undefined' ? uni.$u : null
|
|
94
|
+
// 与原先的deepMerge保持一致:uni.$u尚未初始化时返回false,交由upBindGetRect兜底
|
|
95
|
+
if (!globalU || typeof globalU !== 'object') return false
|
|
96
|
+
let mergeU = Object.assign({}, globalU)
|
|
97
|
+
mergeU.props = undefined
|
|
98
|
+
mergeU.http = undefined
|
|
99
|
+
mergeU.mixin = undefined
|
|
95
100
|
// 缓存结果避免每次计算
|
|
96
101
|
if (instance) {
|
|
97
102
|
instance.__upUCache = mergeU
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"id": "uview-plus",
|
|
3
3
|
"name": "uview-plus",
|
|
4
4
|
"displayName": "零云®uview-plus3.0重磅发布,全面的Vue3鸿蒙跨端移动组件库,组件丰富维护更新稳定。",
|
|
5
|
-
"version": "3.8.
|
|
5
|
+
"version": "3.8.129",
|
|
6
6
|
"description": "零云®uview-plus已兼容vue3支持多语言,120+全面的组件和便捷的工具会让您信手拈来。近期新增拖动排序、条码、图片裁剪、下拉刷新、虚拟列表、签名、Markdown等。",
|
|
7
7
|
"keywords": [
|
|
8
8
|
"uview",
|
package/skills/README.md
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
# uview-plus AI skill
|
|
2
|
+
|
|
3
|
+
给 AI 编码助手用的 uview-plus 使用说明,按 [Agent Skills](https://code.claude.com/docs/en/skills) 的 `SKILL.md` 格式组织,随 uview-plus 一起分发。
|
|
4
|
+
|
|
5
|
+
目的很简单:让 AI 写 uview-plus 代码时不再靠猜——组件名、图标名、属性、双向绑定写法、easycom 接入、多端差异都有一手依据。
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
skills/uview-plus/
|
|
9
|
+
├── SKILL.md # 入口:硬规则 + 样板代码 + 索引
|
|
10
|
+
└── references/
|
|
11
|
+
├── setup.md # 安装接入(npm / uni_modules)
|
|
12
|
+
├── components.md # 组件清单(源码生成)
|
|
13
|
+
├── icons.md # 内置图标名清单(源码生成)
|
|
14
|
+
├── api.md # uni.$u 工具库、路由、请求、主题、i18n
|
|
15
|
+
└── pitfalls.md # 症状 → 原因,多端与接入常见坑
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## 在项目里启用
|
|
19
|
+
|
|
20
|
+
### Claude Code / 认 SKILL.md 的工具
|
|
21
|
+
|
|
22
|
+
把这个目录放到项目的 `.claude/skills/` 下即可被自动发现。
|
|
23
|
+
|
|
24
|
+
npm 装法:
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
mkdir -p .claude/skills
|
|
28
|
+
cp -r node_modules/uview-plus/skills/uview-plus .claude/skills/
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
uni_modules(HBuilderX)装法,把源路径换成项目里的实际位置:
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
mkdir -p .claude/skills
|
|
35
|
+
cp -r src/uni_modules/uview-plus/skills/uview-plus .claude/skills/
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Windows PowerShell:
|
|
39
|
+
|
|
40
|
+
```powershell
|
|
41
|
+
New-Item -ItemType Directory -Force .claude\skills | Out-Null
|
|
42
|
+
Copy-Item -Recurse -Force node_modules\uview-plus\skills\uview-plus .claude\skills\
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
想让内容随 uview-plus 升级自动更新,用软链代替复制(Windows 需要开发者模式或管理员权限):
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
ln -s ../../node_modules/uview-plus/skills/uview-plus .claude/skills/uview-plus
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
也可以放到 `~/.claude/skills/` 让所有项目共用。
|
|
52
|
+
|
|
53
|
+
### 其他 AI 工具
|
|
54
|
+
|
|
55
|
+
不认 `SKILL.md` 的工具(Cursor、Copilot、Codex 等),在项目的 `AGENTS.md`、`.cursor/rules/*.mdc` 或 `.github/copilot-instructions.md` 里加一句指路即可:
|
|
56
|
+
|
|
57
|
+
```md
|
|
58
|
+
本项目使用 uview-plus 组件库。写相关代码前先读 node_modules/uview-plus/skills/uview-plus/SKILL.md,
|
|
59
|
+
组件名以 references/components.md 为准,图标名以 references/icons.md 为准,不要凭印象拼名字。
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## 维护说明
|
|
63
|
+
|
|
64
|
+
`references/components.md` 与 `references/icons.md` 由 uview-plus 仓库的 `scripts/gen-skill-references.mjs` 从源码生成,`npm run verify:skill-assets` 会校验它们没有漂移,**不要手改**。
|
|
65
|
+
|
|
66
|
+
其余文件手写。发现内容与源码不符,欢迎到 https://github.com/ijry/uview-plus/issues 反馈,请注明是哪个文件的哪一段。
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: uview-plus
|
|
3
|
+
description: 在 uni-app + Vue3 项目里使用 uview-plus 组件库时使用。覆盖 up-*/u-* 组件写法、easycom 接入、组件与图标清单、uni.$u 工具库、主题与暗黑模式、H5/小程序/App-nvue/鸿蒙多端差异。写页面、初次接入或升级 uview-plus、排查"组件不渲染/样式不生效/属性无效/图标空白"时都适用。
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# uview-plus
|
|
7
|
+
|
|
8
|
+
uni-app 生态的 Vue3 组件库(fork 自 uView2)。139 个组件加一套 JS 工具库(`uni.$u`),一套代码覆盖 H5、微信/支付宝/头条/QQ 小程序、Android/iOS App(vue 与 nvue)、鸿蒙。
|
|
9
|
+
|
|
10
|
+
包的位置:npm 装法在 `node_modules/uview-plus/`,HBuilderX 装法在项目里的 `uni_modules/uview-plus/`。下文的相对路径都以这个包根目录为准,遇到不确定的用法**优先读包内源码**而不是凭印象写。
|
|
11
|
+
|
|
12
|
+
## 先确认接入完整
|
|
13
|
+
|
|
14
|
+
写页面之前先确认宿主项目这 4 处都配好了。缺任意一处的典型症状就是"组件写了不渲染""样式全丢""属性不生效",这类问题九成不是组件 bug:
|
|
15
|
+
|
|
16
|
+
1. `pages.json` 的 `easycom.custom` 里有 uview-plus 的三条规则
|
|
17
|
+
2. `main.js` 里 `app.use(uviewPlus)`
|
|
18
|
+
3. `App.vue` **首行** `@import "uview-plus/index.scss";`,且 `<style lang="scss">`
|
|
19
|
+
4. `uni.scss` 里 `@import "uview-plus/theme.scss";`
|
|
20
|
+
|
|
21
|
+
新项目接入、或上面任意一条没配,读 `references/setup.md`(npm 与 uni_modules 两种装法都有,含 manifest、tsconfig、nvue 的额外要求)。
|
|
22
|
+
|
|
23
|
+
## 硬规则
|
|
24
|
+
|
|
25
|
+
1. **不要 `import` 组件**。easycom 会按规则自动引入,模板里直接写 `<up-button text="按钮"></up-button>`。手写 import 反而容易和 easycom 规则打架。
|
|
26
|
+
2. **前缀用 `up-`**。`u-`、`u--` 仍然兼容(三条 easycom 规则都指向同一份 `components/u-*`),但 `u-` 会和 uni-app 官方组件抢名字(例如 `u-slider`),新代码统一用 `up-`,同一项目里不要混用。
|
|
27
|
+
3. **组件名从 `references/components.md` 里挑**,不要凭印象拼。清单里没有的名字就是不存在,结果是编译报错或者整块不渲染。
|
|
28
|
+
4. **属性、事件、插槽不要猜**。一手说明在包内:
|
|
29
|
+
- `components/u-<名字>/u-<名字>.vue` 顶部 JSDoc 的 `@property` / `@event`
|
|
30
|
+
- `components/u-<名字>/props.js` 是属性的真实默认值(约四分之一的组件没有这个文件,属性直接写在 `.vue` 里)
|
|
31
|
+
- `types/comps/<驼峰名>.d.ts` 是 TS 类型(覆盖常用组件,不是全部)
|
|
32
|
+
5. **图标名从 `references/icons.md` 里挑**。`<up-icon name="star-fill"></up-icon>`,名字写错**不会报错**,只是渲染空白。要用清单外的图标,走 `customIcon` 配置自己的字体图标。
|
|
33
|
+
6. **双向绑定分两类**,搞反了就是"弹窗打不开"或"输入框不联动":
|
|
34
|
+
- 值类组件(`up-input`、`up-checkbox-group`、`up-rate`、`up-slider`、`up-datetime-picker` …)内部是 `modelValue`,写 `v-model="xxx"`
|
|
35
|
+
- 显隐类组件(`up-popup`、`up-action-sheet`、`up-modal`、`up-picker`、`up-cascader`、`up-tooltip`、`up-guide`、`up-swipe-action-item`)内部是 `show` + `update:show`,写 `v-model:show="show"`
|
|
36
|
+
- 其余组件先看它的 `emits` 数组再决定,不要想当然。
|
|
37
|
+
7. **数值型尺寸的单位取决于 `config.unit`**(默认 `px`,项目可全局改成 `rpx`)。要确定的单位就把单位写全:`width="80px"`。
|
|
38
|
+
8. **组件内部尽量不要依赖宿主全局 class**。需要覆盖样式时优先用组件自身的 `customStyle` / 具体属性,小程序有样式隔离,全局类不一定命中。
|
|
39
|
+
|
|
40
|
+
## 一个可运行的样板
|
|
41
|
+
|
|
42
|
+
```vue
|
|
43
|
+
<template>
|
|
44
|
+
<view>
|
|
45
|
+
<up-navbar title="表单" :autoBack="true"></up-navbar>
|
|
46
|
+
<up-form ref="formRef" :model="form" :rules="rules" labelWidth="80">
|
|
47
|
+
<up-form-item label="手机号" prop="mobile" borderBottom>
|
|
48
|
+
<up-input v-model="form.mobile" placeholder="请输入手机号" border="none"></up-input>
|
|
49
|
+
</up-form-item>
|
|
50
|
+
</up-form>
|
|
51
|
+
<up-button type="primary" text="提交" @click="submit"></up-button>
|
|
52
|
+
<up-popup v-model:show="show" mode="bottom">
|
|
53
|
+
<view style="padding: 24px;">提交成功</view>
|
|
54
|
+
</up-popup>
|
|
55
|
+
</view>
|
|
56
|
+
</template>
|
|
57
|
+
|
|
58
|
+
<script setup>
|
|
59
|
+
import { reactive, ref } from 'vue'
|
|
60
|
+
|
|
61
|
+
const formRef = ref(null)
|
|
62
|
+
const show = ref(false)
|
|
63
|
+
const form = reactive({ mobile: '' })
|
|
64
|
+
const rules = {
|
|
65
|
+
mobile: [{ required: true, message: '请输入手机号', trigger: ['blur', 'change'] }]
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
function submit() {
|
|
69
|
+
formRef.value
|
|
70
|
+
.validate()
|
|
71
|
+
.then(() => {
|
|
72
|
+
show.value = true
|
|
73
|
+
})
|
|
74
|
+
.catch(() => {
|
|
75
|
+
uni.$u.toast('请检查表单')
|
|
76
|
+
})
|
|
77
|
+
}
|
|
78
|
+
</script>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
要点:`up-form` 的 `validate()` 返回 Promise(校验失败 reject 错误数组);`uni.$u.*` 在 `.vue` 与普通 `.js` 里都能用,不必 import。
|
|
82
|
+
|
|
83
|
+
## 按需展开
|
|
84
|
+
|
|
85
|
+
| 需要做的事 | 读这个文件 |
|
|
86
|
+
| --- | --- |
|
|
87
|
+
| 装包、接入、easycom / scss / manifest / tsconfig / nvue Root 配置 | `references/setup.md` |
|
|
88
|
+
| 挑组件、查某个组件的属性事件在哪 | `references/components.md` |
|
|
89
|
+
| 用图标 | `references/icons.md` |
|
|
90
|
+
| 路由、请求、校验、时间、主题、暗黑模式、多语言等 JS 能力 | `references/api.md` |
|
|
91
|
+
| 组件不渲染、样式不生效、多端表现不一致、报错排查 | `references/pitfalls.md` |
|
|
92
|
+
|
|
93
|
+
包内还有一手资料:`changelog.md`(版本变更,升级排查先看它)、`types/`(TS 声明)。当前版本看包内 `package.json` 的 `version`;`uni.$u.config.v` 只返回大版本 `'3'`,不能用来判断补丁版本。
|
|
94
|
+
|
|
95
|
+
在线文档 https://uview-plus.jiangruyi.com ,与包内源码不一致时**以源码为准**。
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
# JS 工具库(uni.$u)
|
|
2
|
+
|
|
3
|
+
## 两种取用方式
|
|
4
|
+
|
|
5
|
+
```js
|
|
6
|
+
// 1) 全局对象,.vue 与普通 .js 文件里都能直接用,不需要 import
|
|
7
|
+
uni.$u.toast('保存成功')
|
|
8
|
+
|
|
9
|
+
// 2) 具名导入,按需引入
|
|
10
|
+
import { route, timeFormat, deepClone } from 'uview-plus'
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
`.vue` 里还有 `this.$u`(选项式 API,由 install 挂到 `globalProperties`)。
|
|
14
|
+
|
|
15
|
+
注意:**主题相关方法只在 `uni.$u` 上**(`setTheme`、`getThemeVars` 等不是包根的具名导出),需要 import 时从 `uview-plus/libs/theme/theme.js` 取。
|
|
16
|
+
|
|
17
|
+
## 路由
|
|
18
|
+
|
|
19
|
+
```js
|
|
20
|
+
uni.$u.route({ type: 'navigateTo', url: '/pages/index/index', params: { id: 1 } })
|
|
21
|
+
uni.$u.route('/pages/index/index', { id: 1 }) // 等价简写,默认 navigateTo
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
`type` 可选 `navigateTo`(默认)、`redirect`、`switchTab`、`reLaunch`、`navigateBack`;`params` 会被拼成 query。全局拦截配置见 `libs/util/route.js`。
|
|
25
|
+
|
|
26
|
+
## 请求
|
|
27
|
+
|
|
28
|
+
`uni.$u.http` 是内置 luch-request 实例(`libs/luch-request`),支持 `get/post/put/delete/upload/download`、拦截器、`baseURL` 等:
|
|
29
|
+
|
|
30
|
+
```js
|
|
31
|
+
uni.$u.http.get('/user/info', { params: { id: 1 } })
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
推荐在 `app.use(uviewPlus, () => ({ httpIns: initRequest }))` 的 `httpIns` 回调里统一配置拦截器,见 `references/setup.md`。
|
|
35
|
+
|
|
36
|
+
## 校验
|
|
37
|
+
|
|
38
|
+
`uni.$u.test.*` 全部返回布尔值:`mobile`、`email`、`url`、`date`、`dateISO`、`number`、`digits`、`string`、`array`、`object`、`func`、`promise`、`idCard`、`carNo`、`amount`、`chinese`、`letter`、`enOrNum`、`landline`、`contains`、`range`、`rangeLength`、`empty`、`jsonString`、`code`、`image`、`video`、`regExp`。
|
|
39
|
+
|
|
40
|
+
完整签名见 `types/func.d.ts` 的 `test` 接口。
|
|
41
|
+
|
|
42
|
+
## 常用函数
|
|
43
|
+
|
|
44
|
+
| 分类 | 函数 |
|
|
45
|
+
| --- | --- |
|
|
46
|
+
| 时间 | `timeFormat(dateTime, 'yyyy-mm-dd')`、`timeFrom(timestamp)`、`padZero`;`uni.$u.date` 是 `timeFormat` 的别名 |
|
|
47
|
+
| 数值 | `calc.add/sub/mul/div`(浮点安全)、`digit.plus/minus/times/divide/round`(高精度)、`priceFormat`、`range(min, max, value)`、`getPx`、`addUnit`、`rpx2px`、`getDuration` |
|
|
48
|
+
| 对象 | `deepClone`、`deepMerge`、`shallowMerge`、`getProperty`、`setProperty`、`getValueByPath` |
|
|
49
|
+
| 字符串 | `trim(str, pos)`、`queryParams(data, isPrefix, arrayFormat)`、`guid(len)` |
|
|
50
|
+
| 函数 | `debounce(fn, wait)`、`throttle(fn, wait)`、`sleep(ms)` |
|
|
51
|
+
| 环境 | `os()`、`sys()`、`getWindowInfo()`、`getDeviceInfo()`、`platform`、`page()`、`pages()` |
|
|
52
|
+
| 交互 | `toast(title, duration)`、`type2icon(type, fill)` |
|
|
53
|
+
| 颜色 | `colorGradient`、`hexToRgb`、`rgbToHex`、`colorToRgba`、`genLightColor` |
|
|
54
|
+
| 节点查询 | `upGetRect(selector, all, comp)`、`upCreateIntersectionObserver(comp, options)` |
|
|
55
|
+
| 其他 | `random(min, max)`、`randomArray(arr)`、`addStyle`、`$parent(name)`、`formValidate` |
|
|
56
|
+
|
|
57
|
+
表里的 `digit` 与 `getDeviceInfo` **不在 `uni.$u` 上**,只能具名导入(`import { digit, getDeviceInfo } from 'uview-plus'`);其余都挂在 `uni.$u`,也都能具名导入。挂载清单以包内 `index.js` 的 `$u` 对象为准。
|
|
58
|
+
|
|
59
|
+
节点查询优先用 `upGetRect` / `upCreateIntersectionObserver` 而不是直接写 `uni.createSelectorQuery`:它们已经处理了 nvue 与组件已卸载的情况。实现在 `libs/function/index.js`,类型在 `types/func.d.ts`。
|
|
60
|
+
|
|
61
|
+
## 配置对象
|
|
62
|
+
|
|
63
|
+
- `uni.$u.config`:`v`(大版本 `'3'`)、`unit`、`iconUrl`、`customIcon`、`interceptor`、`nativeThemeSync` 等,默认值在 `libs/config/config.js`
|
|
64
|
+
- `uni.$u.props`:所有组件属性的默认值,可全局改
|
|
65
|
+
- `uni.$u.color`:`up-primary` / `up-success` / `up-error` / `up-warning` / `up-info` 等主题色
|
|
66
|
+
- `uni.$u.zIndex`:各类浮层的层级
|
|
67
|
+
- `setConfig({ config, props, color, zIndex })`:运行时改上面这些
|
|
68
|
+
|
|
69
|
+
## 主题与暗黑模式
|
|
70
|
+
|
|
71
|
+
```js
|
|
72
|
+
uni.$u.setTheme('dark') // 'light' | 'dark'
|
|
73
|
+
uni.$u.setThemePreference('auto') // 跟随系统
|
|
74
|
+
uni.$u.getThemeVars() // 当前主题的 CSS 变量表
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
3.8 起主题走 `--up-*` CSS 变量 + 运行时主题,旧的 `$u-*` scss 变量只桥接 light 主题。样式里优先用 `var(--up-primary)` 这类变量;模板里可用 `upThemeVar('--up-border-color', '#dadbde')`、`upThemeIsDark`、`upThemePageStyle`、`upThemeCardStyle`(由 install 挂在实例上,nvue 页面依赖 Root 注入)。
|
|
78
|
+
|
|
79
|
+
想让原生导航栏 / tabBar 跟随运行时主题,需要显式打开 `config.nativeThemeSync`(默认关,避免覆盖项目已有的 `pages.json` / `theme.json`)。
|
|
80
|
+
|
|
81
|
+
## 多语言
|
|
82
|
+
|
|
83
|
+
```js
|
|
84
|
+
import { registerLocale, setLocale, t, en, ja } from 'uview-plus'
|
|
85
|
+
|
|
86
|
+
registerLocale('ja', ja) // 按需注册语言包,不注册就不打进包
|
|
87
|
+
setLocale('ja')
|
|
88
|
+
t('up.common.confirm')
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
内置语言包:`en`、`es`、`fr`、`de`、`ko`、`ja`、`ru`、`th`、`zhHans`、`zhHant`(`allLocales` 是全量,会增大体积)。文案键形如 `up.common.confirm`,全量键看 `libs/i18n/locales/en.js`。
|
|
92
|
+
|
|
93
|
+
## 全局 toast / notify
|
|
94
|
+
|
|
95
|
+
`uni.$u.rootToast(options)`、`uni.$u.rootNotify(options)` 不需要在页面里放组件。它们依赖 Root 注入的宿主组件(见 `references/setup.md` 的 Root 一节);没启用 Root 时会自动降级成 `uni.showToast`。
|
|
96
|
+
|
|
97
|
+
也可以用组件形式:页面里放 `<up-toast ref="toastRef"></up-toast>`,再 `toastRef.value.show({ message: '...' })`。
|
|
98
|
+
|
|
99
|
+
## 组件实例方法
|
|
100
|
+
|
|
101
|
+
组件方法要通过 `ref` 调,常用的几个:
|
|
102
|
+
|
|
103
|
+
- `up-form`:`validate()`(返回 Promise)、`validateField(props, cb)`、`resetFields()`、`clearValidate(props)`、`setRules(rules)`
|
|
104
|
+
- `up-toast` / `up-notify`:`show(options)`
|
|
105
|
+
- 其他组件的方法看对应 `u-<名字>.vue` 里 `methods` 的公开方法与 JSDoc `@method` 说明。
|