uview-plus 3.8.126 → 3.8.128
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 +39 -0
- 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 +13 -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-steps-item/u-steps-item.vue +9 -0
- package/components/u-tabbar-item/u-tabbar-item.vue +12 -1
- 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 +12 -7
- 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/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
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
# 组件清单
|
|
2
|
+
|
|
3
|
+
> 本文件由 `scripts/gen-skill-references.mjs` 从源码生成,请勿手改。
|
|
4
|
+
|
|
5
|
+
共 140 个组件。表中是推荐的 `up-` 写法,把前缀换成 `u-` 或 `u--` 等价可用。
|
|
6
|
+
|
|
7
|
+
**清单里没有的名字就是不存在**,不要凭印象拼组件名。查一个组件的属性、事件、插槽:
|
|
8
|
+
|
|
9
|
+
- `components/u-<名字>/u-<名字>.vue` 顶部 JSDoc 的 `@property` / `@event`,是最完整的一手说明
|
|
10
|
+
- `components/u-<名字>/props.js` 是属性的真实默认值(部分组件没有这个文件,属性直接写在 `.vue` 里)
|
|
11
|
+
- `types/comps/<驼峰名>.d.ts` 是 TS 类型(覆盖常用组件,不是全部)
|
|
12
|
+
|
|
13
|
+
例如 `up-button` 对应 `components/u-button/u-button.vue`、`components/u-button/props.js`、`types/comps/button.d.ts`。
|
|
14
|
+
|
|
15
|
+
| 组件 | 说明 | 文档 |
|
|
16
|
+
| --- | --- | --- |
|
|
17
|
+
| `up-action-sheet` | 本组件用于从底部弹出一个操作菜单,供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI,配置更加灵活,所有平台都表现一致。 | [文档](https://uview-plus.jiangruyi.com/components/actionSheet.html) |
|
|
18
|
+
| `up-action-sheet-data` | - | - |
|
|
19
|
+
| `up-agreement` | - | - |
|
|
20
|
+
| `up-album` | 本组件提供一个类似相册的功能,让开发者开发起来更加得心应手。减少重复的模板代码 | [文档](https://uview-plus.jiangruyi.com/components/album.html) |
|
|
21
|
+
| `up-alert` | 警告提示,展现需要关注的信息。 | [文档](https://uview-plus.jiangruyi.com/components/alertTips.html) |
|
|
22
|
+
| `up-avatar` | 本组件一般用于展示头像的地方,如个人中心,或者评论列表页的用户头像展示等场所。 | [文档](https://uview-plus.jiangruyi.com/components/avatar.html) |
|
|
23
|
+
| `up-avatar-group` | 本组件一般用于展示头像的地方,如个人中心,或者评论列表页的用户头像展示等场所。 | [文档](https://uview-plus.jiangruyi.com/components/avatar.html) |
|
|
24
|
+
| `up-back-top` | 本组件一个用于长页面,滑动一定距离后,出现返回顶部按钮,方便快速返回顶部的场景。 | [文档](https://uview-plus.jiangruyi.com/components/backTop.html) |
|
|
25
|
+
| `up-badge` | 该组件一般用于图标右上角显示未读的消息数量,提示用户点击,有圆点和圆包含文字两种形式。 | [文档](https://uview-plus.jiangruyi.com/components/badge.html) |
|
|
26
|
+
| `up-barcode` | - | - |
|
|
27
|
+
| `up-box` | box盒子一般为左边一个盒子,右侧两个等高的半盒组成,常用于App首页座位重点突出。 | [文档](https://uview-plus.jiangruyi.com/components/box.html) |
|
|
28
|
+
| `up-button` | Button 按钮 | [文档](https://uview-plus.jiangruyi.com/components/button.html) |
|
|
29
|
+
| `up-calendar` | 此组件用于单个选择日期,范围选择日期等,日历被包裹在底部弹起的容器中. | [文档](https://uview-plus.jiangruyi.com/components/calendar.html) |
|
|
30
|
+
| `up-calendar-strip` | 单行横向日期日历,支持切月、下拉展开完整月历 | - |
|
|
31
|
+
| `up-canvas` | 当平台无法给出真实测量值时的兜底。必须区分全角/半角: | - |
|
|
32
|
+
| `up-car-keyboard` | 此为uview-plus自定义的键盘面板,内含了数字键盘,车牌号键,身份证号键盘3种模式,都有可以打乱按键顺序的选项。 | [文档](https://uview-plus.jiangruyi.com/components/keyboard.html) |
|
|
33
|
+
| `up-card` | 卡片组件一般用于多个列表条目,且风格统一的场景 | [文档](https://uview-plus.jiangruyi.com/components/card.html) |
|
|
34
|
+
| `up-cascader` | - | - |
|
|
35
|
+
| `up-cate-tab` | - | - |
|
|
36
|
+
| `up-cell` | cell单元格一般用于一组列表的情况,比如个人中心页,设置页等。 | [文档](https://uview-plus.jiangruyi.com/components/cell.html) |
|
|
37
|
+
| `up-cell-group` | cell单元格一般用于一组列表的情况,比如个人中心页,设置页等。 | [文档](https://uview-plus.jiangruyi.com/components/cell.html) |
|
|
38
|
+
| `up-checkbox` | 复选框组件一般用于需要多个选择的场景,该组件功能完整,使用方便 | [文档](https://uview-plus.jiangruyi.com/components/checkbox.html) |
|
|
39
|
+
| `up-checkbox-group` | 复选框组件一般用于需要多个选择的场景,该组件功能完整,使用方便 | [文档](https://uview-plus.jiangruyi.com/components/checkbox.html) |
|
|
40
|
+
| `up-choose` | - | - |
|
|
41
|
+
| `up-circle-progress` | 展示操作或任务的当前进度,比如上传文件,是一个圆形的进度环。 | [文档](https://uview-plus.jiangruyi.com/components/circleProgress.html) |
|
|
42
|
+
| `up-city-locate` | - | - |
|
|
43
|
+
| `up-code` | 考虑到用户实际发送验证码的场景,可能是一个按钮,也可能是一段文字,提示语各有不同,所以本组件 不提供界面显示,只提供提示语,由用户将提示语嵌入到具体的场景 | [文档](https://uview-plus.jiangruyi.com/components/code.html) |
|
|
44
|
+
| `up-code-input` | 该组件一般用于验证用户短信验证码的场景,也可以结合uview-plus的键盘组件使用 | [文档](https://uview-plus.jiangruyi.com/components/codeInput.html) |
|
|
45
|
+
| `up-col` | 该组件一般用于Layout 布局 通过基础的 12 分栏,迅速简便地创建布局 | [文档](https://uview-plus.jiangruyi.com/components/Layout.html) |
|
|
46
|
+
| `up-collapse` | 通过折叠面板收纳内容区域 | [文档](https://uview-plus.jiangruyi.com/components/collapse.html) |
|
|
47
|
+
| `up-collapse-item` | 通过折叠面板收纳内容区域(搭配u-collapse使用) | [文档](https://uview-plus.jiangruyi.com/components/collapse.html) |
|
|
48
|
+
| `up-color-picker` | - | - |
|
|
49
|
+
| `up-column-notice` | 该组件用于滚动通告场景,是其中的垂直滚动方式 | [文档](https://uview-plus.jiangruyi.com/components/noticeBar.html) |
|
|
50
|
+
| `up-copy` | - | - |
|
|
51
|
+
| `up-count-down` | 该组件一般使用于某个活动的截止时间上,通过数字的变化,给用户明确的时间感受,提示用户进行某一个行为操作。 | [文档](https://uview-plus.jiangruyi.com/components/countDown.html) |
|
|
52
|
+
| `up-count-to` | 该组件一般用于需要滚动数字到某一个值的场景,目标要求是一个递增的值。 | [文档](https://uview-plus.jiangruyi.com/components/countTo.html) |
|
|
53
|
+
| `up-coupon` | - | - |
|
|
54
|
+
| `up-cropper` | - | - |
|
|
55
|
+
| `up-datetime-picker` | 此选择器用于时间日期 | [文档](https://uview-plus.jiangruyi.com/components/datetimePicker.html) |
|
|
56
|
+
| `up-divider` | 区隔内容的分割线,一般用于页面底部"没有更多"的提示。 | [文档](https://uview-plus.jiangruyi.com/components/divider.html) |
|
|
57
|
+
| `up-dragsort` | - | - |
|
|
58
|
+
| `up-dropdown` | 该组件一般用于向下展开菜单,同时可切换多个选项卡的场景 | [文档](https://uview-plus.jiangruyi.com/components/dropdown.html) |
|
|
59
|
+
| `up-dropdown-item` | 该组件一般用于向下展开菜单,同时可切换多个选项卡的场景 | [文档](https://uview-plus.jiangruyi.com/components/dropdown.html) |
|
|
60
|
+
| `up-empty` | 该组件用于需要加载内容,但是加载的第一页数据就为空,提示一个"没有内容"的场景, 我们精心挑选了十几个场景的图标,方便您使用。 | [文档](https://uview-plus.jiangruyi.com/components/empty.html) |
|
|
61
|
+
| `up-flex` | 通用 flexbox 容器,跨端同名同默认,作为页面 view 的原生落点 | - |
|
|
62
|
+
| `up-float-button` | 悬浮按钮常用于屏幕右下角点击展开的操作菜单 | [文档](https://uview-plus.jiangruyi.com/components/floatButton.html) |
|
|
63
|
+
| `up-form` | 此组件一般用于表单场景,可以配置Input输入框,Select弹出框,进行表单验证等。 | [文档](https://uview-plus.jiangruyi.com/components/form.html) |
|
|
64
|
+
| `up-form-item` | 此组件一般用于表单场景,可以配置Input输入框,Select弹出框,进行表单验证等。 | [文档](https://uview-plus.jiangruyi.com/components/form.html) |
|
|
65
|
+
| `up-gap` | 该组件一般用于内容块之间的用一个灰色块隔开的场景,方便用户风格统一,减少工作量 | [文档](https://uview-plus.jiangruyi.com/components/gap.html) |
|
|
66
|
+
| `up-goods-sku` | - | - |
|
|
67
|
+
| `up-grid` | 宫格组件一般用于同时展示多个同类项目的场景,可以给宫格的项目设置徽标组件(badge),或者图标等,也可以扩展为左右滑动的轮播形式。 | [文档](https://uview-plus.jiangruyi.com/components/grid.html) |
|
|
68
|
+
| `up-grid-item` | 宫格组件一般用于同时展示多个同类项目的场景,可以给宫格的项目设置徽标组件(badge),或者图标等,也可以扩展为左右滑动的轮播形式。搭配u-grid使用 | [文档](https://uview-plus.jiangruyi.com/components/grid.html) |
|
|
69
|
+
| `up-guide` | 全屏首屏引导组件,支持一次性记忆与多页滑动 | - |
|
|
70
|
+
| `up-icon` | 基于字体的图标集,包含了大多数常见场景的图标。 | [文档](https://uview-plus.jiangruyi.com/components/icon.html) |
|
|
71
|
+
| `up-image` | 此组件为uni-app的image组件的加强版,在继承了原有功能外,还支持淡入动画、加载中、加载失败提示、圆角值和形状等。 | [文档](https://uview-plus.jiangruyi.com/components/image.html) |
|
|
72
|
+
| `up-index-anchor` | * @tutorial https://uview-plus.jiangruyi.com/components/indexList.html | [文档](https://uview-plus.jiangruyi.com/components/indexList.html) |
|
|
73
|
+
| `up-index-item` | * @tutorial https://uview-plus.jiangruyi.com/components/indexList.html | [文档](https://uview-plus.jiangruyi.com/components/indexList.html) |
|
|
74
|
+
| `up-index-list` | 通过折叠面板收纳内容区域 | [文档](https://uview-plus.jiangruyi.com/components/indexList.html) |
|
|
75
|
+
| `up-input` | 此组件为一个输入框,默认没有边框和样式,是专门为配合表单组件u-form而设计的,利用它可以快速实现表单验证,输入内容,下拉选择等功能。 | [文档](https://uview-plus.jiangruyi.com/components/input.html) |
|
|
76
|
+
| `up-keyboard` | 此为uViw自定义的键盘面板,内含了数字键盘,车牌号键,身份证号键盘3中模式,都有可以打乱按键顺序的选项。 | [文档](https://uview-plus.jiangruyi.com/components/keyboard.html) |
|
|
77
|
+
| `up-lazy-load` | 懒加载使用的场景为:页面有很多图片时,APP会同时加载所有的图片,导致页面卡顿,各个位置的图片出现前后不一致等. | [文档](https://uview-plus.jiangruyi.com/components/lazy-load.html) |
|
|
78
|
+
| `up-line` | 此组件一般用于显示一根线条,用于分隔内容块,有横向和竖向两种模式,且能设置0.5px线条,使用也很简单 | [文档](https://uview-plus.jiangruyi.com/components/line.html) |
|
|
79
|
+
| `up-line-progress` | 展示操作或任务的当前进度,比如上传文件,是一个线形的进度条。 | [文档](https://uview-plus.jiangruyi.com/components/lineProgress.html) |
|
|
80
|
+
| `up-link` | 该组件为超链接组件,在不同平台有不同表现形式:在APP平台会通过plus环境打开内置浏览器,在小程序中把链接复制到粘贴板,同时提示信息,在H5中通过window.open打开链接。 | [文档](https://uview-plus.jiangruyi.com/components/link.html) |
|
|
81
|
+
| `up-list` | 该组件为高性能列表组件 | [文档](https://uview-plus.jiangruyi.com/components/list.html) |
|
|
82
|
+
| `up-list-item` | 该组件为高性能列表组件 | [文档](https://uview-plus.jiangruyi.com/components/list.html) |
|
|
83
|
+
| `up-loading-icon` | 此组件为一个小动画,目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。 | [文档](https://uview-plus.jiangruyi.com/components/loading.html) |
|
|
84
|
+
| `up-loading-page` | 警此组件为一个小动画,目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。 | [文档](https://uview-plus.jiangruyi.com/components/loading.html) |
|
|
85
|
+
| `up-loadmore` | 此组件一般用于标识页面底部加载数据时的状态。 | [文档](https://uview-plus.jiangruyi.com/components/loadMore.html) |
|
|
86
|
+
| `up-markdown` | - | - |
|
|
87
|
+
| `up-message-input` | 该组件一般用于验证用户短信验证码的场景,也可以结合uView的键盘组件使用 | [文档](https://www.uviewui.com/components/messageInput.html) |
|
|
88
|
+
| `up-modal` | 弹出模态框,常用于消息提示、消息确认、在当前页面内完成特定的交互操作。 | [文档](https://uview-plus.jiangruyi.com/components/modul.html) |
|
|
89
|
+
| `up-navbar` | 此组件一般用于在特殊情况下,需要自定义导航栏的时候用到,一般建议使用uni-app带的导航栏。 | [文档](https://uview-plus.jiangruyi.com/components/navbar.html) |
|
|
90
|
+
| `up-navbar-mini` | 此组件一般用于在全屏页面中,典型的如微信小程序左上角。 | [文档](https://uview-plus.jiangruyi.com/components/navbar-mini.html) |
|
|
91
|
+
| `up-no-network` | 该组件无需任何配置,引入即可,内部自动处理所有功能和事件。 | [文档](https://uview-plus.jiangruyi.com/components/noNetwork.html) |
|
|
92
|
+
| `up-notice-bar` | 该组件用于滚动通告场景,有多种模式可供选择 | [文档](https://uview-plus.jiangruyi.com/components/noticeBar.html) |
|
|
93
|
+
| `up-notify` | 该组件一般用于页面顶部向下滑出一个提示,尔后自动收起的场景 | [文档](* @property {String \| Number} top 到顶部的距离 ( 默认 0 )) |
|
|
94
|
+
| `up-novel-reader` | - | - |
|
|
95
|
+
| `up-number-box` | 该组件一般用于商城购物选择物品数量的场景。 | [文档](https://uview-plus.jiangruyi.com/components/numberBox.html) |
|
|
96
|
+
| `up-number-keyboard` | * @tutorial | [文档](* @property {String} mode 键盘的类型,number-数字键盘,card-身份证键盘) |
|
|
97
|
+
| `up-overlay` | 创建一个遮罩层,用于强调特定的页面元素,并阻止用户对遮罩下层的内容进行操作,一般用于弹窗场景 | [文档](https://uview-plus.jiangruyi.com/components/overlay.html) |
|
|
98
|
+
| `up-pagination` | - | - |
|
|
99
|
+
| `up-parse` | 富文本组件 | [文档](https://github.com/jin-yufeng/mp-html) |
|
|
100
|
+
| `up-pdf-reader` | 基于pdf.js的PDF阅读器组件 | [文档](https://uview-plus.jiangruyi.com/components/pdfReader.html) |
|
|
101
|
+
| `up-picker` | 选择器 | - |
|
|
102
|
+
| `up-picker-column` | * @tutorial url | [文档](url) |
|
|
103
|
+
| `up-picker-data` | - | - |
|
|
104
|
+
| `up-popover` | 基于tooltip二次封装的popover组件,用于展示更丰富的内容 | [文档](https://www.uviewui.com/components/popover.html) |
|
|
105
|
+
| `up-popup` | 弹出层容器,用于展示弹窗、信息提示等内容,支持上、下、左、右和中部弹出。组件只提供容器,内部内容由用户自定义 | [文档](https://uview-plus.jiangruyi.com/components/popup.html) |
|
|
106
|
+
| `up-poster` | 用于生成海报的组件,支持文本、图片、二维码等元素 | [文档](https://uview-plus.jiangruyi.com/components/poster.html) |
|
|
107
|
+
| `up-pull-refresh` | - | - |
|
|
108
|
+
| `up-qrcode` | - | - |
|
|
109
|
+
| `up-radio` | 单选框用于有一个选择,用户只能选择其中一个的场景。搭配u-radio-group使用 | [文档](https://uview-plus.jiangruyi.com/components/radio.html) |
|
|
110
|
+
| `up-radio-group` | 单选框用于有一个选择,用户只能选择其中一个的场景。搭配u-radio使用 | [文档](https://uview-plus.jiangruyi.com/components/radio.html) |
|
|
111
|
+
| `up-rate` | 该组件一般用于满意度调查,星型评分的场景 | [文档](https://uview-plus.jiangruyi.com/components/rate.html) |
|
|
112
|
+
| `up-read-more` | 该组件一般用于内容较长,预先收起一部分,点击展开全部内容的场景。 | [文档](https://uview-plus.jiangruyi.com/components/readMore.html) |
|
|
113
|
+
| `up-refresh-virtual-list` | - | - |
|
|
114
|
+
| `up-row` | 通过基础的 12 分栏,迅速简便地创建布局 | [文档](https://uview-plus.jiangruyi.com/components/layout.html) |
|
|
115
|
+
| `up-row-notice` | 水平滚动 | [文档](https://uview-plus.jiangruyi.com/components/noticeBar.html) |
|
|
116
|
+
| `up-safe-bottom` | 这个适配,主要是针对IPhone X等一些底部带指示条的机型,指示条的操作区域与页面底部存在重合,容易导致用户误操作,因此我们需要针对这些机型进行底部安全区适配。 | [文档](https://uview-plus.jiangruyi.com/components/safeAreaInset.html) |
|
|
117
|
+
| `up-scroll-list` | 该组件一般用于同时展示多个商品、分类的场景,也可以完成左右滑动的列表。 | [文档](https://uview-plus.jiangruyi.com/components/scrollList.html) |
|
|
118
|
+
| `up-search` | 搜索组件,集成了常见搜索框所需功能,用户可以一键引入,开箱即用。 | [文档](https://uview-plus.jiangruyi.com/components/search.html) |
|
|
119
|
+
| `up-select` | - | - |
|
|
120
|
+
| `up-short-video` | - | - |
|
|
121
|
+
| `up-signature` | - | - |
|
|
122
|
+
| `up-skeleton` | 骨架屏一般用于页面在请求远程数据尚未完成时,页面用灰色块预显示本来的页面结构,给用户更好的体验。 | [文档](https://uview-plus.jiangruyi.com/components/skeleton.html) |
|
|
123
|
+
| `up-slider` | - | [文档](https://uview-plus.jiangruyi.com/components/slider.html) |
|
|
124
|
+
| `up-status-bar` | 本组件主要用于状态填充,比如在自定导航栏的时候,它会自动适配一个恰当的状态栏高度。 | [文档](https://uview-plus.jiangruyi.com/components/statusBar.html) |
|
|
125
|
+
| `up-steps` | 该组件一般用于完成一个任务要分几个步骤,标识目前处于第几步的场景。 | [文档](https://uview-plus.jiangruyi.com/components/steps.html) |
|
|
126
|
+
| `up-steps-item` | 本组件需要和u-steps配合使用 | [文档](https://uview-plus.jiangruyi.com/components/steps.html) |
|
|
127
|
+
| `up-sticky` | 该组件与CSS中position: sticky属性实现的效果一致,当组件达到预设的到顶部距离时, 就会固定在指定位置,组件位置大于预设的顶部距离时,会重新按照正常的布局排列。 | [文档](https://uview-plus.jiangruyi.com/components/sticky.html) |
|
|
128
|
+
| `up-subsection` | 该分段器一般用于用户从几个选项中选择某一个的场景 | [文档](https://uview-plus.jiangruyi.com/components/subsection.html) |
|
|
129
|
+
| `up-swipe-action` | 该组件一般用于左滑唤出操作菜单的场景,用的最多的是左滑删除操作 | [文档](https://uview-plus.jiangruyi.com/components/swipeAction.html) |
|
|
130
|
+
| `up-swipe-action-item` | 该组件一般用于左滑唤出操作菜单的场景,用的最多的是左滑删除操作 | [文档](https://uview-plus.jiangruyi.com/components/swipeAction.html) |
|
|
131
|
+
| `up-swiper` | 该组件一般用于导航轮播,广告展示等场景,可开箱即用 | [文档](https://uview-plus.jiangruyi.com/components/swiper.html) |
|
|
132
|
+
| `up-swiper-indicator` | 该组件一般用于导航轮播,广告展示等场景,可开箱即用 | [文档](https://uview-plus.jiangruyi.com/components/swiper.html) |
|
|
133
|
+
| `up-switch` | 选择开关一般用于只有两个选择,且只能选其一的场景。 | [文档](https://uview-plus.jiangruyi.com/components/switch.html) |
|
|
134
|
+
| `up-tabbar` | 此组件提供了自定义tabbar的能力。 | [文档](https://uview-plus.jiangruyi.com/components/tabbar.html) |
|
|
135
|
+
| `up-tabbar-item` | 此组件提供了自定义tabbar的能力。 | [文档](https://uview-plus.jiangruyi.com/components/tabbar.html) |
|
|
136
|
+
| `up-table` | 表格组件一般用于展示大量结构化数据的场景 本组件标签类似HTML的table表格,由table、tr、th、td四个组件组成 | [文档](https://uview-plus.jiangruyi.com/components/table.html) |
|
|
137
|
+
| `up-table2` | - | - |
|
|
138
|
+
| `up-tabs` | tabs标签组件,在标签多的时候,可以配置为左右滑动,标签少的时候,可以禁止滑动。 该组件的一个特点是配置为滚动模式时,激活的tab会自动移动到组件的中间位置。 | [文档](https://uview-plus.jiangruyi.com/components/tabs.html) |
|
|
139
|
+
| `up-tabs-item` | tabs标签组件,在标签多的时候,可以配置为左右滑动,标签少的时候,可以禁止滑动。 该组件的一个特点是配置为滚动模式时,激活的tab会自动移动到组件的中间位置。 | [文档](https://uview-plus.jiangruyi.com/components/tabs.html) |
|
|
140
|
+
| `up-tabs-pro` | - | - |
|
|
141
|
+
| `up-tag` | tag组件一般用于标记和选择,我们提供了更加丰富的表现形式,能够较全面的涵盖您的使用场景 | [文档](https://uview-plus.jiangruyi.com/components/tag.html) |
|
|
142
|
+
| `up-td` | * @tutorial url | [文档](url) |
|
|
143
|
+
| `up-text` | 此组件集成了文本类在项目中的常用功能,包括状态,拨打电话,格式化日期,*替换,超链接...等功能。 您大可不必在使用特殊文本时自己定义,text组件几乎涵盖您能使用的大部分场景。 | [文档](https://uview-plus.jiangruyi.com/components/loading.html) |
|
|
144
|
+
| `up-textarea` | 文本域此组件满足了可能出现的表单信息补充,编辑等实际逻辑的功能,内置了字数校验等 | [文档](https://uview-plus.jiangruyi.com/components/textarea.html) |
|
|
145
|
+
| `up-th` | * @tutorial url | [文档](url) |
|
|
146
|
+
| `up-title` | - | - |
|
|
147
|
+
| `up-toast` | 此组件表现形式类似uni的uni.showToastAPI,但也有不同的地方。 | [文档](https://uview-plus.jiangruyi.com/components/toast.html) |
|
|
148
|
+
| `up-toolbar` | * @tutorial https://uview-plus.jiangruyi.com/components/toolbar.html | [文档](https://uview-plus.jiangruyi.com/components/toolbar.html) |
|
|
149
|
+
| `up-tooltip` | * @tutorial https://uview-plus.jiangruyi.com/components/tooltip.html | [文档](https://uview-plus.jiangruyi.com/components/tooltip.html) |
|
|
150
|
+
| `up-tr` | * @tutorial url | [文档](url) |
|
|
151
|
+
| `up-transition` | * @tutorial | [文档](* @property {String} show 是否展示组件 (默认 false )) |
|
|
152
|
+
| `up-tree` | - | - |
|
|
153
|
+
| `up-upload` | 该组件用于上传图片场景 | [文档](https://uview-plus.jiangruyi.com/components/upload.html) |
|
|
154
|
+
| `up-view` | 对View默认标签的封装 | [文档](https://uview-plus.jiangruyi.com/components/view.html) |
|
|
155
|
+
| `up-virtual-list` | - | - |
|
|
156
|
+
| `up-waterfall` | 这是一个瀑布流形式的组件,对原组件进行升级已经支持自定义列数模式,便于适配不同屏幕。搭配loadMore 加载更多组件,让您开箱即用,眼前一亮。 | [文档](https://uview-plus.jiangruyi.com/components/waterfall.html) |
|
|
@@ -0,0 +1,223 @@
|
|
|
1
|
+
# 图标名清单
|
|
2
|
+
|
|
3
|
+
> 本文件由 `scripts/gen-skill-references.mjs` 从源码生成,请勿手改。
|
|
4
|
+
|
|
5
|
+
`up-icon` 内置图标共 213 个,来源是 `components/u-icon/icons.js`。
|
|
6
|
+
|
|
7
|
+
用法是去掉 `uicon-` 前缀的名字:`<up-icon name="star-fill" size="20"></up-icon>`。
|
|
8
|
+
|
|
9
|
+
**名字写错不会报错,只会渲染不出图标**,所以务必从下面的清单里挑,或者改用 `customIcon` 扩展自己的字体图标。
|
|
10
|
+
|
|
11
|
+
- `IE-circle-fill`
|
|
12
|
+
- `account`
|
|
13
|
+
- `account-fill`
|
|
14
|
+
- `android-circle-fill`
|
|
15
|
+
- `android-fill`
|
|
16
|
+
- `apple-fill`
|
|
17
|
+
- `arrow-down`
|
|
18
|
+
- `arrow-down-fill`
|
|
19
|
+
- `arrow-downward`
|
|
20
|
+
- `arrow-left`
|
|
21
|
+
- `arrow-left-double`
|
|
22
|
+
- `arrow-leftward`
|
|
23
|
+
- `arrow-right`
|
|
24
|
+
- `arrow-right-double`
|
|
25
|
+
- `arrow-rightward`
|
|
26
|
+
- `arrow-up`
|
|
27
|
+
- `arrow-up-fill`
|
|
28
|
+
- `arrow-upward`
|
|
29
|
+
- `attach`
|
|
30
|
+
- `backspace`
|
|
31
|
+
- `bag`
|
|
32
|
+
- `bag-fill`
|
|
33
|
+
- `baidu`
|
|
34
|
+
- `baidu-circle-fill`
|
|
35
|
+
- `bell`
|
|
36
|
+
- `bell-fill`
|
|
37
|
+
- `bookmark`
|
|
38
|
+
- `bookmark-fill`
|
|
39
|
+
- `calendar`
|
|
40
|
+
- `calendar-fill`
|
|
41
|
+
- `camera`
|
|
42
|
+
- `camera-fill`
|
|
43
|
+
- `car`
|
|
44
|
+
- `car-fill`
|
|
45
|
+
- `chat`
|
|
46
|
+
- `chat-fill`
|
|
47
|
+
- `checkbox-mark`
|
|
48
|
+
- `checkmark`
|
|
49
|
+
- `checkmark-circle`
|
|
50
|
+
- `checkmark-circle-fill`
|
|
51
|
+
- `chrome-circle-fill`
|
|
52
|
+
- `clock`
|
|
53
|
+
- `clock-fill`
|
|
54
|
+
- `close`
|
|
55
|
+
- `close-circle`
|
|
56
|
+
- `close-circle-fill`
|
|
57
|
+
- `column-line`
|
|
58
|
+
- `coupon`
|
|
59
|
+
- `coupon-fill`
|
|
60
|
+
- `cut`
|
|
61
|
+
- `download`
|
|
62
|
+
- `edit-pen`
|
|
63
|
+
- `edit-pen-fill`
|
|
64
|
+
- `email`
|
|
65
|
+
- `email-fill`
|
|
66
|
+
- `empty-address`
|
|
67
|
+
- `empty-car`
|
|
68
|
+
- `empty-coupon`
|
|
69
|
+
- `empty-data`
|
|
70
|
+
- `empty-favor`
|
|
71
|
+
- `empty-history`
|
|
72
|
+
- `empty-list`
|
|
73
|
+
- `empty-news`
|
|
74
|
+
- `empty-order`
|
|
75
|
+
- `empty-page`
|
|
76
|
+
- `empty-permission`
|
|
77
|
+
- `empty-search`
|
|
78
|
+
- `empty-wifi`
|
|
79
|
+
- `en`
|
|
80
|
+
- `error`
|
|
81
|
+
- `error-circle`
|
|
82
|
+
- `error-circle-fill`
|
|
83
|
+
- `eye`
|
|
84
|
+
- `eye-fill`
|
|
85
|
+
- `eye-off`
|
|
86
|
+
- `eye-off-outline`
|
|
87
|
+
- `facebook`
|
|
88
|
+
- `facebook-circle-fill`
|
|
89
|
+
- `file-text`
|
|
90
|
+
- `file-text-fill`
|
|
91
|
+
- `fingerprint`
|
|
92
|
+
- `folder`
|
|
93
|
+
- `gift`
|
|
94
|
+
- `gift-fill`
|
|
95
|
+
- `github-circle-fill`
|
|
96
|
+
- `google`
|
|
97
|
+
- `google-circle-fill`
|
|
98
|
+
- `grid`
|
|
99
|
+
- `grid-fill`
|
|
100
|
+
- `heart`
|
|
101
|
+
- `heart-fill`
|
|
102
|
+
- `home`
|
|
103
|
+
- `home-fill`
|
|
104
|
+
- `hourglass`
|
|
105
|
+
- `hourglass-half-fill`
|
|
106
|
+
- `ie`
|
|
107
|
+
- `info`
|
|
108
|
+
- `info-circle`
|
|
109
|
+
- `info-circle-fill`
|
|
110
|
+
- `integral`
|
|
111
|
+
- `integral-fill`
|
|
112
|
+
- `kefu-ermai`
|
|
113
|
+
- `level`
|
|
114
|
+
- `list`
|
|
115
|
+
- `list-dot`
|
|
116
|
+
- `lock`
|
|
117
|
+
- `lock-fill`
|
|
118
|
+
- `lock-open`
|
|
119
|
+
- `lock-opened-fill`
|
|
120
|
+
- `man`
|
|
121
|
+
- `man-add`
|
|
122
|
+
- `man-add-fill`
|
|
123
|
+
- `man-delete`
|
|
124
|
+
- `man-delete-fill`
|
|
125
|
+
- `map`
|
|
126
|
+
- `map-fill`
|
|
127
|
+
- `mic`
|
|
128
|
+
- `mic-off`
|
|
129
|
+
- `minus`
|
|
130
|
+
- `minus-circle`
|
|
131
|
+
- `minus-circle-fill`
|
|
132
|
+
- `minus-people-fill`
|
|
133
|
+
- `minus-square-fill`
|
|
134
|
+
- `moments`
|
|
135
|
+
- `moments-circel-fill`
|
|
136
|
+
- `more-circle`
|
|
137
|
+
- `more-circle-fill`
|
|
138
|
+
- `more-dot-fill`
|
|
139
|
+
- `movie`
|
|
140
|
+
- `order`
|
|
141
|
+
- `pause`
|
|
142
|
+
- `pause-circle`
|
|
143
|
+
- `pause-circle-fill`
|
|
144
|
+
- `person-delete-fill`
|
|
145
|
+
- `phone`
|
|
146
|
+
- `phone-fill`
|
|
147
|
+
- `photo`
|
|
148
|
+
- `photo-fill`
|
|
149
|
+
- `play-circle`
|
|
150
|
+
- `play-circle-fill`
|
|
151
|
+
- `play-left`
|
|
152
|
+
- `play-left-fill`
|
|
153
|
+
- `play-right`
|
|
154
|
+
- `play-right-fill`
|
|
155
|
+
- `plus`
|
|
156
|
+
- `plus-circle`
|
|
157
|
+
- `plus-circle-fill`
|
|
158
|
+
- `plus-people-fill`
|
|
159
|
+
- `plus-square-fill`
|
|
160
|
+
- `pushpin`
|
|
161
|
+
- `pushpin-fill`
|
|
162
|
+
- `qq-circle-fill`
|
|
163
|
+
- `qq-fill`
|
|
164
|
+
- `question`
|
|
165
|
+
- `question-circle`
|
|
166
|
+
- `question-circle-fill`
|
|
167
|
+
- `qzone`
|
|
168
|
+
- `qzone-circle-fill`
|
|
169
|
+
- `red-packet`
|
|
170
|
+
- `red-packet-fill`
|
|
171
|
+
- `reload`
|
|
172
|
+
- `rewind-left`
|
|
173
|
+
- `rewind-left-fill`
|
|
174
|
+
- `rewind-right`
|
|
175
|
+
- `rewind-right-fill`
|
|
176
|
+
- `rmb`
|
|
177
|
+
- `rmb-circle`
|
|
178
|
+
- `rmb-circle-fill`
|
|
179
|
+
- `scan`
|
|
180
|
+
- `search`
|
|
181
|
+
- `server-fill`
|
|
182
|
+
- `server-man`
|
|
183
|
+
- `setting`
|
|
184
|
+
- `setting-fill`
|
|
185
|
+
- `share`
|
|
186
|
+
- `share-fill`
|
|
187
|
+
- `share-square`
|
|
188
|
+
- `shopping-cart`
|
|
189
|
+
- `shopping-cart-fill`
|
|
190
|
+
- `skip-back-left`
|
|
191
|
+
- `skip-forward-right`
|
|
192
|
+
- `star`
|
|
193
|
+
- `star-fill`
|
|
194
|
+
- `tags`
|
|
195
|
+
- `tags-fill`
|
|
196
|
+
- `taobao`
|
|
197
|
+
- `taobao-circle-fill`
|
|
198
|
+
- `thumb-down`
|
|
199
|
+
- `thumb-down-fill`
|
|
200
|
+
- `thumb-up`
|
|
201
|
+
- `thumb-up-fill`
|
|
202
|
+
- `trash`
|
|
203
|
+
- `trash-fill`
|
|
204
|
+
- `twitter`
|
|
205
|
+
- `twitter-circle-fill`
|
|
206
|
+
- `volume`
|
|
207
|
+
- `volume-fill`
|
|
208
|
+
- `volume-off`
|
|
209
|
+
- `volume-off-fill`
|
|
210
|
+
- `warning`
|
|
211
|
+
- `warning-fill`
|
|
212
|
+
- `weibo`
|
|
213
|
+
- `weibo-circle-fill`
|
|
214
|
+
- `weixin-circle-fill`
|
|
215
|
+
- `weixin-fill`
|
|
216
|
+
- `wifi`
|
|
217
|
+
- `wifi-off`
|
|
218
|
+
- `woman`
|
|
219
|
+
- `zh`
|
|
220
|
+
- `zhifubao`
|
|
221
|
+
- `zhifubao-circle-fill`
|
|
222
|
+
- `zhihu`
|
|
223
|
+
- `zhihu-circle-fill`
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
# 常见坑
|
|
2
|
+
|
|
3
|
+
按"症状 → 原因"排列,遇到问题先从这里对号入座,多数不是组件 bug。
|
|
4
|
+
|
|
5
|
+
## 组件写了但没渲染 / 样式全丢
|
|
6
|
+
|
|
7
|
+
1. `pages.json` 的 easycom 规则漏了、写在 `custom` 外面,或者 `pages.json` 里有两个 `easycom` 字段
|
|
8
|
+
2. **改完 easycom 没重启项目**。uni-app 不热更新这份规则,改完必须重新编译
|
|
9
|
+
3. `App.vue` 没在 `<style lang="scss">` 首行 `@import "uview-plus/index.scss";`
|
|
10
|
+
4. `main.js` 漏了 `app.use(uviewPlus)`
|
|
11
|
+
|
|
12
|
+
## H5 正常,小程序 / App 空白
|
|
13
|
+
|
|
14
|
+
`install` 在 H5 端会额外用 `import.meta.glob` 把包内组件注册成全局组件(见包内 `index.js`),所以 H5 即使 easycom 没配好也能跑;小程序与 App 完全依赖 easycom。
|
|
15
|
+
|
|
16
|
+
**只要出现"H5 好的、小程序空白",先查 easycom**,不要怀疑组件的小程序兼容性。
|
|
17
|
+
|
|
18
|
+
## 小程序上组件根节点的 class / style 不生效
|
|
19
|
+
|
|
20
|
+
`manifest.json` 里缺 `mergeVirtualHostAttributes`:
|
|
21
|
+
|
|
22
|
+
```json
|
|
23
|
+
"mp-weixin": { "mergeVirtualHostAttributes": true },
|
|
24
|
+
"mp-toutiao": { "mergeVirtualHostAttributes": true }
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
小程序自定义组件有样式隔离,宿主的全局工具类不一定能命中组件内部节点。要覆盖组件样式,优先用组件自己的属性或 `customStyle`,而不是写全局类去穿透。
|
|
28
|
+
|
|
29
|
+
## 打包体积突然暴涨
|
|
30
|
+
|
|
31
|
+
`uni.scss` 里塞了 `index.scss` 之类的样式文件。`uni.scss` 会被注入每一个组件,只能放 `theme.scss`。
|
|
32
|
+
|
|
33
|
+
## nvue 页面报 `this.upThemeVar is not a function` / 白屏
|
|
34
|
+
|
|
35
|
+
项目里有 `.nvue` 页面但没启用 Root:`vite.config.ts` 缺 `UniUpRoot` 插件,或 `App.up.vue` 里的 `<UpRootView />` 被删了。nvue 页面的主题能力依赖 Root 注入。同类报错还有 `Property "upThemePageStyle" was accessed during render but is not defined on instance`。
|
|
36
|
+
|
|
37
|
+
## 弹窗关不掉 / 打不开
|
|
38
|
+
|
|
39
|
+
分三种情况,看组件的 `emits` 决定写法:
|
|
40
|
+
|
|
41
|
+
- emit `update:show` 的(`up-popup`、`up-action-sheet`、`up-modal`、`up-picker`、`up-cascader`、`up-tooltip`、`up-guide`、`up-swipe-action-item`):用 `v-model:show="show"`
|
|
42
|
+
- 只有 `show` 属性、不 emit `update:show` 的(例如 `up-calendar`、`up-datetime-picker`):只能 `:show="show"`,再在 `@close` / `@cancel` / `@confirm` 里自己把变量置 false。给它们写 `v-model:show` 不会报错,但永远关不掉
|
|
43
|
+
- 值类组件(`up-input` 等)内部是 `modelValue`,写 `v-model="x"`;给它们写 `v-model:show` 无效
|
|
44
|
+
|
|
45
|
+
## 图标不显示
|
|
46
|
+
|
|
47
|
+
1. 名字不在 `references/icons.md` 里。`up-icon` 找不到名字时会把 `name` 原样当内容渲染,不报错也不提示
|
|
48
|
+
2. 用了自定义字体图标但没配 `customIcon.family` / `customIcon.url`
|
|
49
|
+
3. App 端弱网。3.8.82 起 APP / APP-NVUE 已内置本地字体,无需额外配置;H5 与小程序仍走 `config.iconUrl` 远程字体
|
|
50
|
+
|
|
51
|
+
## 尺寸忽然变小 / 变大
|
|
52
|
+
|
|
53
|
+
项目把 `config.unit` 改成了 `rpx`,所有传数值的尺寸属性(`<up-image width="80">`)都按 rpx 解析。两个补充事实:
|
|
54
|
+
|
|
55
|
+
- 组件 scss 里写死的 px 不受这个配置影响,它只作用于属性传参
|
|
56
|
+
- 想要确定的单位就把单位写全:`width="80px"`
|
|
57
|
+
|
|
58
|
+
## 组件名和其他插件冲突
|
|
59
|
+
|
|
60
|
+
easycom 的 `^u-([^-].*)` 规则会拦走所有 `u-` 开头的标签,优先级高于页面里显式 `import` 的同名组件,于是第三方的 `u-parse` 之类会因为在 uview-plus 里找不到而报错。解决办法是给第三方组件换个不以 `u-` 开头的名字。
|
|
61
|
+
|
|
62
|
+
新代码统一用 `up-` 前缀能避开这一类冲突,也能避开官方 SDK 占用的名字(如 `u-slider`)。
|
|
63
|
+
|
|
64
|
+
## 主题 / 暗黑模式改了没反应
|
|
65
|
+
|
|
66
|
+
- 3.8 起主题是 `--up-*` CSS 变量 + 运行时主题;老项目 `uni.scss` 里的 `$u-*` 覆盖只桥接 light,不会自动生成 dark
|
|
67
|
+
- 原生导航栏、页面背景、tabBar 默认**不**跟随运行时主题,需要显式打开 `config.nativeThemeSync`(默认关,避免覆盖项目已有的 `pages.json` / `theme.json`)
|
|
68
|
+
|
|
69
|
+
## 构建期报错
|
|
70
|
+
|
|
71
|
+
- `Deprecation Warning: Sass @import rules are deprecated`:把 sass 锁到 `sass@1.63.2` + `sass-loader@10.4.1`,并在 `vite.config.ts` 里加 `silenceDeprecations`
|
|
72
|
+
- `@intlify/message-compiler` 相关报错:pnpm 与 vue-i18n 的兼容问题,改用 npm 或锁 `vue-i18n@9.1.9`
|
|
73
|
+
- 项目路径或项目名含中文也会引发莫名的构建失败
|
|
74
|
+
|
|
75
|
+
## 版本判断
|
|
76
|
+
|
|
77
|
+
`uni.$u.config.v` 只返回大版本 `'3'`,判断补丁版本要看包内 `package.json` 的 `version`。升级后出现的异常,先翻包内 `changelog.md`。
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
# 安装与接入
|
|
2
|
+
|
|
3
|
+
## 两种装法
|
|
4
|
+
|
|
5
|
+
### npm(vue-cli / 命令行工程)
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install uview-plus
|
|
9
|
+
# 升级
|
|
10
|
+
npm update uview-plus
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
注意:项目路径与项目名不要带中文;用 pnpm 时 `vue-i18n` 可能报 `@intlify/message-compiler` 相关错误,改用 npm 或锁 `vue-i18n@9.1.9`。
|
|
14
|
+
|
|
15
|
+
引用前缀是 `uview-plus`,例如 `uview-plus/index.scss`。
|
|
16
|
+
|
|
17
|
+
### HBuilderX(uni_modules)
|
|
18
|
+
|
|
19
|
+
在 uni-app 插件市场选 `uni_modules 版本` → `使用 HBuilderX 导入插件`,包会落到项目里的 `uni_modules/uview-plus`(CLI 工程是 `src/uni_modules/uview-plus`),后续可在 HBuilderX 里一键升级。
|
|
20
|
+
|
|
21
|
+
引用前缀改成 `@/uni_modules/uview-plus`,例如 `@/uni_modules/uview-plus/index.scss`。下文示例都用 npm 前缀,uni_modules 工程按此替换即可。
|
|
22
|
+
|
|
23
|
+
包内已内置 dayjs(`components/u-datetime-picker/dayjs.esm.min.js`),无需额外安装。
|
|
24
|
+
|
|
25
|
+
## 接入步骤
|
|
26
|
+
|
|
27
|
+
### 1. main.js 注册
|
|
28
|
+
|
|
29
|
+
```js
|
|
30
|
+
import uviewPlus from 'uview-plus'
|
|
31
|
+
|
|
32
|
+
// #ifdef VUE3
|
|
33
|
+
import { createSSRApp } from 'vue'
|
|
34
|
+
export function createApp() {
|
|
35
|
+
const app = createSSRApp(App)
|
|
36
|
+
app.use(uviewPlus)
|
|
37
|
+
return { app }
|
|
38
|
+
}
|
|
39
|
+
// #endif
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
需要全局配置时,第二个参数传一个返回配置对象的函数:
|
|
43
|
+
|
|
44
|
+
```js
|
|
45
|
+
app.use(uviewPlus, () => {
|
|
46
|
+
return {
|
|
47
|
+
// 可选:拿到内置 http 实例挂拦截器
|
|
48
|
+
httpIns: initRequest,
|
|
49
|
+
options: {
|
|
50
|
+
config: {
|
|
51
|
+
unit: 'rpx', // 组件数值型尺寸的默认单位,默认 px
|
|
52
|
+
interceptor: {
|
|
53
|
+
navbarLeftClick: () => {}
|
|
54
|
+
},
|
|
55
|
+
customIcon: { family: 'xyicon', url: 'https://.../font.ttf' },
|
|
56
|
+
customIcons: { 'light-mode': '\ue66c' } // 值是字体里的 unicode
|
|
57
|
+
},
|
|
58
|
+
color: { 'up-primary': '#2979ff' },
|
|
59
|
+
// 改组件属性的默认值,等价于 uni.$u.props.alert.type = 'error'
|
|
60
|
+
props: { alert: { type: 'error' } }
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
})
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
运行时也可以改:`import { setConfig } from 'uview-plus'`。
|
|
67
|
+
|
|
68
|
+
### 2. pages.json 配 easycom
|
|
69
|
+
|
|
70
|
+
三条规则都指向同一份 `components/u-*`,缺哪条就用不了对应前缀。规则**必须**写在 `custom` 里,且整个 `pages.json` 只能有一个 `easycom` 字段:
|
|
71
|
+
|
|
72
|
+
```json
|
|
73
|
+
{
|
|
74
|
+
"easycom": {
|
|
75
|
+
"autoscan": true,
|
|
76
|
+
"custom": {
|
|
77
|
+
"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
|
|
78
|
+
"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
|
|
79
|
+
"^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
uni_modules 工程把值换成 `@/uni_modules/uview-plus/components/u-$1/u-$1.vue`。
|
|
86
|
+
|
|
87
|
+
**改完 easycom 必须重启项目/重新编译**,uni-app 不会热更新这份规则。改完没重启是"组件不渲染"最常见的原因。
|
|
88
|
+
|
|
89
|
+
### 3. App.vue 引入基础样式
|
|
90
|
+
|
|
91
|
+
```vue
|
|
92
|
+
<style lang="scss">
|
|
93
|
+
/* 必须在 style 的第一行,且 style 标签要有 lang="scss" */
|
|
94
|
+
@import "uview-plus/index.scss";
|
|
95
|
+
</style>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### 4. uni.scss 引入主题变量
|
|
99
|
+
|
|
100
|
+
```scss
|
|
101
|
+
@import "uview-plus/theme.scss";
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
`uni.scss` 是 uni-app 的特殊文件(会被注入每个组件),**只能**放 `theme.scss`。把 `index.scss` 之类的样式塞进 `uni.scss` 会让打包体积暴涨。
|
|
105
|
+
|
|
106
|
+
## 平台与工程配置
|
|
107
|
+
|
|
108
|
+
### 小程序
|
|
109
|
+
|
|
110
|
+
`manifest.json` 里给微信、头条小程序加上 `mergeVirtualHostAttributes`,否则组件根节点上的 class/style 不生效:
|
|
111
|
+
|
|
112
|
+
```json
|
|
113
|
+
"mp-weixin": { "mergeVirtualHostAttributes": true },
|
|
114
|
+
"mp-toutiao": { "mergeVirtualHostAttributes": true }
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
### nvue 页面必须启用 Root
|
|
118
|
+
|
|
119
|
+
项目里只要有 `.nvue` 页面,就要在 `vite.config.ts` 启用 `UniUpRoot`,并保留 `App.up.vue` 里的 `<UpRootView />`:
|
|
120
|
+
|
|
121
|
+
```js
|
|
122
|
+
import UniUpRoot from 'uview-plus/libs/root/index.js'
|
|
123
|
+
|
|
124
|
+
export default defineConfig({
|
|
125
|
+
plugins: [UniUpRoot({ rootFileName: 'App.up' }), uni()]
|
|
126
|
+
})
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
没启用时 nvue 页面拿不到主题能力,典型报错是 `TypeError: this.upThemeVar is not a function` 或 `Property "upThemePageStyle" was accessed during render but is not defined on instance`。
|
|
130
|
+
|
|
131
|
+
### sass 版本
|
|
132
|
+
|
|
133
|
+
sass 1.8.0 以上会对 `@import` 报废弃警告,官方建议锁版本:
|
|
134
|
+
|
|
135
|
+
```json
|
|
136
|
+
"sass": "1.63.2",
|
|
137
|
+
"sass-loader": "10.4.1"
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
顺带在 `vite.config.ts` 里静音其余废弃警告:
|
|
141
|
+
|
|
142
|
+
```js
|
|
143
|
+
css: {
|
|
144
|
+
preprocessorOptions: {
|
|
145
|
+
scss: { silenceDeprecations: ['legacy-js-api', 'color-functions', 'import'] }
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
### TypeScript
|
|
151
|
+
|
|
152
|
+
`tsconfig.json` 的 `types` 里加 `uview-plus/types`,组件与 `uni.$u` 才有类型提示:
|
|
153
|
+
|
|
154
|
+
```json
|
|
155
|
+
{
|
|
156
|
+
"compilerOptions": {
|
|
157
|
+
"types": ["@dcloudio/types", "uview-plus/types"]
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
## 接入自检
|
|
163
|
+
|
|
164
|
+
1. H5 开发模式下控制台有 `uview-plus V3` 的版本 banner
|
|
165
|
+
2. `console.log(uni.$u.config.v)` 打得出 `'3'`(这个字段只表示大版本,补丁版本看包内 `package.json`)
|
|
166
|
+
3. 页面里写 `<up-button type="primary" text="按钮"></up-button>`,能看到蓝色按钮样式
|
|
167
|
+
|
|
168
|
+
三条里任意一条不成立,按上面的步骤逐条回查,不要先去怀疑组件本身。
|