mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-07 01:28:30 +08:00
Compare commits
108 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
4aaf257166 | ||
|
|
e185a8b291 | ||
|
|
8fa99167af | ||
|
|
5b3e07c46c | ||
|
|
effc3ce031 | ||
|
|
cd2e74ad61 | ||
|
|
3d2828ff2b | ||
|
|
1c315a9c02 | ||
|
|
84ecdd32c1 | ||
|
|
ca58733786 | ||
|
|
d85374833c | ||
|
|
c913cf7a9a | ||
|
|
c84af08cfd | ||
|
|
722c46077e | ||
|
|
1e14e32571 | ||
|
|
5c4d8dd8dc | ||
|
|
ec57b72224 | ||
|
|
ae44bb4af1 | ||
|
|
5657aa68a8 | ||
|
|
c3c6eb1249 | ||
|
|
0e4cb76b27 | ||
|
|
a4d2550fef | ||
|
|
99581a30be | ||
|
|
b0bb46d3a7 | ||
|
|
8d84508165 | ||
|
|
8efad6d340 | ||
|
|
bea12e1813 | ||
|
|
00212b0e3e | ||
|
|
1a9c3e8f4d | ||
|
|
abc457147a | ||
|
|
c984cff247 | ||
|
|
73027c0cef | ||
|
|
9943011b4c | ||
|
|
84e4e2223f | ||
|
|
35efdafeec | ||
|
|
d06deda403 | ||
|
|
9f54ef0313 | ||
|
|
fc06faa5a6 | ||
|
|
50a286fb5f | ||
|
|
552d4a7dd1 | ||
|
|
9d1b2b0680 | ||
|
|
5515be118d | ||
|
|
e0b605a49f | ||
|
|
99185310bc | ||
|
|
3564bce12f | ||
|
|
1333bdac4f | ||
|
|
41dd4177b6 | ||
|
|
046b135a14 | ||
|
|
7466c91c1a | ||
|
|
ed412b6726 | ||
|
|
9585db1150 | ||
|
|
5e186ea4b2 | ||
|
|
0dbdde9e23 | ||
|
|
1a9f626986 | ||
|
|
3ef9008d5b | ||
|
|
d7272ebab6 | ||
|
|
a90565510a | ||
|
|
98d1de8708 | ||
|
|
397c88338a | ||
|
|
43e4f2bd0b | ||
|
|
2f16c7e591 | ||
|
|
868b5ad310 | ||
|
|
e80b0df51e | ||
|
|
b959b39e4a | ||
|
|
c7ad1cf214 | ||
|
|
b06703d706 | ||
|
|
3f9887c426 | ||
|
|
96cf9c7082 | ||
|
|
6374dd8f07 | ||
|
|
b35d6357f3 | ||
|
|
8cf18e8755 | ||
|
|
4810db7d6f | ||
|
|
4c8cdb83d0 | ||
|
|
736b4fed58 | ||
|
|
af95bdd724 | ||
|
|
0a90e49121 | ||
|
|
3fec24de00 | ||
|
|
d86dd18b49 | ||
|
|
c32fd945d3 | ||
|
|
ce1d699f96 | ||
|
|
784aab4aa1 | ||
|
|
f5f7266c31 | ||
|
|
848dfc98b4 | ||
|
|
37e3eb17dd | ||
|
|
d7dac97998 | ||
|
|
bdf279d264 | ||
|
|
49b9366c0b | ||
|
|
93fafa180f | ||
|
|
e59fd568be | ||
|
|
b26c08c7de | ||
|
|
5c91fc3055 | ||
|
|
37042c7766 | ||
|
|
e37ce9205f | ||
|
|
1e1d3760aa | ||
|
|
7a2cd2da93 | ||
|
|
2e67adf2ba | ||
|
|
00ab76bd91 | ||
|
|
57d89f33d7 | ||
|
|
555ae5f400 | ||
|
|
9132174b11 | ||
|
|
04d0d11849 | ||
|
|
2bb28f361c | ||
|
|
b4e86053b4 | ||
|
|
cade06fe4a | ||
|
|
5abc3b5344 | ||
|
|
73ac6417ca | ||
|
|
6da7dabbba | ||
|
|
185929461c |
2
.github/ISSUE_TEMPLATE/1-bug-report.yml
vendored
2
.github/ISSUE_TEMPLATE/1-bug-report.yml
vendored
@ -7,7 +7,7 @@ body:
|
|||||||
attributes:
|
attributes:
|
||||||
value: |
|
value: |
|
||||||
在向我们提交 Bug 报告前,请优先使用以下方式尝试解决问题:
|
在向我们提交 Bug 报告前,请优先使用以下方式尝试解决问题:
|
||||||
- 在组件文档 [wot-design-uni](https://wot-design-uni.cn/) 确认使用方法是否正确
|
- 在组件文档 [wot-design-uni](https://wot-ui.cn/) 确认使用方法是否正确
|
||||||
- 尝试在 [Issue](https://github.com/Moonofweisheng/wot-design-uni/issues) 列表中搜索相同问题
|
- 尝试在 [Issue](https://github.com/Moonofweisheng/wot-design-uni/issues) 列表中搜索相同问题
|
||||||
- 如果不是反馈 Bug,请到 [Discussions 讨论区](https://github.com/Moonofweisheng/wot-design-uni/discussions) 发帖。
|
- 如果不是反馈 Bug,请到 [Discussions 讨论区](https://github.com/Moonofweisheng/wot-design-uni/discussions) 发帖。
|
||||||
|
|
||||||
|
|||||||
103
CHANGELOG.md
103
CHANGELOG.md
@ -1,6 +1,109 @@
|
|||||||
# 更新日志
|
# 更新日志
|
||||||
|
|
||||||
|
|
||||||
|
## [1.13.0](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.12.4...v1.13.0) (2025-09-28)
|
||||||
|
|
||||||
|
|
||||||
|
### ✨ Features | 新功能
|
||||||
|
|
||||||
|
* ✨ 为 Curtain 组件添加 show-menu-by-longpress 和 close-on-click 属性 ([a905655](https://github.com/Moonofweisheng/wot-design-uni/commit/a90565510ab55431f6d7537da465cc8299d07a46)), closes [#1279](https://github.com/Moonofweisheng/wot-design-uni/issues/1279)
|
||||||
|
* ✨ 优化 Swiper 使用默认插槽时插槽内容的显示效果 ([#1301](https://github.com/Moonofweisheng/wot-design-uni/issues/1301)) ([41dd417](https://github.com/Moonofweisheng/wot-design-uni/commit/41dd4177b66e6e03357ce79f5c9b92fa2a932a7a))
|
||||||
|
* ✨ 优化 Toast 组件图标的体积 ([#1034](https://github.com/Moonofweisheng/wot-design-uni/issues/1034)) ([c984cff](https://github.com/Moonofweisheng/wot-design-uni/commit/c984cff24749ffd753f21f04c79c6f896f7bd9ef))
|
||||||
|
* ✨ 增加车牌键盘语言切换功能,支持受控和非受控模式 ([#1294](https://github.com/Moonofweisheng/wot-design-uni/issues/1294)) ([9943011](https://github.com/Moonofweisheng/wot-design-uni/commit/9943011b4c629625091e82115d9241e6503efeae)), closes [#1275](https://github.com/Moonofweisheng/wot-design-uni/issues/1275) [#818](https://github.com/Moonofweisheng/wot-design-uni/issues/818)
|
||||||
|
* ✨ button组件支持微信小程序的getrealtimephonenumber 事件 ([#1097](https://github.com/Moonofweisheng/wot-design-uni/issues/1097)) ([ed412b6](https://github.com/Moonofweisheng/wot-design-uni/commit/ed412b67261fce04c51d5c5b8836ca4dd0dc22a4))
|
||||||
|
* ✨ Cell 新增 icon-siz 属性用于指定左侧图标大小 ([#1298](https://github.com/Moonofweisheng/wot-design-uni/issues/1298)) ([9585db1](https://github.com/Moonofweisheng/wot-design-uni/commit/9585db11503bc5e77e72e78ba7a51f1f6932f510)), closes [#1088](https://github.com/Moonofweisheng/wot-design-uni/issues/1088)
|
||||||
|
* ✨ Rate 支持清空评分([#1302](https://github.com/Moonofweisheng/wot-design-uni/issues/1302)) ([1333bda](https://github.com/Moonofweisheng/wot-design-uni/commit/1333bdac4f8f605c3c9851d0f43d267205ce5aef)), closes [#1293](https://github.com/Moonofweisheng/wot-design-uni/issues/1293)
|
||||||
|
* ✨ swiper新增default slot 用户可自定义swiper-item中的内容展示 ([#1164](https://github.com/Moonofweisheng/wot-design-uni/issues/1164)) ([046b135](https://github.com/Moonofweisheng/wot-design-uni/commit/046b135a14a938840c9309c6b9eedb1878866ac9))
|
||||||
|
* ✨ wd-picker-view 添加 item-height 属性 ([8d84508](https://github.com/Moonofweisheng/wot-design-uni/commit/8d845081657581a84282f8d4de6039272700e9b0))
|
||||||
|
|
||||||
|
|
||||||
|
### ✏️ Documentation | 文档
|
||||||
|
|
||||||
|
* 修复黑暗模式下demo页面样式异常 ([397c883](https://github.com/Moonofweisheng/wot-design-uni/commit/397c88338a65afa71f452a67cec938afd5e25e9a))
|
||||||
|
* ✏️ 补充 Button 组件的 getRealtimePhoneNumber 仅支持微信小程序 ([7466c91](https://github.com/Moonofweisheng/wot-design-uni/commit/7466c91c1a50318c6f80cbcbeb368dad2bff7dd9))
|
||||||
|
* ✏️ 补全一些缺失的文档 ([b0bb46d](https://github.com/Moonofweisheng/wot-design-uni/commit/b0bb46d3a792bc01c7f8fdbe97835fc04ae577bc))
|
||||||
|
* ✏️ 调整 Gap 文档描述错误的问题 ([1a9f626](https://github.com/Moonofweisheng/wot-design-uni/commit/1a9f62698643b5d1e5fc24be52ad3416464ff651))
|
||||||
|
* ✏️ 调整文档站点域名为 wot-ui.cn ([4c8cdb8](https://github.com/Moonofweisheng/wot-design-uni/commit/4c8cdb83d077370f6d81b9250c6651301521eb6b))
|
||||||
|
* ✏️ 更新快速上手项目链接 ([d86dd18](https://github.com/Moonofweisheng/wot-design-uni/commit/d86dd18b49bbaf2a06a6f85338b2e9fe6b9950b6))
|
||||||
|
* ✏️ 添加 vscode 代码提示插件 ([c3c6eb1](https://github.com/Moonofweisheng/wot-design-uni/commit/c3c6eb124985b4620a336c034919085ecaed20d9))
|
||||||
|
* ✏️ 添加博客链接地址 ([d7272eb](https://github.com/Moonofweisheng/wot-design-uni/commit/d7272ebab6fbea321133ee52ce1c6748567bf486))
|
||||||
|
* ✏️ 添加关于全局反馈方案和最佳实践分享的文档 ([a4d2550](https://github.com/Moonofweisheng/wot-design-uni/commit/a4d2550fefe77c64e179ebd22d212827b5fa5217))
|
||||||
|
* ✏️ 添加赞助渠道 ([3564bce](https://github.com/Moonofweisheng/wot-design-uni/commit/3564bce12f4341bd329731c9a18121c611c460c7))
|
||||||
|
* ✏️ 文档首页新增快速上手模板和公众号的入口 ([e80b0df](https://github.com/Moonofweisheng/wot-design-uni/commit/e80b0df51e5049cecf4f0f70cc83535dc52f8e06))
|
||||||
|
* ✏️ 优化演示 Demo 在小屏幕上的显示效果 ([#1296](https://github.com/Moonofweisheng/wot-design-uni/issues/1296)) ([0dbdde9](https://github.com/Moonofweisheng/wot-design-uni/commit/0dbdde9e23645c4735e4051f5c259b0c473df896))
|
||||||
|
* ✏️ 优化演示demo显示效果 ([868b5ad](https://github.com/Moonofweisheng/wot-design-uni/commit/868b5ad3108f45a096da967f92793ae05b645c2b)), closes [#1269](https://github.com/Moonofweisheng/wot-design-uni/issues/1269)
|
||||||
|
* ✏️ 友情链接支持一行最多四个 ([4810db7](https://github.com/Moonofweisheng/wot-design-uni/commit/4810db7d6fba25062382be3f862b5ba252052b70))
|
||||||
|
* ✏️ 添加 img 组件 transformAssetUrls 配置介绍 ([#1259](https://github.com/Moonofweisheng/wot-design-uni/issues/1259)) ([96cf9c7](https://github.com/Moonofweisheng/wot-design-uni/commit/96cf9c7082b94904d45ef1a514f66bff60a57071))
|
||||||
|
* ✏️ 修正 Text 组件文档一些语言组织的错误 ([abc4571](https://github.com/Moonofweisheng/wot-design-uni/commit/abc457147a09444fa82868aa73800958b3621796))
|
||||||
|
* 修复 starter 地址错误 ([#1316](https://github.com/Moonofweisheng/wot-design-uni/issues/1316)) ([00212b0](https://github.com/Moonofweisheng/wot-design-uni/commit/00212b0e3ecad336edbeec6473db01a67c04cb6b))
|
||||||
|
|
||||||
|
|
||||||
|
### 🐛 Bug Fixes | Bug 修复
|
||||||
|
|
||||||
|
* 🐛 修复 Segmented 选项点击时无论是否改变选中值都会触发 change 的问题 ([#1326](https://github.com/Moonofweisheng/wot-design-uni/issues/1326)) ([5657aa6](https://github.com/Moonofweisheng/wot-design-uni/commit/5657aa68a8357ca66c626b7e844c18aa95828c6d)), closes [#1323](https://github.com/Moonofweisheng/wot-design-uni/issues/1323)
|
||||||
|
* 🐛 修复 table 组件表头文字溢出样式异常的问题 ([#1297](https://github.com/Moonofweisheng/wot-design-uni/issues/1297)) ([5e186ea](https://github.com/Moonofweisheng/wot-design-uni/commit/5e186ea4b2f8fea09cb1913c6a63f1e60827ec4e)), closes [#1182](https://github.com/Moonofweisheng/wot-design-uni/issues/1182) [#1058](https://github.com/Moonofweisheng/wot-design-uni/issues/1058)
|
||||||
|
* 🐛 修复wd-drop-menu-item组件在popup数据较多在滚动区下拉时和页面onPullDownRefresh之间的冲突 ([#1113](https://github.com/Moonofweisheng/wot-design-uni/issues/1113)) ([73027c0](https://github.com/Moonofweisheng/wot-design-uni/commit/73027c0cefe980c27f46412c5648761c30a01bd0)), closes [#1107](https://github.com/Moonofweisheng/wot-design-uni/issues/1107)
|
||||||
|
|
||||||
|
### [1.12.4](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.12.3...v1.12.4) (2025-08-28)
|
||||||
|
|
||||||
|
|
||||||
|
### 🐛 Bug Fixes | Bug 修复
|
||||||
|
|
||||||
|
* 🐛 修复 Upload 设置 multiple 无效的问题 ([#1250](https://github.com/Moonofweisheng/wot-design-uni/issues/1250)) ([784aab4](https://github.com/Moonofweisheng/wot-design-uni/commit/784aab4aa156e2a440db7d1a0a10e36358851763))
|
||||||
|
|
||||||
|
### [1.12.3](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.12.2...v1.12.3) (2025-08-27)
|
||||||
|
|
||||||
|
|
||||||
|
### 🐛 Bug Fixes | Bug 修复
|
||||||
|
|
||||||
|
* 🐛 修复 Fab、Cell组件 Icon 垂直居中异常的问题 ([#1249](https://github.com/Moonofweisheng/wot-design-uni/issues/1249)) ([d7dac97](https://github.com/Moonofweisheng/wot-design-uni/commit/d7dac979982513c88363dd6224352ab099b7d0c3))
|
||||||
|
|
||||||
|
### [1.12.2](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.12.1...v1.12.2) (2025-08-26)
|
||||||
|
|
||||||
|
|
||||||
|
### ✨ Features | 新功能
|
||||||
|
|
||||||
|
* ✨ 调整 composables 的导出,新增 useCountDown 的导出 ([#1242](https://github.com/Moonofweisheng/wot-design-uni/issues/1242)) ([93fafa1](https://github.com/Moonofweisheng/wot-design-uni/commit/93fafa180fcfb3fa07deab0393449e822179d43b)), closes [#1239](https://github.com/Moonofweisheng/wot-design-uni/issues/1239)
|
||||||
|
* ✨ DroMenu 图标大小和位置样式逻辑调整为不缩放且不使用绝对定位 ([#1243](https://github.com/Moonofweisheng/wot-design-uni/issues/1243)) ([e59fd56](https://github.com/Moonofweisheng/wot-design-uni/commit/e59fd568be9284b7eb91575a3f59194cd681828c))
|
||||||
|
|
||||||
|
### [1.12.1](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.12.0...v1.12.1) (2025-08-25)
|
||||||
|
|
||||||
|
|
||||||
|
### 🐛 Bug Fixes | Bug 修复
|
||||||
|
|
||||||
|
* 🐛 修复 DropDown 图标垂直居中异常的问题 ([37042c7](https://github.com/Moonofweisheng/wot-design-uni/commit/37042c7766bfe366828f51201c6023aeb4cfaec6))
|
||||||
|
|
||||||
|
## [1.12.0](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.11.1...v1.12.0) (2025-08-24)
|
||||||
|
|
||||||
|
|
||||||
|
### ✨ Features | 新功能
|
||||||
|
|
||||||
|
* ✨ 为 Cell、Input、Textarea 等组件添加 marker-side 属性控制必填*位置 ([#1181](https://github.com/Moonofweisheng/wot-design-uni/issues/1181)) ([cade06f](https://github.com/Moonofweisheng/wot-design-uni/commit/cade06fe4a776e55a862a58f1eddc1fe0f055a88)), closes [#555](https://github.com/Moonofweisheng/wot-design-uni/issues/555)
|
||||||
|
* ✨ 新增维语本地化支持 ([b4e8605](https://github.com/Moonofweisheng/wot-design-uni/commit/b4e86053b4bb73ef89ae91330d50b6e68349ad20))
|
||||||
|
* ✨ Upload 上传组件调信小程序端使用chooseMedia替换掉chooseImage等 ([57d89f3](https://github.com/Moonofweisheng/wot-design-uni/commit/57d89f33d769362c198048d37b44f7d67ed384f4)), closes [#1193](https://github.com/Moonofweisheng/wot-design-uni/issues/1193)
|
||||||
|
|
||||||
|
|
||||||
|
### 🐛 Bug Fixes | Bug 修复
|
||||||
|
|
||||||
|
* 🐛 签字版组件设置exportScale < 1时在支付宝上导出图片不完整 ([#1129](https://github.com/Moonofweisheng/wot-design-uni/issues/1129)) ([555ae5f](https://github.com/Moonofweisheng/wot-design-uni/commit/555ae5f40049ffd958ec4e58e80ccd3ba4f524f3))
|
||||||
|
* 🐛 修复 grid-item 组件 custom-text 失效的问题 ([#1180](https://github.com/Moonofweisheng/wot-design-uni/issues/1180)) ([5abc3b5](https://github.com/Moonofweisheng/wot-design-uni/commit/5abc3b5344bd2f880ef94350e10c2ef9e9f9250f)), closes [#995](https://github.com/Moonofweisheng/wot-design-uni/issues/995)
|
||||||
|
* 🐛 修复 signature 组件设置background-color为透明色导致撤销无效 ([#1224](https://github.com/Moonofweisheng/wot-design-uni/issues/1224)) ([2e67adf](https://github.com/Moonofweisheng/wot-design-uni/commit/2e67adf2bae212a03f3cef3113326f4d942b0b55)), closes [#1223](https://github.com/Moonofweisheng/wot-design-uni/issues/1223)
|
||||||
|
* 🐛 修复 Upload 多选时配置为覆盖上传图片达到上限无法替换图片的问题 ([00ab76b](https://github.com/Moonofweisheng/wot-design-uni/commit/00ab76bd91e91a3d0fabdb8b80e00df764055519))
|
||||||
|
|
||||||
|
|
||||||
|
### ✏️ Documentation | 文档
|
||||||
|
|
||||||
|
* ✏️ 修复基础组件文档问题 - 阶段一完成 ([#1220](https://github.com/Moonofweisheng/wot-design-uni/issues/1220)) ([9132174](https://github.com/Moonofweisheng/wot-design-uni/commit/9132174b11c539d2ec5f8d0aec2044ac1affaaff))
|
||||||
|
* ✏️ 修正 drop-menu-item options 默认数据结构注释 ([#1087](https://github.com/Moonofweisheng/wot-design-uni/issues/1087)) ([7a2cd2d](https://github.com/Moonofweisheng/wot-design-uni/commit/7a2cd2da93746761b05e068083b171312c4af0e3))
|
||||||
|
* 修复 Button/Icon/ConfigProvider/Popup 组件文档不一致问题 ([#1190](https://github.com/Moonofweisheng/wot-design-uni/issues/1190)) ([04d0d11](https://github.com/Moonofweisheng/wot-design-uni/commit/04d0d1184957bb1ae5b1ee2ddfaa978a989427b3))
|
||||||
|
|
||||||
|
### [1.11.1](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.11.0...v1.11.1) (2025-07-25)
|
||||||
|
|
||||||
|
|
||||||
|
### 🐛 Bug Fixes | Bug 修复
|
||||||
|
|
||||||
|
* 🐛 修复 RootPortal 及 Picker 相关组件 type-check 错误的问题 ([1859294](https://github.com/Moonofweisheng/wot-design-uni/commit/185929461c56d596b6a9d0dabe117e229ceda601))
|
||||||
|
|
||||||
## [1.11.0](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.10.0...v1.11.0) (2025-07-20)
|
## [1.11.0](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.10.0...v1.11.0) (2025-07-20)
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
46
README.md
46
README.md
@ -1,5 +1,5 @@
|
|||||||
<p align="center">
|
<p align="center">
|
||||||
<img alt="logo" src="https://wot-design-uni.cn/logo.png" width="200">
|
<img alt="logo" src="https://wot-ui.cn/logo.png" width="200">
|
||||||
</p>
|
</p>
|
||||||
<h1 align="center">Wot UI</h1>
|
<h1 align="center">Wot UI</h1>
|
||||||
|
|
||||||
@ -39,10 +39,9 @@
|
|||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
🚀 <a href="https://wot-design-uni.cn">文档网站 (推荐)</a>
|
🚀 <a href="https://wot-ui.cn">文档网站 (推荐)</a>
|
||||||
✈️ <a href="https://wot-design-uni.pages.dev/">文档网站(cloudflare)</a>
|
✈️ <a href="https://wot-design-uni.pages.dev/">文档网站(cloudflare)</a>
|
||||||
🔥 <a href="https://wot-design-uni.netlify.app/">文档网站 (Netlify)</a>
|
🔥 <a href="https://wot-design-uni.netlify.app/">文档网站 (Netlify)</a>
|
||||||
🚫 <a href="https://wot-design-uni.gitee.io/">文档网站 (Gitee暂时下线)</a>
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
## ✨ 特性
|
## ✨ 特性
|
||||||
@ -53,34 +52,34 @@
|
|||||||
- 🌍 支持国际化,内置 15 种语言包.
|
- 🌍 支持国际化,内置 15 种语言包.
|
||||||
- 📖 提供丰富的文档和组件示例.
|
- 📖 提供丰富的文档和组件示例.
|
||||||
- 🎨 支持修改 CSS 变量实现主题定制.
|
- 🎨 支持修改 CSS 变量实现主题定制.
|
||||||
- 🍭 支持暗黑模式
|
- 🍭 支持暗黑模式.
|
||||||
|
|
||||||
## 📱 预览
|
## 📱 预览
|
||||||
|
|
||||||
扫描二维码访问演示,注意:因微信审核机制限制,当前的微信小程序示例可能不是最新版本,可以 clone 代码到本地预览。
|
扫描二维码访问演示,注意:因微信审核机制限制,当前的微信小程序示例可能不是最新版本,可以 clone 代码到本地预览。
|
||||||
|
|
||||||
<p style="display:flex;gap:24px">
|
<p style="display:flex;gap:24px">
|
||||||
<img src="https://wot-design-uni.cn/wx.jpg" width="200" height="200"/>
|
<img src="https://wot-ui.cn/wx.jpg" width="200" height="200"/>
|
||||||
<img src="https://wot-design-uni.cn/alipay.png" width="200" height="200" />
|
<img src="https://wot-ui.cn/alipay.png" width="200" height="200" />
|
||||||
<img src="https://wot-design-uni.cn/h5.png" width="200" height="200" />
|
<img src="https://wot-ui.cn/h5.png" width="200" height="200" />
|
||||||
<img src="https://wot-design-uni.cn/android.png" width="200" height="200" />
|
<img src="https://wot-ui.cn/android.png" width="200" height="200" />
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
## 快速上手
|
## 快速上手
|
||||||
|
|
||||||
详细说明见 [快速上手](https://wot-design-uni.cn/guide/quick-use.html)。
|
详细说明见 [快速上手](https://wot-ui.cn/guide/quick-use.html)。
|
||||||
|
|
||||||
## 链接
|
## 链接
|
||||||
|
|
||||||
- [常见问题](https://wot-design-uni.cn/guide/common-problems.html)
|
- [常见问题](https://wot-ui.cn/guide/common-problems.html)
|
||||||
- [更新日志](https://wot-design-uni.cn/guide/changelog.html)
|
- [更新日志](https://wot-ui.cn/guide/changelog.html)
|
||||||
- [Discussions 讨论区](https://github.com/Moonofweisheng/wot-design-uni/discussions)
|
- [Discussions 讨论区](https://github.com/Moonofweisheng/wot-design-uni/discussions)
|
||||||
- [QQ 群](https://wot-design-uni.cn/guide/join-group.html)
|
- [QQ 群](https://wot-ui.cn/guide/join-group.html)
|
||||||
|
|
||||||
## 优秀案例
|
## 优秀案例
|
||||||
|
|
||||||
[这里](https://wot-design-uni.cn/guide/cases.html)我们收集了一些优秀的案例,欢迎大家体验!
|
[这里](https://wot-ui.cn/guide/cases.html)我们收集了一些优秀的案例,欢迎大家体验!
|
||||||
|
|
||||||
我们也非常欢迎大家一起贡献优秀的 Demo 与案例,欢迎在此 [issue](https://github.com/Moonofweisheng/wot-design-uni/issues/16) 提交案例。
|
我们也非常欢迎大家一起贡献优秀的 Demo 与案例,欢迎在此 [issue](https://github.com/Moonofweisheng/wot-design-uni/issues/16) 提交案例。
|
||||||
|
|
||||||
@ -88,15 +87,16 @@
|
|||||||
|
|
||||||
| 项目 | 描述 |
|
| 项目 | 描述 |
|
||||||
| ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
|
| ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
|
||||||
|
| [wot-starter](https://github.com/wot-ui/wot-starter) | 基于 [vitesse-uni-app](https://github.com/uni-helper/vitesse-uni-app) 的 wot-ui 快速起手项目 |
|
||||||
|
| [wot-ui-intellisense](https://github.com/wot-ui/wot-ui-intellisense) | wot-ui vscode 代码提示插件 |
|
||||||
| [awesome-uni-app](https://github.com/uni-helper/awesome-uni-app) | 多端统一开发框架 uni-app 优秀开发资源汇总 |
|
| [awesome-uni-app](https://github.com/uni-helper/awesome-uni-app) | 多端统一开发框架 uni-app 优秀开发资源汇总 |
|
||||||
| [create-uni](https://github.com/uni-helper/create-uni) | 快速创建 uni-app 项目 |
|
| [create-uni](https://github.com/uni-helper/create-uni) | 快速创建 uni-app 项目 |
|
||||||
| [wot-demo](https://github.com/Moonofweisheng/wot-demo) | 基于 [vitesse-uni-app](https://github.com/uni-helper/vitesse-uni-app) 的wot-design-uni快速起手demo |
|
| [wot-starter-retail](https://github.com/Moonofweisheng/wot-starter-retail) | 基于 wot-ui 的 uni-app 零售行业模板 |
|
||||||
| [wot-starter-retail](https://github.com/Moonofweisheng/wot-starter-retail) | 基于 wot-design-uni 的 uni-app 零售行业模板 |
|
| [Wot UI Snippets](https://marketplace.visualstudio.com/items?itemName=kiko.wot-design-uni-snippets) | wot-ui 代码块提示 |
|
||||||
| [Wot UI Snippets](https://marketplace.visualstudio.com/items?itemName=kiko.wot-design-uni-snippets) | Wot UI 代码块提示 |
|
|
||||||
| [uni-mini-ci](https://github.com/Moonofweisheng/uni-mini-ci) | 一个 uni-app 小程序端构建后支持 CI(持续集成)的插件 |
|
| [uni-mini-ci](https://github.com/Moonofweisheng/uni-mini-ci) | 一个 uni-app 小程序端构建后支持 CI(持续集成)的插件 |
|
||||||
| [uni-mini-router](https://github.com/Moonofweisheng/uni-mini-router) | 一个基于 vue3 和 Typescript 的轻量级 uni-app 路由库 |
|
| [uni-mini-router](https://github.com/Moonofweisheng/uni-mini-router) | 一个基于 vue3 和 Typescript 的轻量级 uni-app 路由库 |
|
||||||
| [unibest](https://github.com/unibest-tech/unibest) | 基于 wot-design-uni 的 uni-app 模板 |
|
| [unibest](https://github.com/unibest-tech/unibest) | 基于 wot-ui 的 uni-app 模板 |
|
||||||
| [wot-design-uni AI 助手](https://www.coze.cn/store/bot/7347916532258701363) | 一个能回答你关于 wot-design-uni 组件库问题的智能助手 |
|
| [wot-design-uni AI 助手](https://www.coze.cn/store/bot/7347916532258701363) | 一个能回答你关于 wot-ui 组件库问题的智能助手 |
|
||||||
| [uni-ku-root](https://github.com/uni-ku/root) | 一个模拟 App.vue 原有能力的根组件插件 |
|
| [uni-ku-root](https://github.com/uni-ku/root) | 一个模拟 App.vue 原有能力的根组件插件 |
|
||||||
|
|
||||||
## 贡献指南
|
## 贡献指南
|
||||||
@ -119,7 +119,7 @@
|
|||||||
|
|
||||||
如果您认为 Wot UI 帮助到了您的开发工作,您可以捐赠 Wot UI 的研发工作,捐赠无门槛,哪怕是一杯可乐也好。
|
如果您认为 Wot UI 帮助到了您的开发工作,您可以捐赠 Wot UI 的研发工作,捐赠无门槛,哪怕是一杯可乐也好。
|
||||||
|
|
||||||
捐赠后您的昵称、留言等将会展示在[捐赠榜单](https://wot-design-uni.cn/reward/donor.html)中。
|
捐赠后您的昵称、留言等将会展示在[捐赠榜单](https://wot-ui.cn/reward/donor.html)中。
|
||||||
|
|
||||||
|
|
||||||
### 爱发电捐赠
|
### 爱发电捐赠
|
||||||
@ -129,15 +129,15 @@
|
|||||||
### 扫码捐赠
|
### 扫码捐赠
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<img src="https://wot-design-uni.cn/weixinQrcode.jpg" width="200" height="200" style="margin-right:30px"/>
|
<img src="https://wot-ui.cn/weixinQrcode.jpg" width="200" height="200" style="margin-right:30px"/>
|
||||||
<img src="https://wot-design-uni.cn/alipayQrcode.jpg" width="200" height="200" />
|
<img src="https://wot-ui.cn/alipayQrcode.jpg" width="200" height="200" />
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
## 鸣谢
|
## 鸣谢
|
||||||
|
|
||||||
- [wot-design](https://github.com/jd-ftf/wot-design-mini) - 感谢 wot-design 团队多年来的不断维护,让 wot-design-uni 能够站在巨人的肩膀上。
|
- [wot-design](https://github.com/jd-ftf/wot-design-mini) - 感谢 wot-design 团队多年来的不断维护,让 wot-design-uni 能够站在巨人的肩膀上。
|
||||||
- [uni-helper](https://github.com/uni-helper) - 感谢 uni-helper 团队提供的 uni-app 工具库,让 wot-design-uni 能够更方便地使用。
|
- [uni-helper](https://github.com/uni-helper) - 感谢 uni-helper 团队提供的 uni-app 工具库,让 wot-design-uni 能够更方便地使用。
|
||||||
- [捐赠者](https://wot-design-uni.cn/reward/donor.html) - 感谢所有捐赠者,是你们的捐赠让 wot-design-uni 能够更好地发展。
|
- [捐赠者](https://wot-ui.cn/reward/donor.html) - 感谢所有捐赠者,是你们的捐赠让 wot-design-uni 能够更好地发展。
|
||||||
|
|
||||||
|
|
||||||
## 开源协议
|
## 开源协议
|
||||||
|
|||||||
46
README_en.md
46
README_en.md
@ -1,5 +1,5 @@
|
|||||||
<p align="center">
|
<p align="center">
|
||||||
<img alt="logo" src="https://wot-design-uni.cn/logo.png" width="200">
|
<img alt="logo" src="https://wot-ui.cn/logo.png" width="200">
|
||||||
</p>
|
</p>
|
||||||
<h1 align="center">Wot UI</h1>
|
<h1 align="center">Wot UI</h1>
|
||||||
|
|
||||||
@ -39,7 +39,7 @@
|
|||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
🚀 <a href="https://wot-design-uni.cn">Documentation (Recommended)</a>
|
🚀 <a href="https://wot-ui.cn">Documentation (Recommended)</a>
|
||||||
✈️ <a href="https://wot-design-uni.pages.dev/">Documentation (Cloudflare)</a>
|
✈️ <a href="https://wot-design-uni.pages.dev/">Documentation (Cloudflare)</a>
|
||||||
🔥 <a href="https://wot-design-uni.netlify.app/">Documentation (Netlify)</a>
|
🔥 <a href="https://wot-design-uni.netlify.app/">Documentation (Netlify)</a>
|
||||||
</p>
|
</p>
|
||||||
@ -59,29 +59,45 @@
|
|||||||
Scan the QR code to view the demo. Note: Due to WeChat review restrictions, the current WeChat Mini Program demo may not be the latest version. You can clone the code locally for preview.
|
Scan the QR code to view the demo. Note: Due to WeChat review restrictions, the current WeChat Mini Program demo may not be the latest version. You can clone the code locally for preview.
|
||||||
|
|
||||||
<p style="display:flex;gap:24px">
|
<p style="display:flex;gap:24px">
|
||||||
<img src="https://wot-design-uni.cn/wx.jpg" width="200" height="200"/>
|
<img src="https://wot-ui.cn/wx.jpg" width="200" height="200"/>
|
||||||
<img src="https://wot-design-uni.cn/alipay.png" width="200" height="200" />
|
<img src="https://wot-ui.cn/alipay.png" width="200" height="200" />
|
||||||
<img src="https://wot-design-uni.cn/h5.png" width="200" height="200" />
|
<img src="https://wot-ui.cn/h5.png" width="200" height="200" />
|
||||||
<img src="https://wot-design-uni.cn/android.png" width="200" height="200" />
|
<img src="https://wot-ui.cn/android.png" width="200" height="200" />
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
## Quick Start
|
## Quick Start
|
||||||
|
|
||||||
For detailed instructions, see [Quick Start](https://wot-design-uni.cn/guide/quick-use.html).
|
For detailed instructions, see [Quick Start](https://wot-ui.cn/guide/quick-use.html).
|
||||||
|
|
||||||
## Links
|
## Links
|
||||||
|
|
||||||
- [FAQ](https://wot-design-uni.cn/guide/common-problems.html)
|
- [FAQ](https://wot-ui.cn/guide/common-problems.html)
|
||||||
- [Changelog](https://wot-design-uni.cn/guide/changelog.html)
|
- [Changelog](https://wot-ui.cn/guide/changelog.html)
|
||||||
- [Discussions](https://github.com/Moonofweisheng/wot-design-uni/discussions)
|
- [Discussions](https://github.com/Moonofweisheng/wot-design-uni/discussions)
|
||||||
- [QQ Group](https://wot-design-uni.cn/guide/join-group.html)
|
- [QQ Group](https://wot-ui.cn/guide/join-group.html)
|
||||||
|
|
||||||
## Showcase
|
## Showcase
|
||||||
|
|
||||||
Check out some excellent [examples](https://wot-design-uni.cn/guide/cases.html) here!
|
Check out some excellent [examples](https://wot-ui.cn/guide/cases.html) here!
|
||||||
|
|
||||||
We welcome contributions of excellent demos and cases. Feel free to submit your case in this [issue](https://github.com/Moonofweisheng/wot-design-uni/issues/16).
|
We welcome contributions of excellent demos and cases. Feel free to submit your case in this [issue](https://github.com/Moonofweisheng/wot-design-uni/issues/16).
|
||||||
|
|
||||||
|
## Ecosystem
|
||||||
|
|
||||||
|
| Project | Description |
|
||||||
|
| ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
|
||||||
|
| [wot-starter](https://github.com/wot-ui/wot-starter) | A wot-ui quick start project based on [vitesse-uni-app](https://github.com/uni-helper/vitesse-uni-app) |
|
||||||
|
| [wot-ui-intellisense](https://github.com/wot-ui/wot-ui-intellisense) | wot-ui vscode code completion plugin |
|
||||||
|
| [awesome-uni-app](https://github.com/uni-helper/awesome-uni-app) | A collection of excellent development resources for uni-app multi-platform unified development framework |
|
||||||
|
| [create-uni](https://github.com/uni-helper/create-uni) | Quickly create uni-app projects |
|
||||||
|
| [wot-starter-retail](https://github.com/Moonofweisheng/wot-starter-retail) | A uni-app retail industry template based on wot-ui |
|
||||||
|
| [Wot UI Snippets](https://marketplace.visualstudio.com/items?itemName=kiko.wot-design-uni-snippets) | wot-ui code snippets |
|
||||||
|
| [uni-mini-ci](https://github.com/Moonofweisheng/uni-mini-ci) | A uni-app mini-program build plugin that supports CI (Continuous Integration) |
|
||||||
|
| [uni-mini-router](https://github.com/Moonofweisheng/uni-mini-router) | A lightweight uni-app router library based on vue3 and TypeScript |
|
||||||
|
| [unibest](https://github.com/unibest-tech/unibest) | A uni-app template based on wot-ui |
|
||||||
|
| [wot-design-uni AI Assistant](https://www.coze.cn/store/bot/7347916532258701363) | An intelligent assistant that can answer your questions about wot-ui component library |
|
||||||
|
| [uni-ku-root](https://github.com/uni-ku/root) | A root component plugin that simulates the original capabilities of App.vue |
|
||||||
|
|
||||||
## Contributing
|
## Contributing
|
||||||
|
|
||||||
Please read our [Contributing Guide](./.github/CONTRIBUTING.md) before making changes to the code.
|
Please read our [Contributing Guide](./.github/CONTRIBUTING.md) before making changes to the code.
|
||||||
@ -102,7 +118,7 @@ Developing a UI component library is time-consuming work, especially when it nee
|
|||||||
|
|
||||||
If you find Wot UI helpful in your development work, you can donate to support our development work. Any amount is welcome, even if it's just a cola.
|
If you find Wot UI helpful in your development work, you can donate to support our development work. Any amount is welcome, even if it's just a cola.
|
||||||
|
|
||||||
After donating, your nickname and message will be displayed on the [donor list](https://wot-design-uni.cn/reward/donor.html).
|
After donating, your nickname and message will be displayed on the [donor list](https://wot-ui.cn/reward/donor.html).
|
||||||
|
|
||||||
### Afdian Donation
|
### Afdian Donation
|
||||||
|
|
||||||
@ -111,15 +127,15 @@ After donating, your nickname and message will be displayed on the [donor list](
|
|||||||
### Scan to Donate
|
### Scan to Donate
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<img src="https://wot-design-uni.cn/weixinQrcode.jpg" width="200" height="200" style="margin-right:30px"/>
|
<img src="https://wot-ui.cn/weixinQrcode.jpg" width="200" height="200" style="margin-right:30px"/>
|
||||||
<img src="https://wot-design-uni.cn/alipayQrcode.jpg" width="200" height="200" />
|
<img src="https://wot-ui.cn/alipayQrcode.jpg" width="200" height="200" />
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
## Acknowledgments
|
## Acknowledgments
|
||||||
|
|
||||||
- [wot-design](https://github.com/jd-ftf/wot-design-mini) - Thanks to the wot-design team for their years of maintenance.
|
- [wot-design](https://github.com/jd-ftf/wot-design-mini) - Thanks to the wot-design team for their years of maintenance.
|
||||||
- [uni-helper](https://github.com/uni-helper) - Thanks to the uni-helper team for providing uni-app tool libraries.
|
- [uni-helper](https://github.com/uni-helper) - Thanks to the uni-helper team for providing uni-app tool libraries.
|
||||||
- [Donors](https://wot-design-uni.cn/reward/donor.html) - Thanks to all donors who help Wot UI grow better.
|
- [Donors](https://wot-ui.cn/reward/donor.html) - Thanks to all donors who help Wot UI grow better.
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: weisheng
|
* @Author: weisheng
|
||||||
* @Date: 2023-07-27 10:26:09
|
* @Date: 2023-07-27 10:26:09
|
||||||
* @LastEditTime: 2025-07-08 17:45:58
|
* @LastEditTime: 2025-09-23 10:35:39
|
||||||
* @LastEditors: weisheng
|
* @LastEditors: weisheng
|
||||||
* @Description:
|
* @Description:
|
||||||
* @FilePath: /wot-design-uni/docs/.vitepress/config.mts
|
* @FilePath: /wot-design-uni/docs/.vitepress/config.mts
|
||||||
@ -20,7 +20,7 @@ export default defineConfig({
|
|||||||
plugins: [
|
plugins: [
|
||||||
llmstxt({
|
llmstxt({
|
||||||
ignoreFiles: ['reward/*', 'index.md', 'README.md', 'en-US/*.md', 'en-US/**/*.md', 'ads/*', 'guide/cases.md', 'guide/changelog.md', 'guide/join-group.md', 'guide/typography.md'],
|
ignoreFiles: ['reward/*', 'index.md', 'README.md', 'en-US/*.md', 'en-US/**/*.md', 'ads/*', 'guide/cases.md', 'guide/changelog.md', 'guide/join-group.md', 'guide/typography.md'],
|
||||||
domain: 'https://wot-design-uni.cn',
|
domain: 'https://wot-ui.cn',
|
||||||
}),
|
}),
|
||||||
MarkdownTransform(),
|
MarkdownTransform(),
|
||||||
VersionBadgePlugin(),
|
VersionBadgePlugin(),
|
||||||
@ -112,7 +112,8 @@ export default defineConfig({
|
|||||||
socialLinks: [
|
socialLinks: [
|
||||||
{ icon: 'github', link: 'https://github.com/Moonofweisheng/wot-design-uni' },
|
{ icon: 'github', link: 'https://github.com/Moonofweisheng/wot-design-uni' },
|
||||||
{ icon: { svg: '<svg t="1692699544299" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4184" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#6D6D72" p-id="4185"></path></svg>' }, link: "https://gitee.com/wot-design-uni/wot-design-uni", ariaLabel: 'Gitee' },
|
{ icon: { svg: '<svg t="1692699544299" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4184" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#6D6D72" p-id="4185"></path></svg>' }, link: "https://gitee.com/wot-design-uni/wot-design-uni", ariaLabel: 'Gitee' },
|
||||||
{ icon: { svg: '<svg t="1694688365239" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4048" width="200" height="200"><path d="M980.79827 694.105946c-21.144216-122.796973-109.844757-203.250162-109.844757-203.250162 12.647784-111.477622-33.792-131.26573-33.792-131.26573C827.392 14.668108 530.985514 20.67373 524.730811 20.839784 518.476108 20.67373 222.01427 14.668108 212.300108 359.590054c0 0-46.467459 19.788108-33.819676 131.26573 0 0-88.700541 80.453189-109.817081 203.250162 0 0-11.291676 207.484541 101.403676 25.40627 0 0 25.350919 69.161514 71.790703 131.26573 0 0-83.082378 28.256865-75.997405 101.625081 0 0-2.87827 81.836973 177.401081 76.218811 0 0 126.699243-9.852541 164.753297-63.515676l16.605405 0 0.276757 0 16.633081 0c38.026378 53.635459 164.725622 63.515676 164.725622 63.515676 180.224 5.618162 177.401081-76.218811 177.401081-76.218811 7.029622-73.368216-75.997405-101.625081-75.997405-101.625081 46.439784-62.104216 71.790703-131.26573 71.790703-131.26573C992.034595 901.590486 980.79827 694.105946 980.79827 694.105946z" p-id="4049" fill="#6D6D72"></path></svg>' }, link: "/guide/join-group", ariaLabel: 'QQ' }
|
{ icon: { svg: '<svg t="1694688365239" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4048" width="200" height="200"><path d="M980.79827 694.105946c-21.144216-122.796973-109.844757-203.250162-109.844757-203.250162 12.647784-111.477622-33.792-131.26573-33.792-131.26573C827.392 14.668108 530.985514 20.67373 524.730811 20.839784 518.476108 20.67373 222.01427 14.668108 212.300108 359.590054c0 0-46.467459 19.788108-33.819676 131.26573 0 0-88.700541 80.453189-109.817081 203.250162 0 0-11.291676 207.484541 101.403676 25.40627 0 0 25.350919 69.161514 71.790703 131.26573 0 0-83.082378 28.256865-75.997405 101.625081 0 0-2.87827 81.836973 177.401081 76.218811 0 0 126.699243-9.852541 164.753297-63.515676l16.605405 0 0.276757 0 16.633081 0c38.026378 53.635459 164.725622 63.515676 164.725622 63.515676 180.224 5.618162 177.401081-76.218811 177.401081-76.218811 7.029622-73.368216-75.997405-101.625081-75.997405-101.625081 46.439784-62.104216 71.790703-131.26573 71.790703-131.26573C992.034595 901.590486 980.79827 694.105946 980.79827 694.105946z" p-id="4049" fill="#6D6D72"></path></svg>' }, link: "/guide/join-group", ariaLabel: 'QQ' },
|
||||||
|
{ icon: { svg: '<svg t="1758594913114" class="icon" viewBox="0 0 1316 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5329" width="200" height="200"><path d="M643.181714 247.698286l154.916572-123.172572L643.181714 0.256 643.072 0l-154.660571 124.269714 154.660571 123.245715 0.109714 0.182857z m0 388.461714h0.109715l399.579428-315.245714-108.361143-87.04-291.218285 229.888h-0.146286l-0.109714 0.146285L351.817143 234.093714l-108.251429 87.04 399.433143 315.136 0.146286-0.146285z m-0.146285 215.552l0.146285-0.146286 534.893715-422.034285 108.397714 87.04-243.309714 192L643.145143 1024 10.422857 525.056 0 516.754286l108.251429-86.893715L643.035429 851.748571z" fill="#1E80FF" p-id="5330"></path></svg>' }, link: 'https://juejin.cn/user/26044011388510/posts' },
|
||||||
],
|
],
|
||||||
search: {
|
search: {
|
||||||
provider: 'algolia',
|
provider: 'algolia',
|
||||||
|
|||||||
@ -5,6 +5,6 @@
|
|||||||
export const versionData = {
|
export const versionData = {
|
||||||
"/component/count-to": "1.3.8",
|
"/component/count-to": "1.3.8",
|
||||||
"/component/keyboard": "1.3.10",
|
"/component/keyboard": "1.3.10",
|
||||||
"/component/root-portal": "$LOWEST_VERSION$",
|
"/component/root-portal": "1.11.0",
|
||||||
"/component/signature": "1.6.0"
|
"/component/signature": "1.6.0"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -81,15 +81,24 @@ export default defineConfig({
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
{ text: '🥤Buy Me a Coffee', link: '/en-US/reward/reward', activeMatch: '/reward/' },
|
{ text: '🥤Buy Me a Coffee', link: '/en-US/reward/reward', activeMatch: '/reward/' },
|
||||||
{ text: 'Quick Start Project', link: 'https://github.com/Moonofweisheng/wot-demo' },
|
{ text: 'Blog', link: 'https://blog.wot-ui.cn/' },
|
||||||
{
|
{
|
||||||
text: 'Ecosystem',
|
text: 'Templates', items: [
|
||||||
items: [
|
{ text: 'Quick Start Template wot-starter', link: 'https://starter.wot-ui.cn/' },
|
||||||
|
{ text: 'vitesse-uni-app', link: 'https://vitesse-docs.netlify.app/' },
|
||||||
|
{ text: 'wot-starter-retail', link: 'https://github.com/wot-ui/wot-starter-retail' },
|
||||||
|
{ text: 'unibest', link: 'https://unibest.tech/' },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Resources', items: [
|
||||||
|
{ text: 'Quick Start Template', link: 'https://starter.wot-ui.cn/' },
|
||||||
|
{ text: 'VS Code IntelliSense Plugin', link: 'https://marketplace.visualstudio.com/items?itemName=wot-ui.wot-ui-intellisense' },
|
||||||
{ text: 'Vue3 uni-app Router', link: 'https://moonofweisheng.github.io/uni-mini-router/' },
|
{ text: 'Vue3 uni-app Router', link: 'https://moonofweisheng.github.io/uni-mini-router/' },
|
||||||
{ text: 'Mini Program CI Tool', link: 'https://github.com/Moonofweisheng/uni-mini-ci' },
|
{ text: 'Mini Program CI Tool', link: 'https://github.com/Moonofweisheng/uni-mini-ci' },
|
||||||
{ text: 'Uni Helper', link: 'https://uni-helper.js.org/' },
|
{ text: 'Uni Helper', link: 'https://uni-helper.js.org/' },
|
||||||
{ text: 'uni-ku', link: 'https://github.com/uni-ku' },
|
{ text: 'uni-ku', link: 'https://github.com/uni-ku' },
|
||||||
],
|
]
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
sidebar: {
|
sidebar: {
|
||||||
@ -139,6 +148,11 @@ export default defineConfig({
|
|||||||
{
|
{
|
||||||
text: 'Donor List',
|
text: 'Donor List',
|
||||||
link: '/en-US/reward/donor',
|
link: '/en-US/reward/donor',
|
||||||
|
},
|
||||||
|
// 赞助渠道
|
||||||
|
{
|
||||||
|
text: 'Sponsor',
|
||||||
|
link: '/reward/sponsor',
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
'/en-US/component/': [
|
'/en-US/component/': [
|
||||||
@ -227,6 +241,10 @@ export default defineConfig({
|
|||||||
{
|
{
|
||||||
link: '/en-US/component/index-bar',
|
link: '/en-US/component/index-bar',
|
||||||
text: 'IndexBar'
|
text: 'IndexBar'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: '/en-US/component/tour',
|
||||||
|
text: 'Tour'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
@ -85,15 +85,24 @@ export default defineConfig({
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
{ text: '🥤一杯咖啡', link: '/reward/reward', activeMatch: '/reward/' },
|
{ text: '🥤一杯咖啡', link: '/reward/reward', activeMatch: '/reward/' },
|
||||||
{ text: '快速上手项目', link: 'https://github.com/Moonofweisheng/wot-demo' },
|
{ text: '博客', link: 'https://blog.wot-ui.cn/' },
|
||||||
{
|
{
|
||||||
text: '周边生态',
|
text: '模板', items: [
|
||||||
items: [
|
{ text: '快速上手模板 wot-starter', link: 'https://starter.wot-ui.cn/' },
|
||||||
|
{ text: 'vitesse-uni-app', link: 'https://vitesse-docs.netlify.app/' },
|
||||||
|
{ text: 'wot-starter-retail', link: 'https://github.com/wot-ui/wot-starter-retail' },
|
||||||
|
{ text: 'unibest', link: 'https://unibest.tech/' },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '资源', items: [
|
||||||
|
{ text: '快速上手模板', link: 'https://starter.wot-ui.cn/' },
|
||||||
|
{ text: 'VS Code 代码提示插件', link: 'https://marketplace.visualstudio.com/items?itemName=wot-ui.wot-ui-intellisense' },
|
||||||
{ text: 'Vue3 uni-app路由库', link: 'https://moonofweisheng.github.io/uni-mini-router/' },
|
{ text: 'Vue3 uni-app路由库', link: 'https://moonofweisheng.github.io/uni-mini-router/' },
|
||||||
{ text: '多平台小程序CI工具', link: 'https://github.com/Moonofweisheng/uni-mini-ci' },
|
{ text: '多平台小程序CI工具', link: 'https://github.com/Moonofweisheng/uni-mini-ci' },
|
||||||
{ text: 'Uni Helper', link: 'https://uni-helper.js.org/' },
|
{ text: 'Uni Helper', link: 'https://uni-helper.js.org/' },
|
||||||
{ text: 'uni-ku', link: 'https://github.com/uni-ku' },
|
{ text: 'uni-ku', link: 'https://github.com/uni-ku' },
|
||||||
],
|
]
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
sidebar: {
|
sidebar: {
|
||||||
@ -147,7 +156,11 @@ export default defineConfig({
|
|||||||
{
|
{
|
||||||
text: '榜上有名',
|
text: '榜上有名',
|
||||||
link: '/reward/donor',
|
link: '/reward/donor',
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
text: '成为赞助者',
|
||||||
|
link: '/reward/sponsor',
|
||||||
|
},
|
||||||
],
|
],
|
||||||
'/component/': [
|
'/component/': [
|
||||||
{
|
{
|
||||||
@ -235,6 +248,9 @@ export default defineConfig({
|
|||||||
{
|
{
|
||||||
link: '/component/index-bar',
|
link: '/component/index-bar',
|
||||||
text: 'IndexBar 索引栏'
|
text: 'IndexBar 索引栏'
|
||||||
|
},{
|
||||||
|
link:'/component/tour',
|
||||||
|
text: 'Tour 漫游'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,22 +1,114 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: weisheng
|
||||||
|
* @Date: 2025-09-21 17:13:45
|
||||||
|
* @LastEditTime: 2025-09-21 22:57:29
|
||||||
|
* @LastEditors: weisheng
|
||||||
|
* @Description:
|
||||||
|
* @FilePath: /wot-design-uni/docs/.vitepress/theme/components/AsideSponsors.vue
|
||||||
|
* 记得注释
|
||||||
|
-->
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed } from 'vue'
|
import { computed } from 'vue'
|
||||||
import { VPDocAsideSponsors } from 'vitepress/theme'
|
import { useAdSponsor } from '../composables/adSponsor'
|
||||||
import { useSponsor } from '../composables/sponsor'
|
|
||||||
|
|
||||||
const { data } = useSponsor()
|
const { data } = useAdSponsor()
|
||||||
|
|
||||||
const sponsors = computed(() => {
|
// 分离超级赞助和金牌赞助
|
||||||
return (
|
const superSponsors = computed(() => {
|
||||||
data?.value.map((sponsor) => {
|
return data.value?.find(sponsor => sponsor.tier === 'Platinum')
|
||||||
return {
|
})
|
||||||
size: sponsor.size === 'big' ? 'mini' : 'xmini',
|
|
||||||
items: sponsor.items,
|
const goldSponsors = computed(() => {
|
||||||
}
|
return data.value?.find(sponsor => sponsor.tier === 'Gold')
|
||||||
}) ?? []
|
})
|
||||||
)
|
|
||||||
|
// 判断金牌赞助数量是否为奇数
|
||||||
|
const isGoldSponsorsOdd = computed(() => {
|
||||||
|
return (goldSponsors.value?.items?.length || 0) % 2 === 1
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<VPDocAsideSponsors v-if="data" :data="sponsors" />
|
<div class="VPDocAsideSponsors">
|
||||||
|
<a class="sponsors-aside-text" href="/reward/sponsor">赞助位</a>
|
||||||
|
<div class="VPSponsors vp-sponsor aside">
|
||||||
|
<!-- 超级赞助:一行一个 -->
|
||||||
|
<section class="vp-sponsor-section" v-if="superSponsors?.items.length">
|
||||||
|
<div class="VPSponsorsGrid vp-sponsor-grid mini" data-vp-grid="1">
|
||||||
|
<div class="vp-sponsor-grid-item" v-for="sponsor in superSponsors.items" :key="sponsor.name">
|
||||||
|
<a class="vp-sponsor-grid-link" :href="sponsor.url" target="_blank" rel="sponsored noopener">
|
||||||
|
<article class="vp-sponsor-grid-box">
|
||||||
|
<h4 class="visually-hidden">{{ sponsor.url }}</h4>
|
||||||
|
<img v-if="sponsor.img" class="vp-sponsor-grid-image" :src="sponsor.img" :alt="sponsor.name">
|
||||||
|
<span v-else class="vp-sponsor-grid-text">{{ sponsor.name }}</span>
|
||||||
|
</article>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 金牌赞助:一行两个 -->
|
||||||
|
<section class="vp-sponsor-section" v-if="goldSponsors?.items.length">
|
||||||
|
<div class="VPSponsorsGrid vp-sponsor-grid xmini" data-vp-grid="2">
|
||||||
|
<div class="vp-sponsor-grid-item" v-for="sponsor in goldSponsors.items" :key="sponsor.name">
|
||||||
|
<a class="vp-sponsor-grid-link" :href="sponsor.url" target="_blank" rel="sponsored noopener">
|
||||||
|
<article class="vp-sponsor-grid-box">
|
||||||
|
<h4 class="visually-hidden">{{ sponsor.name }}</h4>
|
||||||
|
<img v-if="sponsor.img" class="vp-sponsor-grid-image" :src="sponsor.img" :alt="sponsor.name">
|
||||||
|
<span v-else class="vp-sponsor-grid-text">{{ sponsor.name }}</span>
|
||||||
|
</article>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<!-- 当金牌赞助为奇数时,默认赞助位填补到金牌赞助位置 -->
|
||||||
|
<div class="vp-sponsor-grid-item" v-if="isGoldSponsorsOdd">
|
||||||
|
<a class="vp-sponsor-grid-link" href="/reward/sponsor" rel="sponsored noopener">
|
||||||
|
<article class="vp-sponsor-grid-box">
|
||||||
|
<span class="vp-sponsor-grid-text">成为赞助商</span>
|
||||||
|
</article>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 当金牌赞助为偶数或没有金牌赞助时,默认赞助位占据一整行 -->
|
||||||
|
<section class="vp-sponsor-section" v-if="!isGoldSponsorsOdd || !goldSponsors?.items.length">
|
||||||
|
<div class="VPSponsorsGrid vp-sponsor-grid xmini" data-vp-grid="1">
|
||||||
|
<div class="vp-sponsor-grid-item">
|
||||||
|
<a class="vp-sponsor-grid-link" href="/reward/sponsor" rel="sponsored noopener">
|
||||||
|
<article class="vp-sponsor-grid-box">
|
||||||
|
<span class="vp-sponsor-grid-text">成为赞助商</span>
|
||||||
|
</article>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.vp-sponsor-grid-text {
|
||||||
|
color: var(--vp-c-text-2);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .vp-sponsor-grid-text {
|
||||||
|
color: var(--vp-c-gray-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-sponsor-grid-image {
|
||||||
|
max-width: 120px;
|
||||||
|
max-height: 72px !important;
|
||||||
|
filter: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.sponsors-aside-text {
|
||||||
|
color: var(--vp-c-text-3);
|
||||||
|
display: block;
|
||||||
|
margin: 2em 0 1em;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 11px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.4px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
385
docs/.vitepress/theme/components/Banner.vue
Normal file
385
docs/.vitepress/theme/components/Banner.vue
Normal file
@ -0,0 +1,385 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, watch, computed, onMounted } from 'vue'
|
||||||
|
import { useBanner } from '../composables/banner'
|
||||||
|
|
||||||
|
const open = ref(false) // 默认不显示,避免闪烁
|
||||||
|
const BANNER_STORAGE_KEY = 'wot-banner-dismissed-time'
|
||||||
|
const TWENTY_FOUR_HOURS = 24 * 60 * 60 * 1000 // 24小时的毫秒数
|
||||||
|
|
||||||
|
// 使用 banner composable 获取远程数据
|
||||||
|
const { data: bannerData } = useBanner()
|
||||||
|
|
||||||
|
// 计算当前要显示的 banner 信息(取第一个)
|
||||||
|
const currentBanner = computed(() => {
|
||||||
|
return bannerData.value && bannerData.value.length > 0 ? bannerData.value[0] : null
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 检查是否应该显示横幅
|
||||||
|
*/
|
||||||
|
function checkShouldShowBanner() {
|
||||||
|
if (typeof window === 'undefined') return true
|
||||||
|
|
||||||
|
const dismissedTime = localStorage.getItem(BANNER_STORAGE_KEY)
|
||||||
|
if (!dismissedTime) {
|
||||||
|
// 首次访问,添加 banner-show class 以显示横幅
|
||||||
|
document.documentElement.classList.add('banner-show')
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
const dismissedTimestamp = parseInt(dismissedTime, 10)
|
||||||
|
const currentTime = Date.now()
|
||||||
|
|
||||||
|
// 如果超过24小时,清除记录并显示横幅
|
||||||
|
if (currentTime - dismissedTimestamp > TWENTY_FOUR_HOURS) {
|
||||||
|
localStorage.removeItem(BANNER_STORAGE_KEY)
|
||||||
|
document.documentElement.classList.add('banner-show')
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 未超过24小时,确保不显示横幅
|
||||||
|
document.documentElement.classList.remove('banner-show')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
function dismiss() {
|
||||||
|
open.value = false
|
||||||
|
document.documentElement.classList.remove('banner-show')
|
||||||
|
|
||||||
|
// 存储当前时间戳到 localStorage
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
localStorage.setItem(BANNER_STORAGE_KEY, Date.now().toString())
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听 banner 数据变化,只有当有数据时才进行展示逻辑校验
|
||||||
|
watch(currentBanner, (newBanner) => {
|
||||||
|
if (newBanner) {
|
||||||
|
// 有 banner 数据时,检查是否应该显示
|
||||||
|
const shouldShow = checkShouldShowBanner()
|
||||||
|
open.value = shouldShow
|
||||||
|
} else {
|
||||||
|
// 没有 banner 数据时,不显示横幅
|
||||||
|
open.value = false
|
||||||
|
}
|
||||||
|
}, { immediate: true })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="banner" v-if="open && currentBanner">
|
||||||
|
|
||||||
|
<div class="vt-banner-text">
|
||||||
|
<p class="vt-banner-title">{{ currentBanner.title }}</p>
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
class="vt-primary-action"
|
||||||
|
:href="currentBanner.link"
|
||||||
|
>
|
||||||
|
{{ currentBanner.action }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<button aria-label="close" @click="dismiss">
|
||||||
|
<svg
|
||||||
|
class="close"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
aria-hidden="true"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M18.9,10.9h-6v-6c0-0.6-0.4-1-1-1s-1,0.4-1,1v6h-6c-0.6,0-1,0.4-1,1s0.4,1,1,1h6v6c0,0.6,0.4,1,1,1s1-0.4,1-1v-6h6c0.6,0,1-0.4,1-1S19.5,10.9,18.9,10.9z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="glow glow--purple"></div>
|
||||||
|
<div class="glow glow--blue"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
html.banner-show {
|
||||||
|
--vp-layout-top-height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端优化高度 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
html.banner-show {
|
||||||
|
--vp-layout-top-height: 56px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
html.banner-show {
|
||||||
|
--vp-layout-top-height: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.banner {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 100;
|
||||||
|
box-sizing: border-box;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: var(--vp-layout-top-height, 64px);
|
||||||
|
padding: 0 48px 0 12px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: white;
|
||||||
|
background: #131A24;
|
||||||
|
display: none;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.banner-show .banner {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glow.glow--purple {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -15%;
|
||||||
|
left: -75%;
|
||||||
|
width: 80%;
|
||||||
|
aspect-ratio: 1.5;
|
||||||
|
pointer-events: none;
|
||||||
|
border-radius: 100%;
|
||||||
|
background: linear-gradient(270deg, #7a23a1, #715ebde6 60% 80%, #bd34fe00);
|
||||||
|
filter: blur(15vw);
|
||||||
|
transform: none;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glow.glow--blue {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -15%;
|
||||||
|
right: -40%;
|
||||||
|
width: 80%;
|
||||||
|
aspect-ratio: 1.5;
|
||||||
|
pointer-events: none;
|
||||||
|
border-radius: 100%;
|
||||||
|
background: linear-gradient(180deg, #61d9ff, #0000);
|
||||||
|
filter: blur(15vw);
|
||||||
|
transform: none;
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
position: absolute;
|
||||||
|
right: 8px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
padding: 4px;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:active {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
fill: #fff;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover .close {
|
||||||
|
transform: rotate(45deg) scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vt-banner-text {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.4;
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vt-banner-title {
|
||||||
|
display: inline-block;
|
||||||
|
background: linear-gradient(90deg, #bd34fe 0%, #41d1ff 100%);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
color: transparent;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.4;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vt-primary-action {
|
||||||
|
display: inline-block;
|
||||||
|
background:
|
||||||
|
radial-gradient(140.35% 140.35% at 175% 94.74%, #2bfdd2, #bd34fe00),
|
||||||
|
radial-gradient(89.94% 89.94% at 18.42% 15.79%, #4d80f0, #41d1ff00);
|
||||||
|
color: #fff;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vt-primary-action:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(77, 128, 240, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vt-primary-action:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 桌面端优化 */
|
||||||
|
@media (min-width: 769px) {
|
||||||
|
.banner {
|
||||||
|
padding: 0 60px 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glow.glow--blue {
|
||||||
|
top: -15%;
|
||||||
|
right: -40%;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glow.glow--purple {
|
||||||
|
bottom: -15%;
|
||||||
|
left: -40%;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vt-banner-text {
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 平板端优化 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.banner {
|
||||||
|
padding: 0 40px 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
right: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vt-banner-text {
|
||||||
|
font-size: 16px;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vt-banner-title {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vt-primary-action {
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 手机端优化 */
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.banner {
|
||||||
|
padding: 0 36px 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vt-banner-text {
|
||||||
|
font-size: 14px;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vt-banner-title {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vt-primary-action {
|
||||||
|
font-size: 13px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 小屏手机优化 */
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.banner {
|
||||||
|
padding: 0 32px 0 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
right: 4px;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vt-banner-text {
|
||||||
|
font-size: 12px;
|
||||||
|
gap: 4px;
|
||||||
|
flex-direction: column;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vt-banner-title {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vt-primary-action {
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 3px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 超小屏优化 */
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
.banner {
|
||||||
|
padding: 0 28px 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vt-banner-text {
|
||||||
|
font-size: 11px;
|
||||||
|
gap: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vt-banner-title {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vt-primary-action {
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 2px 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: weisheng
|
* @Author: weisheng
|
||||||
* @Date: 2024-01-07 00:46:50
|
* @Date: 2025-05-08 22:54:27
|
||||||
* @LastEditTime: 2024-12-07 14:23:56
|
* @LastEditTime: 2025-08-28 13:04:43
|
||||||
* @LastEditors: weisheng
|
* @LastEditors: weisheng
|
||||||
* @Description:
|
* @Description:
|
||||||
* @FilePath: /wot-design-uni/docs/.vitepress/theme/components/CustomFooter.vue
|
* @FilePath: /wot-design-uni/docs/.vitepress/theme/components/CustomFooter.vue
|
||||||
@ -16,17 +16,27 @@ const { theme }:any = useData()
|
|||||||
const { hasSidebar } = useSidebar()
|
const { hasSidebar } = useSidebar()
|
||||||
|
|
||||||
const isNetlify = ref<boolean>(false)
|
const isNetlify = ref<boolean>(false)
|
||||||
|
const isWotUiDomain = ref<boolean>(false)
|
||||||
|
|
||||||
const copyright = computed(()=>{
|
const copyright = computed(()=>{
|
||||||
if (isNetlify.value) {
|
let copyrightText = theme.value.footer.copyright
|
||||||
return `${theme.value.footer.copyright} | <a style="text-decoration: none;" href="https://www.netlify.com">This site is powered by Netlify</a>`
|
|
||||||
}else{
|
if (isWotUiDomain.value) {
|
||||||
return theme.value.footer.copyright
|
copyrightText += ' | <a href="https://beian.miit.gov.cn/" target="_blank" style="text-decoration: none;">沪ICP备2024070925号-4</a>'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (isNetlify.value) {
|
||||||
|
copyrightText += ' | <a style="text-decoration: none;" href="https://www.netlify.com">This site is powered by Netlify</a>'
|
||||||
|
}
|
||||||
|
|
||||||
|
return copyrightText
|
||||||
})
|
})
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
isNetlify.value = typeof window !== 'undefined' ? window.location.href.includes('netlify') : false
|
if (typeof window !== 'undefined') {
|
||||||
|
isNetlify.value = window.location.href.includes('netlify')
|
||||||
|
isWotUiDomain.value = window.location.hostname.includes('wot-ui.cn')
|
||||||
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -44,8 +54,10 @@ onMounted(() => {
|
|||||||
position: relative;
|
position: relative;
|
||||||
z-index: var(--vp-z-index-footer);
|
z-index: var(--vp-z-index-footer);
|
||||||
border-top: 1px solid var(--vp-c-gutter);
|
border-top: 1px solid var(--vp-c-gutter);
|
||||||
padding: 32px 24px;
|
padding: 40px 24px 32px;
|
||||||
background-color: var(--vp-c-bg);
|
background: linear-gradient(135deg, var(--vp-c-bg) 0%, var(--vp-c-bg-soft) 100%);
|
||||||
|
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
|
||||||
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.VPFooter.has-sidebar {
|
.VPFooter.has-sidebar {
|
||||||
@ -53,18 +65,40 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.VPFooter :deep(a) {
|
.VPFooter :deep(a) {
|
||||||
text-decoration-line: underline;
|
color: var(--vp-c-brand-1);
|
||||||
text-underline-offset: 2px;
|
text-decoration: none;
|
||||||
transition: color 0.25s;
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.VPFooter :deep(a:hover) {
|
.VPFooter :deep(a:hover) {
|
||||||
color: var(--vp-c-text-1);
|
color: var(--vp-c-brand-2);
|
||||||
|
background-color: var(--vp-c-brand-soft);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.VPFooter :deep(a:active) {
|
||||||
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.VPFooter {
|
.VPFooter {
|
||||||
padding: 32px;
|
padding: 48px 32px 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.VPFooter {
|
||||||
|
padding: 32px 20px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message,
|
||||||
|
.copyright {
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -74,11 +108,25 @@ onMounted(() => {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message,
|
.message {
|
||||||
|
line-height: 28px;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--vp-c-text-1);
|
||||||
|
margin-bottom: 16px;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
.copyright {
|
.copyright {
|
||||||
line-height: 24px;
|
line-height: 26px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 400;
|
||||||
color: var(--vp-c-text-2);
|
color: var(--vp-c-text-2);
|
||||||
|
opacity: 0.8;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright:hover {
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -16,7 +16,7 @@ const grid = computed(() => {
|
|||||||
if (!length) {
|
if (!length) {
|
||||||
return
|
return
|
||||||
} else {
|
} else {
|
||||||
return 'grid-3'
|
return 'grid-4'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
@ -105,12 +105,12 @@ const grid = computed(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.item.grid-2,
|
.item.grid-2 {
|
||||||
.item.grid-4 {
|
|
||||||
width: calc(100% / 2);
|
width: calc(100% / 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.item.grid-3,
|
.item.grid-3,
|
||||||
|
.item.grid-4,
|
||||||
.item.grid-6 {
|
.item.grid-6 {
|
||||||
width: calc(100% / 3);
|
width: calc(100% / 3);
|
||||||
}
|
}
|
||||||
|
|||||||
116
docs/.vitepress/theme/components/SpecialSponsor.vue
Normal file
116
docs/.vitepress/theme/components/SpecialSponsor.vue
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import { useAdSponsor } from '../composables/adSponsor'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
withDefaults(defineProps<Props>(), {
|
||||||
|
title: '铂金赞助商',
|
||||||
|
})
|
||||||
|
|
||||||
|
const { data } = useAdSponsor()
|
||||||
|
|
||||||
|
// 获取第一个铂金赞助商
|
||||||
|
const platinumSponsor = computed(() => {
|
||||||
|
const platinum = data.value?.find(sponsor => sponsor.tier === 'Platinum')
|
||||||
|
return platinum?.items?.[0] || null
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<section v-if="platinumSponsor" class="special-sponsor">
|
||||||
|
<h3>{{ title }}</h3>
|
||||||
|
<div class="special-sponsor-container">
|
||||||
|
<a class="logo" :href="platinumSponsor.url" target="_blank" rel="sponsored noopener">
|
||||||
|
<picture >
|
||||||
|
<img :src="platinumSponsor.img" :alt="platinumSponsor.name" style="height: 72px;" />
|
||||||
|
</picture>
|
||||||
|
|
||||||
|
</a>
|
||||||
|
<span>{{ platinumSponsor.name }}</span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.special-sponsor {
|
||||||
|
border-top: 1px solid var(--vp-c-gray-soft);
|
||||||
|
border-bottom: 1px solid var(--vp-c-gray-soft);
|
||||||
|
padding: 12px 24px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.special-sponsor h3 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.special-sponsor-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.special-sponsor .logo {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.special-sponsor span {
|
||||||
|
color: var(--vp-c-text-2);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 13px;
|
||||||
|
vertical-align: middle;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.special-sponsor a {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.special-sponsor-empty {
|
||||||
|
border-top: 1px solid var(--vp-c-gray-soft);
|
||||||
|
border-bottom: 1px solid var(--vp-c-gray-soft);
|
||||||
|
padding: 12px 24px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.special-sponsor-empty span:first-child {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.special-sponsor-empty img {
|
||||||
|
height: 42px;
|
||||||
|
margin: -6px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .special-sponsor-empty img {
|
||||||
|
filter: grayscale(1) invert(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.special-sponsor-empty {
|
||||||
|
flex-direction: column;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.special-sponsor-empty img {
|
||||||
|
height: 36px;
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
.special-sponsor-empty span {
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -195,7 +195,7 @@ const expanded = ref(true)
|
|||||||
.content {
|
.content {
|
||||||
order: 1;
|
order: 1;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
min-width: 640px;
|
min-width: 600px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- 主容器:根据展开状态和过渡状态添加对应类名 -->
|
<!-- 大屏幕:原有的固定容器 -->
|
||||||
<div v-if="href" class="demo-model" :class="{
|
<div v-if="href && !isSmallScreen" class="demo-model" :class="{
|
||||||
'collapsed': !expanded,
|
'collapsed': !expanded,
|
||||||
'transition-end': transitionEnd
|
'transition-end': transitionEnd
|
||||||
}" @transitionend="onTransitionEnd">
|
}" @transitionend="onTransitionEnd">
|
||||||
@ -18,12 +18,42 @@
|
|||||||
<iframe v-if="expanded&&transitionEnd" ref="iframe" id="demo" class="iframe" scrolling="auto" frameborder="0" :src="href" />
|
<iframe v-if="expanded&&transitionEnd" ref="iframe" id="demo" class="iframe" scrolling="auto" frameborder="0" :src="href" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 小屏幕:触发按钮 -->
|
||||||
|
<div v-if="href && isSmallScreen && !isTinyScreen" class="demo-trigger" @click="openDrawer">
|
||||||
|
<el-icon class="trigger-icon">
|
||||||
|
<component :is="Expand" />
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 小屏幕:Drawer抽屉 -->
|
||||||
|
<view v-if="isSmallScreen && !isTinyScreen" class="drawer-container">
|
||||||
|
<el-drawer
|
||||||
|
|
||||||
|
v-model="drawerVisible"
|
||||||
|
direction="rtl"
|
||||||
|
size="380px"
|
||||||
|
:modal="false"
|
||||||
|
:lock-scroll="false"
|
||||||
|
:before-close="closeDrawer"
|
||||||
|
>
|
||||||
|
<div class="demo-header">
|
||||||
|
<ExternalLink :href="href" class="demo-link">
|
||||||
|
</ExternalLink>
|
||||||
|
<QrCode class="demo-qrcode" :src="qrcode" v-if="qrcode"></QrCode>
|
||||||
|
</div>
|
||||||
|
<div class="drawer-content">
|
||||||
|
<iframe v-if="drawerVisible" ref="drawerIframe" class="drawer-iframe" scrolling="auto" frameborder="0" :src="href" />
|
||||||
|
</div>
|
||||||
|
</el-drawer>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Expand, Fold } from '@element-plus/icons-vue'
|
import { Expand, Fold } from '@element-plus/icons-vue'
|
||||||
|
import { ElDrawer, ElIcon } from 'element-plus'
|
||||||
import { useRoute, useData } from 'vitepress'
|
import { useRoute, useData } from 'vitepress'
|
||||||
import { computed, onMounted, ref, watch } from 'vue'
|
import { computed, onMounted, ref, watch, onUnmounted } from 'vue'
|
||||||
import QrCode from './QrCode.vue'
|
import QrCode from './QrCode.vue'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@ -38,7 +68,11 @@ const props = withDefaults(defineProps<Props>(), {
|
|||||||
// 状态管理
|
// 状态管理
|
||||||
const baseUrl = ref('')
|
const baseUrl = ref('')
|
||||||
const iframe = ref<HTMLIFrameElement | null>(null)
|
const iframe = ref<HTMLIFrameElement | null>(null)
|
||||||
|
const drawerIframe = ref<HTMLIFrameElement | null>(null)
|
||||||
const transitionEnd = ref(true)
|
const transitionEnd = ref(true)
|
||||||
|
const drawerVisible = ref(false)
|
||||||
|
const isSmallScreen = ref(false)
|
||||||
|
const isTinyScreen = ref(false)
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
'update:expanded': [boolean] // 更新展开状态
|
'update:expanded': [boolean] // 更新展开状态
|
||||||
@ -64,6 +98,19 @@ const qrcode = computed(() => {
|
|||||||
return `/wxqrcode/${paths[paths.length - 1]}.png`
|
return `/wxqrcode/${paths[paths.length - 1]}.png`
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 获取页面标题
|
||||||
|
const pageTitle = computed(() => {
|
||||||
|
const path = route.path
|
||||||
|
const paths = path ? path.split('.')[0].split('/') : []
|
||||||
|
if (!paths.length) return '预览Demo'
|
||||||
|
|
||||||
|
// 将kebab-case转换为更友好的标题格式
|
||||||
|
const pageName = paths[paths.length - 1]
|
||||||
|
return pageName.split('-').map(word =>
|
||||||
|
word.charAt(0).toUpperCase() + word.slice(1)
|
||||||
|
).join(' ')
|
||||||
|
})
|
||||||
|
|
||||||
// 工具函数:转换 kebab-case 为 camelCase
|
// 工具函数:转换 kebab-case 为 camelCase
|
||||||
function kebabToCamel(input: string): string {
|
function kebabToCamel(input: string): string {
|
||||||
return input.replace(/-([a-z])/g, (match, group) => group.toUpperCase())
|
return input.replace(/-([a-z])/g, (match, group) => group.toUpperCase())
|
||||||
@ -87,6 +134,26 @@ function toggleExpand() {
|
|||||||
transitionEnd.value = false
|
transitionEnd.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 小屏幕抽屉控制
|
||||||
|
function openDrawer() {
|
||||||
|
drawerVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeDrawer() {
|
||||||
|
drawerVisible.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查屏幕尺寸
|
||||||
|
function checkScreenSize() {
|
||||||
|
isSmallScreen.value = window.innerWidth <= 1439
|
||||||
|
isTinyScreen.value = window.innerWidth < 1280
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听窗口大小变化
|
||||||
|
function handleResize() {
|
||||||
|
checkScreenSize()
|
||||||
|
}
|
||||||
|
|
||||||
// 过渡结束处理
|
// 过渡结束处理
|
||||||
function onTransitionEnd() {
|
function onTransitionEnd() {
|
||||||
transitionEnd.value = true
|
transitionEnd.value = true
|
||||||
@ -95,15 +162,19 @@ function onTransitionEnd() {
|
|||||||
|
|
||||||
// iframe 消息通信
|
// iframe 消息通信
|
||||||
function sendMessage() {
|
function sendMessage() {
|
||||||
if (iframe.value?.contentWindow) {
|
const targetIframe = isSmallScreen.value ? drawerIframe.value : iframe.value
|
||||||
iframe.value.contentWindow.postMessage(vitepressData.isDark.value, href.value)
|
if (targetIframe?.contentWindow) {
|
||||||
|
const targetOrigin = new URL(href.value, location.origin).origin
|
||||||
|
targetIframe.contentWindow.postMessage(vitepressData.isDark.value, targetOrigin)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 发送语言信息给iframe
|
// 发送语言信息给iframe
|
||||||
function sendLanguageMessage() {
|
function sendLanguageMessage() {
|
||||||
if (iframe.value?.contentWindow) {
|
const targetIframe = isSmallScreen.value ? drawerIframe.value : iframe.value
|
||||||
iframe.value.contentWindow.postMessage(vitepressData.lang.value, href.value)
|
if (targetIframe?.contentWindow) {
|
||||||
|
const targetOrigin = new URL(href.value, location.origin).origin
|
||||||
|
targetIframe.contentWindow.postMessage(vitepressData.lang.value, targetOrigin)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -112,6 +183,10 @@ onMounted(() => {
|
|||||||
? `${location.origin}/demo/?timestamp=${new Date().getTime()}#/`
|
? `${location.origin}/demo/?timestamp=${new Date().getTime()}#/`
|
||||||
: 'http://localhost:5173/demo/#/'
|
: 'http://localhost:5173/demo/#/'
|
||||||
|
|
||||||
|
// 初始化屏幕尺寸检查
|
||||||
|
checkScreenSize()
|
||||||
|
window.addEventListener('resize', handleResize)
|
||||||
|
|
||||||
// 监听 iframe 加载完成事件
|
// 监听 iframe 加载完成事件
|
||||||
iframe.value?.addEventListener('load', () => {
|
iframe.value?.addEventListener('load', () => {
|
||||||
sendMessage()
|
sendMessage()
|
||||||
@ -119,6 +194,20 @@ onMounted(() => {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener('resize', handleResize)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 监听抽屉iframe加载完成
|
||||||
|
watch(drawerIframe, (newVal) => {
|
||||||
|
if (newVal) {
|
||||||
|
newVal.addEventListener('load', () => {
|
||||||
|
sendMessage()
|
||||||
|
sendLanguageMessage()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => vitepressData.isDark.value,
|
() => vitepressData.isDark.value,
|
||||||
sendMessage
|
sendMessage
|
||||||
@ -141,7 +230,7 @@ watch(
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
right: 32px;
|
right: 32px;
|
||||||
top: calc(var(--vp-nav-height) + 32px);
|
top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px);
|
||||||
width: 330px;
|
width: 330px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
background: var(--vp-c-bg-alt);
|
background: var(--vp-c-bg-alt);
|
||||||
@ -242,23 +331,11 @@ watch(
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 1280px) {
|
|
||||||
.demo-model {
|
|
||||||
width: 310px;
|
|
||||||
height: calc(310px * 143.6 / 70.9 + 56px);
|
|
||||||
right: 48px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collapsed {
|
|
||||||
height: 48px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 1440px) {
|
@media screen and (min-width: 1440px) {
|
||||||
.demo-model {
|
.demo-model {
|
||||||
width: 360px;
|
width: 280px;
|
||||||
height: calc(360px * 143.6 / 70.9 + 56px);
|
height: calc(320px * 143.6 / 70.9);
|
||||||
right: 64px;
|
right: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapsed {
|
.collapsed {
|
||||||
@ -266,8 +343,114 @@ watch(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1279px) {
|
@media screen and (min-width: 1600px) {
|
||||||
.demo-model {
|
.demo-model {
|
||||||
|
width: 340px;
|
||||||
|
height: calc(340px * 143.6 / 70.9);
|
||||||
|
right: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsed {
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 小屏幕触发按钮样式 */
|
||||||
|
.demo-trigger {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 10;
|
||||||
|
right: 16px;
|
||||||
|
top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px);
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
background: var(--vp-c-bg-alt);
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: var(--vp-shadow-4);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-trigger:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.trigger-icon {
|
||||||
|
font-size: 24px;
|
||||||
|
color: var(--vp-c-text-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 抽屉内容样式 */
|
||||||
|
.drawer-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 16px 0;
|
||||||
|
border-bottom: 1px solid var(--vp-c-divider);
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--vp-c-text-1);
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-actions .demo-link {
|
||||||
|
font-size: 20px !important;
|
||||||
|
color: var(--vp-c-text-2);
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-actions .demo-link:hover {
|
||||||
|
color: var(--vp-c-brand-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-actions .demo-qrcode {
|
||||||
|
font-size: 20px !important;
|
||||||
|
color: var(--vp-c-text-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 340px;
|
||||||
|
height: calc(340px * 143.6 / 70.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-iframe {
|
||||||
|
width: 340px;
|
||||||
|
height: calc(340px * 143.6 / 70.9);
|
||||||
|
border: none;
|
||||||
|
border-radius: 20px;
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||||
|
background: var(--vp-c-bg);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-container {
|
||||||
|
--el-drawer-bg-color: var(--vp-c-bg);
|
||||||
|
:deep() {
|
||||||
|
.el-drawer {
|
||||||
|
background-color: var(--vp-c-bg) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.demo-trigger {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
63
docs/.vitepress/theme/components/WwAds.vue
Normal file
63
docs/.vitepress/theme/components/WwAds.vue
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, ref } from 'vue'
|
||||||
|
import AsideSponsors from './AsideSponsors.vue'
|
||||||
|
|
||||||
|
|
||||||
|
const showTemp = ref(false)
|
||||||
|
|
||||||
|
// function called if wwads is blocked
|
||||||
|
function ABDetected() {
|
||||||
|
const wwadsElement = document.getElementsByClassName("aside-temp")[0]
|
||||||
|
if (wwadsElement) {
|
||||||
|
wwadsElement.insertAdjacentHTML("beforeend", "<style>.wwads-horizontal,.wwads-vertical{background-color:#f4f8fa;padding:5px;min-height:120px;margin-top:20px;box-sizing:border-box;border-radius:3px;font-family:sans-serif;display:flex;min-width:150px;position:relative;overflow:hidden;}.wwads-horizontal{flex-wrap:wrap;justify-content:center}.wwads-vertical{flex-direction:column;align-items:center;padding-bottom:32px}.wwads-horizontal a,.wwads-vertical a{text-decoration:none}.wwads-horizontal .wwads-img,.wwads-vertical .wwads-img{margin:5px}.wwads-horizontal .wwads-content,.wwads-vertical .wwads-content{margin:5px}.wwads-horizontal .wwads-content{flex:130px}.wwads-vertical .wwads-content{margin-top:10px}.wwads-horizontal .wwads-text,.wwads-content .wwads-text{font-size:14px;line-height:1.4;color:#0e1011;-webkit-font-smoothing:antialiased}.wwads-horizontal .wwads-poweredby,.wwads-vertical .wwads-poweredby{display:block;font-size:11px;color:#a6b7bf;margin-top:1em}.wwads-vertical .wwads-poweredby{position:absolute;left:10px;bottom:10px}.wwads-horizontal .wwads-poweredby span,.wwads-vertical .wwads-poweredby span{transition:all 0.2s ease-in-out;margin-left:-1em}.wwads-horizontal .wwads-poweredby span:first-child,.wwads-vertical .wwads-poweredby span:first-child{opacity:0}.wwads-horizontal:hover .wwads-poweredby span,.wwads-vertical:hover .wwads-poweredby span{opacity:1;margin-left:0}.wwads-horizontal .wwads-hide,.wwads-vertical .wwads-hide{position:absolute;right:-23px;bottom:-23px;width:46px;height:46px;border-radius:23px;transition:all 0.3s ease-in-out;cursor:pointer;}.wwads-horizontal .wwads-hide:hover,.wwads-vertical .wwads-hide:hover{background:rgb(0 0 0 /0.05)}.wwads-horizontal .wwads-hide svg,.wwads-vertical .wwads-hide svg{position:absolute;left:10px;top:10px;fill:#a6b7bf}.wwads-horizontal .wwads-hide:hover svg,.wwads-vertical .wwads-hide:hover svg{fill:#3E4546}</style><a href='https://wwads.cn/page/whitelist-wwads' class='wwads-img' target='_blank' rel='nofollow'><img src='https://creatives-1301677708.file.myqcloud.com/images/placeholder/wwads-friendly-ads.png' width='130'></a><div class='wwads-content'><a href='https://wwads.cn/page/whitelist-wwads' class='wwads-text' target='_blank' rel='nofollow'>为了本站的长期运营,请将我们的网站加入广告拦截器的白名单,感谢您的支持!</a><a href='https://wwads.cn/page/end-user-privacy' class='wwads-poweredby' title='万维广告 ~ 让广告更优雅,且有用' target='_blank'><span>万维</span><span>广告</span></a></div><a class='wwads-hide' onclick='parentNode.remove()' title='隐藏广告'><svg xmlns='http://www.w3.org/2000/svg' width='6' height='7'><path d='M.879.672L3 2.793 5.121.672a.5.5 0 11.707.707L3.708 3.5l2.12 2.121a.5.5 0 11-.707.707l-2.12-2.12-2.122 2.12a.5.5 0 11-.707-.707l2.121-2.12L.172 1.378A.5.5 0 01.879.672z'></path></svg></a>")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// check document ready
|
||||||
|
function docReady(callback: () => void) {
|
||||||
|
if (document.readyState === "complete" || document.readyState === "interactive") {
|
||||||
|
setTimeout(callback, 1)
|
||||||
|
} else {
|
||||||
|
document.addEventListener("DOMContentLoaded", callback)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
const s = document.createElement('script')
|
||||||
|
s.type = 'text/javascript'
|
||||||
|
s.src = `https://cdn.wwads.cn/js/makemoney.js`
|
||||||
|
document.querySelector('.wwads-container')!.appendChild(s)
|
||||||
|
|
||||||
|
// check if wwads' fire function was blocked after document is ready with 3s timeout (waiting the ad loading)
|
||||||
|
docReady(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
if ((window as any)._AdBlockInit === undefined) {
|
||||||
|
showTemp.value = true
|
||||||
|
ABDetected()
|
||||||
|
}
|
||||||
|
}, 3000)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<AsideSponsors></AsideSponsors>
|
||||||
|
<div class="wwads-container" v-if="!showTemp">
|
||||||
|
<div class="wwads-cn wwads-vertical" data-id="372"></div>
|
||||||
|
</div>
|
||||||
|
<div class="aside-temp wwads-vertical" v-if="showTemp"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.wwads-container, .aside-temp {
|
||||||
|
padding: 1px 15px 10px;
|
||||||
|
margin-top: 20px;
|
||||||
|
background-color: var(--vt-c-bg-soft);
|
||||||
|
}
|
||||||
|
.wwads-vertical {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
.wwads-text {
|
||||||
|
color: var(--vt-c-text-2) !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
62
docs/.vitepress/theme/composables/adSponsor.ts
Normal file
62
docs/.vitepress/theme/composables/adSponsor.ts
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
/*
|
||||||
|
* @Author: weisheng
|
||||||
|
* @Date: 2025-09-21 19:12:03
|
||||||
|
* @LastEditTime: 2025-09-21 19:52:54
|
||||||
|
* @LastEditors: weisheng
|
||||||
|
* @Description:
|
||||||
|
* @FilePath: /wot-design-uni/docs/.vitepress/theme/composables/adSponsor.ts
|
||||||
|
* 记得注释
|
||||||
|
*/
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
export type GridSize = 'xmini' | 'mini' | 'small' | 'medium' | 'big'
|
||||||
|
|
||||||
|
export interface Sponsor {
|
||||||
|
name: string
|
||||||
|
img: string
|
||||||
|
url: string
|
||||||
|
}
|
||||||
|
export interface Sponsors {
|
||||||
|
tier?: string
|
||||||
|
size?: GridSize
|
||||||
|
items: Sponsor[]
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const data = ref<Sponsors[]>([])
|
||||||
|
|
||||||
|
export function useAdSponsor() {
|
||||||
|
onMounted(async () => {
|
||||||
|
// 定义数据源URL列表,按优先级排序
|
||||||
|
const urls = [
|
||||||
|
'https://sponsor.wot-ui.cn/sponsor.json',
|
||||||
|
'https://wot-sponsors.pages.dev/sponsor.json'
|
||||||
|
]
|
||||||
|
|
||||||
|
// 尝试从多个数据源获取数据
|
||||||
|
const fetchData = async () => {
|
||||||
|
for (const url of urls) {
|
||||||
|
try {
|
||||||
|
const response = await axios.get(url + '?t=' + Date.now(), {
|
||||||
|
timeout: 5000 // 设置5秒超时
|
||||||
|
})
|
||||||
|
return response?.data?.data // 成功获取数据后直接返回
|
||||||
|
} catch (error) {
|
||||||
|
console.warn(`Failed to fetch from ${url}`)
|
||||||
|
// 继续尝试下一个URL
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return [] // 所有数据源都失败时返回null
|
||||||
|
}
|
||||||
|
|
||||||
|
data.value = await fetchData()
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
data,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -13,7 +13,7 @@ export function useAds() {
|
|||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
// 定义数据源URL列表,按优先级排序
|
// 定义数据源URL列表,按优先级排序
|
||||||
const urls = [
|
const urls = [
|
||||||
'https://sponsor.wot-design-uni.cn/ads.json',
|
'https://sponsor.wot-ui.cn/ads.json',
|
||||||
'https://wot-sponsors.pages.dev/ads.json'
|
'https://wot-sponsors.pages.dev/ads.json'
|
||||||
]
|
]
|
||||||
|
|
||||||
@ -21,7 +21,7 @@ export function useAds() {
|
|||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
for (const url of urls) {
|
for (const url of urls) {
|
||||||
try {
|
try {
|
||||||
const response = await axios.get(url, {
|
const response = await axios.get(url + '?t=' + Date.now(), {
|
||||||
timeout: 5000 // 设置5秒超时
|
timeout: 5000 // 设置5秒超时
|
||||||
})
|
})
|
||||||
return response.data && response.data.ads ? response.data.ads : [] // 成功获取数据后直接返回
|
return response.data && response.data.ads ? response.data.ads : [] // 成功获取数据后直接返回
|
||||||
|
|||||||
46
docs/.vitepress/theme/composables/banner.ts
Normal file
46
docs/.vitepress/theme/composables/banner.ts
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
export type BannerData = {
|
||||||
|
action: string
|
||||||
|
title: string
|
||||||
|
link: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = ref<BannerData[]>([])
|
||||||
|
|
||||||
|
export function useBanner() {
|
||||||
|
onMounted(async () => {
|
||||||
|
// 定义数据源URL列表,按优先级排序
|
||||||
|
const urls = [
|
||||||
|
'https://sponsor.wot-ui.cn/banner.json',
|
||||||
|
'https://wot-sponsors.pages.dev/banner.json'
|
||||||
|
]
|
||||||
|
|
||||||
|
// 尝试从多个数据源获取数据
|
||||||
|
const fetchData = async () => {
|
||||||
|
for (const url of urls) {
|
||||||
|
try {
|
||||||
|
const response = await axios.get(url + '?t=' + Date.now(), {
|
||||||
|
timeout: 5000 // 设置5秒超时
|
||||||
|
})
|
||||||
|
return response.data && response.data.data ? response.data.data : [] // 成功获取数据后直接返回
|
||||||
|
} catch (error) {
|
||||||
|
console.warn(`Failed to fetch from ${url}`)
|
||||||
|
// 继续尝试下一个URL
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return [] // 所有数据源都失败时返回空数组
|
||||||
|
}
|
||||||
|
|
||||||
|
data.value = await fetchData()
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -13,7 +13,7 @@ export function useCaseData() {
|
|||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
// 定义数据源URL列表,按优先级排序
|
// 定义数据源URL列表,按优先级排序
|
||||||
const urls = [
|
const urls = [
|
||||||
'https://sponsor.wot-design-uni.cn',
|
'https://sponsor.wot-ui.cn',
|
||||||
'https://wot-sponsors.pages.dev'
|
'https://wot-sponsors.pages.dev'
|
||||||
]
|
]
|
||||||
|
|
||||||
@ -22,10 +22,10 @@ export function useCaseData() {
|
|||||||
for (const url of urls) {
|
for (const url of urls) {
|
||||||
try {
|
try {
|
||||||
const path = '/cases.json'
|
const path = '/cases.json'
|
||||||
const response = await axios.get(url + path, {
|
const response = await axios.get(url + path + '?t=' + Date.now(), {
|
||||||
timeout: 5000 // 设置5秒超时
|
timeout: 5000 // 设置5秒超时
|
||||||
})
|
})
|
||||||
const data = response.data && response.data.data ? response.data.data : []
|
const data: CaseData[] = response.data && response.data.data ? response.data.data : []
|
||||||
return data.map(item => {
|
return data.map(item => {
|
||||||
return {
|
return {
|
||||||
name: item.name,
|
name: item.name,
|
||||||
|
|||||||
@ -18,7 +18,7 @@ export function useFriendly() {
|
|||||||
|
|
||||||
// 定义数据源URL列表,按优先级排序
|
// 定义数据源URL列表,按优先级排序
|
||||||
const urls = [
|
const urls = [
|
||||||
'https://sponsor.wot-design-uni.cn/friendly.json',
|
'https://sponsor.wot-ui.cn/friendly.json',
|
||||||
'https://wot-sponsors.pages.dev/friendly.json'
|
'https://wot-sponsors.pages.dev/friendly.json'
|
||||||
]
|
]
|
||||||
|
|
||||||
@ -26,7 +26,7 @@ export function useFriendly() {
|
|||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
for (const url of urls) {
|
for (const url of urls) {
|
||||||
try {
|
try {
|
||||||
const response = await axios.get(url, {
|
const response = await axios.get(url + '?t=' + Date.now(), {
|
||||||
timeout: 5000 // 设置5秒超时
|
timeout: 5000 // 设置5秒超时
|
||||||
})
|
})
|
||||||
return response.data && response.data.links ? response.data.links : [] // 成功获取数据后直接返回
|
return response.data && response.data.links ? response.data.links : [] // 成功获取数据后直接返回
|
||||||
|
|||||||
@ -1,12 +1,3 @@
|
|||||||
/*
|
|
||||||
* @Author: weisheng
|
|
||||||
* @Date: 2023-08-01 11:12:05
|
|
||||||
* @LastEditTime: 2025-05-07 23:07:17
|
|
||||||
* @LastEditors: weisheng
|
|
||||||
* @Description:
|
|
||||||
* @FilePath: /wot-design-uni/docs/.vitepress/theme/composables/sponsor.ts
|
|
||||||
* 记得注释
|
|
||||||
*/
|
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
|
||||||
@ -21,7 +12,7 @@ export function useSponsor() {
|
|||||||
|
|
||||||
// 定义数据源URL列表,按优先级排序
|
// 定义数据源URL列表,按优先级排序
|
||||||
const urls = [
|
const urls = [
|
||||||
'https://sponsor.wot-design-uni.cn/wot-design-uni.json',
|
'https://sponsor.wot-ui.cn/wot-design-uni.json',
|
||||||
'https://wot-sponsors.pages.dev/wot-design-uni.json'
|
'https://wot-sponsors.pages.dev/wot-design-uni.json'
|
||||||
]
|
]
|
||||||
|
|
||||||
@ -29,7 +20,7 @@ export function useSponsor() {
|
|||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
for (const url of urls) {
|
for (const url of urls) {
|
||||||
try {
|
try {
|
||||||
const response = await axios.get(url, {
|
const response = await axios.get(url + '?t=' + Date.now(), {
|
||||||
timeout: 5000 // 设置5秒超时
|
timeout: 5000 // 设置5秒超时
|
||||||
})
|
})
|
||||||
return response.data // 成功获取数据后直接返回
|
return response.data // 成功获取数据后直接返回
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: weisheng
|
* @Author: weisheng
|
||||||
* @Date: 2024-10-12 22:09:33
|
* @Date: 2024-10-12 22:09:33
|
||||||
* @LastEditTime: 2024-12-07 20:34:33
|
* @LastEditTime: 2025-10-30 11:09:04
|
||||||
* @LastEditors: weisheng
|
* @LastEditors: weisheng
|
||||||
* @Description:
|
* @Description:
|
||||||
* @FilePath: /wot-design-uni/docs/.vitepress/theme/index.ts
|
* @FilePath: /wot-design-uni/docs/.vitepress/theme/index.ts
|
||||||
@ -19,23 +19,87 @@ import CustomFooter from './components/CustomFooter.vue'
|
|||||||
import SvgImage from './components/SvgImage.vue'
|
import SvgImage from './components/SvgImage.vue'
|
||||||
import HomeStar from './components/HomeStar.vue'
|
import HomeStar from './components/HomeStar.vue'
|
||||||
import ExternalLink from './components/ExternalLink.vue'
|
import ExternalLink from './components/ExternalLink.vue'
|
||||||
import ElementPlus from 'element-plus'
|
import WwAds from './components/WwAds.vue'
|
||||||
|
import SpecialSponsor from './components/SpecialSponsor.vue'
|
||||||
|
import Banner from './components/Banner.vue'
|
||||||
|
import ElementPlus, { ElMessageBox } from 'element-plus'
|
||||||
import 'element-plus/dist/index.css'
|
import 'element-plus/dist/index.css'
|
||||||
|
import 'element-plus/theme-chalk/dark/css-vars.css'
|
||||||
|
// 声明百度统计全局变量
|
||||||
|
declare global {
|
||||||
|
interface Window {
|
||||||
|
_hmt: any[]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
...Theme,
|
...Theme,
|
||||||
Layout() {
|
Layout() {
|
||||||
return h(Theme.Layout, null, {
|
return h(Theme.Layout, null, {
|
||||||
|
'layout-top': () => h(Banner),
|
||||||
'home-hero-info-after':()=>h(HomeStar),
|
'home-hero-info-after':()=>h(HomeStar),
|
||||||
|
'home-hero-after': () => h(SpecialSponsor),
|
||||||
'home-features-after': () => h(HomeFriendly),
|
'home-features-after': () => h(HomeFriendly),
|
||||||
'layout-bottom':() => h(CustomFooter),
|
'layout-bottom':() => h(CustomFooter),
|
||||||
'nav-bar-title-after': () => h(NavBarTitleAfter),
|
'nav-bar-title-after': () => h(NavBarTitleAfter),
|
||||||
|
'aside-outline-after': () => h(WwAds),
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
enhanceApp({ app }) {
|
enhanceApp({ app, router }) {
|
||||||
app.component('SvgImage', SvgImage)
|
app.component('SvgImage', SvgImage)
|
||||||
app.component('ExternalLink',ExternalLink)
|
app.component('ExternalLink',ExternalLink)
|
||||||
app.use(ElementPlus)
|
app.use(ElementPlus)
|
||||||
|
|
||||||
|
// 站点迁移检测
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
// 检测是否为旧域名,只在页面首次加载时检测
|
||||||
|
const checkSiteMigration = async () => {
|
||||||
|
if (window.location.hostname === 'wot-design-uni.pages.dev') {
|
||||||
|
try {
|
||||||
|
// 使用 Element Plus 的 MessageBox 弹出确认对话框
|
||||||
|
await ElMessageBox.confirm(
|
||||||
|
'站点已迁移至新域名,为了获得更好的访问体验,建议您跳转到新站点。',
|
||||||
|
'站点迁移通知',
|
||||||
|
{
|
||||||
|
confirmButtonText: '立即跳转',
|
||||||
|
cancelButtonText: '稍后再说',
|
||||||
|
type: 'warning',
|
||||||
|
center: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
// 用户点击确认后跳转
|
||||||
|
// 保持当前路径,只替换域名
|
||||||
|
const newUrl = `https://wot-ui.cn${window.location.pathname}${window.location.search}${window.location.hash}`
|
||||||
|
window.location.href = newUrl
|
||||||
|
} catch {
|
||||||
|
// 用户点击取消或关闭对话框,不做任何操作
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 页面加载完成后检测
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', checkSiteMigration)
|
||||||
|
} else {
|
||||||
|
checkSiteMigration()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 百度统计路由监听
|
||||||
|
// 确保百度统计已加载
|
||||||
|
const trackPageView = (path: string) => {
|
||||||
|
if (window._hmt) {
|
||||||
|
window._hmt.push(['_trackPageview', path])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听路由变化
|
||||||
|
router.onAfterRouteChanged = (to) => {
|
||||||
|
// 延迟执行,确保页面已完全加载
|
||||||
|
setTimeout(() => {
|
||||||
|
trackPageView(to)
|
||||||
|
}, 100)
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,59 +0,0 @@
|
|||||||
---
|
|
||||||
footer: false
|
|
||||||
---
|
|
||||||
# 调剂宝
|
|
||||||
<div class="qrcode-container">
|
|
||||||
<div class="qrcode-item">
|
|
||||||
<h3>小程序二维码</h3>
|
|
||||||
<img src="/tiaojibao.png" alt="调剂宝小程序二维码" class="qrcode-image">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="qrcode-item">
|
|
||||||
<h3>福利码</h3>
|
|
||||||
<div class="welfare-code">uh3p</div>
|
|
||||||
<div class="welfare-desc">注册VIP会员时填写此福利码,立享20元优惠</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
::: tip 2025考研调剂助手
|
|
||||||
调剂宝整合320万+拟录取数据、90万+调剂案例,提供实时调剂提醒和智能方案推荐,助你把握每一个调剂机会!
|
|
||||||
|
|
||||||
[👉 了解详情](https://mp.weixin.qq.com/s/QtPNcoj7Pu_RztBvzTyWLQ)
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: warning 注意
|
|
||||||
调剂系统开放时间以教育部官方通知为准,请提前做好准备
|
|
||||||
:::
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.qrcode-container {
|
|
||||||
display: flex;
|
|
||||||
gap: 2rem;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 1rem 0 2rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.qrcode-item {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.qrcode-image {
|
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin: 1rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.welfare-code {
|
|
||||||
font-size: 2rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: var(--vp-c-brand);
|
|
||||||
margin: 1rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.welfare-desc {
|
|
||||||
color: var(--vp-c-text-2);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -137,8 +137,8 @@
|
|||||||
| hover-stop-propagation | 指定是否阻止本节点的祖先节点出现点击态 | boolean | - | false | - |
|
| hover-stop-propagation | 指定是否阻止本节点的祖先节点出现点击态 | boolean | - | false | - |
|
||||||
| lang | 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文 | string | zh_CN / zh_TW | en | - |
|
| lang | 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文 | string | zh_CN / zh_TW | en | - |
|
||||||
| session-from | 会话来源,open-type="contact"时有效 | string | - | - | - |
|
| session-from | 会话来源,open-type="contact"时有效 | string | - | - | - |
|
||||||
| session-message-title | 会话内消息卡片标题,open-type="contact"时有效 | string | - | 当前标题 | - |
|
| send-message-title | 会话内消息卡片标题,open-type="contact"时有效 | string | - | 当前标题 | - |
|
||||||
| session-message-path | 会话内消息卡片点击跳转小程序路径,open-type="contact"时有效 | string | - | 当前分享路径 | - |
|
| send-message-path | 会话内消息卡片点击跳转小程序路径,open-type="contact"时有效 | string | - | 当前分享路径 | - |
|
||||||
| send-message-img | 会话内消息卡片图片,open-type="contact"时有效 | string | - | 截图 | - |
|
| send-message-img | 会话内消息卡片图片,open-type="contact"时有效 | string | - | 截图 | - |
|
||||||
| app-parameter | 打开 APP 时,向 APP 传递的参数,open-type=launchApp 时有效 | string | - | - | - |
|
| app-parameter | 打开 APP 时,向 APP 传递的参数,open-type=launchApp 时有效 | string | - | - | - |
|
||||||
| show-message-card | 是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,open-type="contact"时有效 | boolean | - | false | - |
|
| show-message-card | 是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,open-type="contact"时有效 | boolean | - | false | - |
|
||||||
@ -155,6 +155,7 @@
|
|||||||
| getUserInfo | 获取用户信息,可以从@getuserinfo 回调中获取到用户信息 |
|
| getUserInfo | 获取用户信息,可以从@getuserinfo 回调中获取到用户信息 |
|
||||||
| contact | 打开客服会话,如果用户在会话中点击消息卡片后返回应用,可以从 @contact 回调中获得具体信息 |
|
| contact | 打开客服会话,如果用户在会话中点击消息卡片后返回应用,可以从 @contact 回调中获得具体信息 |
|
||||||
| getPhoneNumber | 获取用户手机号,可以从@getphonenumber 回调中获取到用户信息 |
|
| getPhoneNumber | 获取用户手机号,可以从@getphonenumber 回调中获取到用户信息 |
|
||||||
|
| getRealtimePhoneNumber | 实时获取用户手机号,可以从@getrealtimephonenumber 回调中获取到用户信息,仅微信小程序 |
|
||||||
| launchApp | 小程序中打开 APP,可以通过 app-parameter 属性设定向 APP 传的参数 |
|
| launchApp | 小程序中打开 APP,可以通过 app-parameter 属性设定向 APP 传的参数 |
|
||||||
| openSetting | 打开授权设置页 |
|
| openSetting | 打开授权设置页 |
|
||||||
| chooseAvatar | 获取用户头像,可以从@chooseavatar 回调中获取到头像信息 |
|
| chooseAvatar | 获取用户头像,可以从@chooseavatar 回调中获取到头像信息 |
|
||||||
@ -171,9 +172,12 @@
|
|||||||
| getuserinfo | 获取用户信息 | `detail` | - |
|
| getuserinfo | 获取用户信息 | `detail` | - |
|
||||||
| contact | 客服消息回调,open-type="contact"时有效 | `detail` | - |
|
| contact | 客服消息回调,open-type="contact"时有效 | `detail` | - |
|
||||||
| getphonenumber | 获取用户手机号回调,open-type=getPhoneNumber 时有效 | `detail` | - |
|
| getphonenumber | 获取用户手机号回调,open-type=getPhoneNumber 时有效 | `detail` | - |
|
||||||
|
| getrealtimephonenumber | 实时获取用户手机号回调,open-type=getRealtimePhoneNumber 时有效 | `detail` | 1.13.0 |
|
||||||
| error | 当使用开放能力时,发生错误的回调,open-type=launchApp 时有效 | `detail` | - |
|
| error | 当使用开放能力时,发生错误的回调,open-type=launchApp 时有效 | `detail` | - |
|
||||||
| launchapp | 打开 APP 成功的回调,open-type=launchApp 时有效 | `detail` | - |
|
| launchapp | 打开 APP 成功的回调,open-type=launchApp 时有效 | `detail` | - |
|
||||||
| opensetting | 在打开授权设置页后回调,open-type=openSetting 时有效 | `detail` | - |
|
| opensetting | 在打开授权设置页后回调,open-type=openSetting 时有效 | `detail` | - |
|
||||||
|
| chooseavatar | 获取用户头像回调,open-type=chooseAvatar 时有效 | `detail` | - |
|
||||||
|
| agreeprivacyauthorization | 用户同意隐私协议回调,open-type=agreePrivacyAuthorization 时有效 | `detail` | - |
|
||||||
|
|
||||||
## 外部样式类
|
## 外部样式类
|
||||||
|
|
||||||
|
|||||||
@ -425,6 +425,7 @@ function handleConfirm({ value }) {
|
|||||||
| label-width | 设置左侧标题宽度 | string | - | 33% | - |
|
| label-width | 设置左侧标题宽度 | string | - | 33% | - |
|
||||||
| error | 是否为错误状态,错误状态时右侧内容为红色 | boolean | - | false | - |
|
| error | 是否为错误状态,错误状态时右侧内容为红色 | boolean | - | false | - |
|
||||||
| required | 必填样式 | boolean | - | false | - |
|
| required | 必填样式 | boolean | - | false | - |
|
||||||
|
| marker-side | 必填标记位置 | string | before / after | before | 1.12.0 |
|
||||||
| center | 是否垂直居中 | boolean | - | false | - |
|
| center | 是否垂直居中 | boolean | - | false | - |
|
||||||
| ellipsis | 是否超出隐藏 | boolean | - | false | - |
|
| ellipsis | 是否超出隐藏 | boolean | - | false | - |
|
||||||
| align-right | 选择器的值靠右展示 | boolean | - | false | - |
|
| align-right | 选择器的值靠右展示 | boolean | - | false | - |
|
||||||
|
|||||||
@ -251,6 +251,7 @@ function handleSwitchChange({ value }) {
|
|||||||
| title | 标题 | string | - | - | - |
|
| title | 标题 | string | - | - | - |
|
||||||
| value | 右侧内容 | string | - | - | - |
|
| value | 右侧内容 | string | - | - | - |
|
||||||
| icon | 图标类名 | string | - | - | - |
|
| icon | 图标类名 | string | - | - | - |
|
||||||
|
| icon-size | 图标大小 | string \| number | - | - | 1.13.0 |
|
||||||
| label | 描述信息 | string | - | - | - |
|
| label | 描述信息 | string | - | - | - |
|
||||||
| is-link | 是否为跳转链接 | boolean | - | false | - |
|
| is-link | 是否为跳转链接 | boolean | - | false | - |
|
||||||
| to | 跳转地址 | string | - | - | - |
|
| to | 跳转地址 | string | - | - | - |
|
||||||
@ -260,6 +261,7 @@ function handleSwitchChange({ value }) {
|
|||||||
| title-width | 设置左侧标题宽度 | string | - | - | - |
|
| title-width | 设置左侧标题宽度 | string | - | - | - |
|
||||||
| center | 是否垂直居中,默认顶部居中 | boolean | - | false | - |
|
| center | 是否垂直居中,默认顶部居中 | boolean | - | false | - |
|
||||||
| required | 表单属性,必填 | boolean | - | false | - |
|
| required | 表单属性,必填 | boolean | - | false | - |
|
||||||
|
| marker-side | 必填标记的位置 | string | before / after | before | 1.12.0 |
|
||||||
| vertical | 表单属性,上下结构 | boolean | - | false | - |
|
| vertical | 表单属性,上下结构 | boolean | - | false | - |
|
||||||
| ellipsis | 内容省略,右侧内容超出时会以省略号显示 | boolean | - | false | 1.11.0 |
|
| ellipsis | 内容省略,右侧内容超出时会以省略号显示 | boolean | - | false | 1.11.0 |
|
||||||
| use-title-slot | 是否启用title插槽,默认启用,用来解决插槽传递时v-slot和v-if冲突问题 | boolean | - | true | 1.11.0 |
|
| use-title-slot | 是否启用title插槽,默认启用,用来解决插槽传递时v-slot和v-if冲突问题 | boolean | - | true | 1.11.0 |
|
||||||
|
|||||||
@ -638,6 +638,7 @@ const columnChange = ({ selectedItem, resolve, finish }) => {
|
|||||||
| label-width | 设置左侧标题宽度 | string | - | 33% | - |
|
| label-width | 设置左侧标题宽度 | string | - | 33% | - |
|
||||||
| error | 是否为错误状态,错误状态时右侧内容为红色 | boolean | - | false | - |
|
| error | 是否为错误状态,错误状态时右侧内容为红色 | boolean | - | false | - |
|
||||||
| required | 必填样式 | boolean | - | false | - |
|
| required | 必填样式 | boolean | - | false | - |
|
||||||
|
| marker-side | 必填标记位置 | string | before / after | before | 1.12.0 |
|
||||||
| align-right | 选择器的值靠右展示 | boolean | - | false | - |
|
| align-right | 选择器的值靠右展示 | boolean | - | false | - |
|
||||||
| before-confirm | 确定前校验函数,接收 (value, resolve) 参数,通过 resolve 继续执行 picker,resolve 接收 1 个 boolean 参数 | function | - | - | - |
|
| before-confirm | 确定前校验函数,接收 (value, resolve) 参数,通过 resolve 继续执行 picker,resolve 接收 1 个 boolean 参数 | function | - | - | - |
|
||||||
| loading-color | loading 图标的颜色 | string | - | #4D80F0 | - |
|
| loading-color | loading 图标的颜色 | string | - | #4D80F0 | - |
|
||||||
|
|||||||
@ -104,7 +104,7 @@ export default {
|
|||||||
```
|
```
|
||||||
|
|
||||||
### 在 TypeScript 中使用
|
### 在 TypeScript 中使用
|
||||||
在 TypeScript 中定义 `themeVars` 时,建议使用 __wot-design-uni__ 提供的 __ConfigProviderThemeVars__ 类型,可以提供完善的类型提示:
|
在 TypeScript 中定义 `themeVars` 时,建议使用 **wot-design-uni** 提供的 **ConfigProviderThemeVars** 类型,可以提供完善的类型提示:
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
import type { ConfigProviderThemeVars } from 'wot-design-uni';
|
import type { ConfigProviderThemeVars } from 'wot-design-uni';
|
||||||
|
|||||||
@ -96,6 +96,8 @@ function handleClick() {
|
|||||||
| hide-when-close | 是否当关闭时将弹出层隐藏(display: none) | boolean | - | true | - |
|
| hide-when-close | 是否当关闭时将弹出层隐藏(display: none) | boolean | - | true | - |
|
||||||
| z-index | 设置层级 | number | - | 10 | 1.4.0 |
|
| z-index | 设置层级 | number | - | 10 | 1.4.0 |
|
||||||
| root-portal | 是否从页面中脱离出来,用于解决各种 fixed 失效问题 | boolean | - | false | 1.11.0 |
|
| root-portal | 是否从页面中脱离出来,用于解决各种 fixed 失效问题 | boolean | - | false | 1.11.0 |
|
||||||
|
| show-menu-by-longpress | 开启长按图片显示识别小程序码菜单,仅微信小程序支持 | boolean | - | false | 1.13.0 |
|
||||||
|
| close-on-click | 是否在点击图片时关闭幕帘,默认为 true | boolean | - | ture | 1.13.0 |
|
||||||
|
|
||||||
## Events
|
## Events
|
||||||
|
|
||||||
|
|||||||
@ -144,6 +144,7 @@ const filter = (type, values) => {
|
|||||||
| loading | 加载中 | boolean | - | false | - |
|
| loading | 加载中 | boolean | - | false | - |
|
||||||
| loading-color | 加载的颜色,只能使用十六进制的色值写法,且不能使用缩写 | string | - | #4D80F0 | - |
|
| loading-color | 加载的颜色,只能使用十六进制的色值写法,且不能使用缩写 | string | - | #4D80F0 | - |
|
||||||
| columns-height | picker内部滚筒高 | number | - | 231 | - |
|
| columns-height | picker内部滚筒高 | number | - | 231 | - |
|
||||||
|
| item-height | picker item的高度 | number | - | 35 | 1.13.0 |
|
||||||
| formatter | 自定义弹出层选项文案的格式化函数,返回一个字符串 | function | - | - | - |
|
| formatter | 自定义弹出层选项文案的格式化函数,返回一个字符串 | function | - | - | - |
|
||||||
| filter | 自定义过滤选项的函数,返回列的选项数组 | function | - | - | - |
|
| filter | 自定义过滤选项的函数,返回列的选项数组 | function | - | - | - |
|
||||||
| minDate | 最小日期,13 位的时间戳 | `timestamp` | - | 当前日期 - 10年 | - |
|
| minDate | 最小日期,13 位的时间戳 | `timestamp` | - | 当前日期 - 10年 | - |
|
||||||
|
|||||||
@ -289,6 +289,7 @@ const displayFormatTabLabel = (items) => {
|
|||||||
| loading | 加载中 | boolean | - | false | - |
|
| loading | 加载中 | boolean | - | false | - |
|
||||||
| loading-color | 加载的颜色,只能使用十六进制的色值写法,且不能使用缩写 | string | - | #4D80F0 | - |
|
| loading-color | 加载的颜色,只能使用十六进制的色值写法,且不能使用缩写 | string | - | #4D80F0 | - |
|
||||||
| columns-height | picker内部滚筒高 | number | - | 231 | - |
|
| columns-height | picker内部滚筒高 | number | - | 231 | - |
|
||||||
|
| item-height | picker item的高度 | number | - | 35 | - |
|
||||||
| title | 弹出层标题 | string | - | - | - |
|
| title | 弹出层标题 | string | - | - | - |
|
||||||
| cancel-button-text | 取消按钮文案 | string | - | 取消 | - |
|
| cancel-button-text | 取消按钮文案 | string | - | 取消 | - |
|
||||||
| confirm-button-text | 确认按钮文案 | string | - | 完成 | - |
|
| confirm-button-text | 确认按钮文案 | string | - | 完成 | - |
|
||||||
@ -307,6 +308,7 @@ const displayFormatTabLabel = (items) => {
|
|||||||
| minMinute | 最小分钟,time类型时生效 | number | - | 0 | - |
|
| minMinute | 最小分钟,time类型时生效 | number | - | 0 | - |
|
||||||
| maxMinute | 最大分钟,time类型时生效 | number | - | 59 | - |
|
| maxMinute | 最大分钟,time类型时生效 | number | - | 59 | - |
|
||||||
| required | 表单属性,必填 | boolean | - | false | - |
|
| required | 表单属性,必填 | boolean | - | false | - |
|
||||||
|
| marker-side | 必填标记位置 | string | before / after | before | 1.12.0 |
|
||||||
| size | 设置选择器大小 | string | large | - | - |
|
| size | 设置选择器大小 | string | large | - | - |
|
||||||
| label-width | 设置左侧标题宽度 | string | - | 33% | - |
|
| label-width | 设置左侧标题宽度 | string | - | 33% | - |
|
||||||
| error | 是否为错误状态,错误状态时右侧内容为红色 | boolean | - | false | - |
|
| error | 是否为错误状态,错误状态时右侧内容为红色 | boolean | - | false | - |
|
||||||
|
|||||||
@ -116,7 +116,7 @@ function handleOpened() {
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<wd-drop-menu>
|
<wd-drop-menu>
|
||||||
<wd-drop-menu-item title="地图" icon="location" icon-size="24px" />
|
<wd-drop-menu-item title="地图" icon="location" icon-size="14px" />
|
||||||
</wd-drop-menu>
|
</wd-drop-menu>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -137,22 +137,24 @@ function handleOpened() {
|
|||||||
|
|
||||||
```typescript
|
```typescript
|
||||||
import { useMessage } from '@/uni_modules/wot-design-uni'
|
import { useMessage } from '@/uni_modules/wot-design-uni'
|
||||||
|
import type { DropMenuItemBeforeToggle } from '@/uni_modules/wot-design-uni/components/wd-drop-menu-item/types'
|
||||||
|
|
||||||
const messageBox = useMessage()
|
const messageBox = useMessage()
|
||||||
|
|
||||||
const value = ref<number>(0)
|
const value = ref<number>(0)
|
||||||
|
|
||||||
const option = ref<Record<string, any>[]>([
|
const option = ref<Record<string, any>[]>([
|
||||||
{ label: '全部商品', value: 0 },
|
{ label: '全部商品', value: 0 },
|
||||||
{ label: '新款商品', value: 1 },
|
{ label: '新款商品', value: 1, tip: '这是补充信息' },
|
||||||
{ label: '活动商品', value: 2 }
|
{ label: '这是比较长的筛选条件这是比较长的筛选条件', value: 2 }
|
||||||
])
|
])
|
||||||
|
|
||||||
// 通过对话框确认是否打开/关闭下拉菜单
|
// 通过对话框确认是否打开/关闭下拉菜单
|
||||||
const handleBeforeToggle: DropMenuItemBeforeToggle = ({ status, resolve }) => {
|
const handleBeforeToggle: DropMenuItemBeforeToggle = ({ status, resolve }) => {
|
||||||
messageBox
|
messageBox
|
||||||
.confirm({
|
.confirm({
|
||||||
title: `异步${status ? '打开' : '关闭'}`,
|
title: `${status ? '异步打开' : '异步关闭'}`,
|
||||||
msg: `确定要${status ? '打开' : '关闭'}下拉菜单吗?`
|
msg: `${status ? '确定要打开下拉菜单吗' : '确定要关闭下拉菜单吗'}`
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
resolve(true)
|
resolve(true)
|
||||||
@ -198,7 +200,7 @@ const handleBeforeToggle: DropMenuItemBeforeToggle = ({ status, resolve }) => {
|
|||||||
| ------------- | ---------------------------------------------------------------------- | ----------------------------- | ------ | ---------- | -------- |
|
| ------------- | ---------------------------------------------------------------------- | ----------------------------- | ------ | ---------- | -------- |
|
||||||
| v-model | 当前选中项对应选中的 value | string / number | - | - | - |
|
| v-model | 当前选中项对应选中的 value | string / number | - | - | - |
|
||||||
| disabled | 禁用菜单 | boolean | - | false | - |
|
| disabled | 禁用菜单 | boolean | - | false | - |
|
||||||
| options | 列表数据,对应数据结构 `[{text: '标题', value: '0', tip: '提示文字'}]` | array | - | - | - |
|
| options | 列表数据,对应数据结构 `[{label: '标题', value: '0', tip: '提示文字'}]` | array | - | - | - |
|
||||||
| icon-name | 选中的图标名称(可选名称在 wd-icon 组件中) | string | - | check | - |
|
| icon-name | 选中的图标名称(可选名称在 wd-icon 组件中) | string | - | check | - |
|
||||||
| title | 菜单标题 | string | - | - | - |
|
| title | 菜单标题 | string | - | - | - |
|
||||||
| icon | 菜单图标 | string | - | arrow-down | - |
|
| icon | 菜单图标 | string | - | arrow-down | - |
|
||||||
@ -207,6 +209,7 @@ const handleBeforeToggle: DropMenuItemBeforeToggle = ({ status, resolve }) => {
|
|||||||
| value-key | 选项对象中,value 对应的 key | string | - | value | - |
|
| value-key | 选项对象中,value 对应的 key | string | - | value | - |
|
||||||
| label-key | 选项对象中,展示的文本对应的 key | string | - | label | - |
|
| label-key | 选项对象中,展示的文本对应的 key | string | - | label | - |
|
||||||
| tip-key | 选项对象中,选项说明对应的 key | string | - | tip | - |
|
| tip-key | 选项对象中,选项说明对应的 key | string | - | tip | - |
|
||||||
|
| popup-height | popup弹出容器的高度,不设置默认为80% | string | - | - | 1.13.0 |
|
||||||
| root-portal | 是否从页面中脱离出来,用于解决各种 fixed 失效问题 | boolean | - | false | 1.11.0 |
|
| root-portal | 是否从页面中脱离出来,用于解决各种 fixed 失效问题 | boolean | - | false | 1.11.0 |
|
||||||
|
|
||||||
## DropdownItem Events
|
## DropdownItem Events
|
||||||
|
|||||||
@ -2,8 +2,6 @@
|
|||||||
|
|
||||||
悬浮动作按钮组件,按下可显示一组动作按钮。
|
悬浮动作按钮组件,按下可显示一组动作按钮。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
:::warning
|
:::warning
|
||||||
因为`uni-app`组件无法监听点击自己以外的地方,为了在点击页面其他地方时,可以自动关闭 `fab` ,建议使用组件库的 `useQueue` hook(会关闭所有 dropmenu、popover、toast、swipeAction、fab),在页面的根元素上监听点击事件的冒泡。
|
因为`uni-app`组件无法监听点击自己以外的地方,为了在点击页面其他地方时,可以自动关闭 `fab` ,建议使用组件库的 `useQueue` hook(会关闭所有 dropmenu、popover、toast、swipeAction、fab),在页面的根元素上监听点击事件的冒泡。
|
||||||
|
|
||||||
@ -36,14 +34,9 @@
|
|||||||
import { useToast } from '@/uni_modules/wot-design-uni'
|
import { useToast } from '@/uni_modules/wot-design-uni'
|
||||||
const { show: showToast } = useToast()
|
const { show: showToast } = useToast()
|
||||||
const type = ref<'primary' | 'success' | 'info' | 'warning' | 'error' | 'default'>('primary')
|
const type = ref<'primary' | 'success' | 'info' | 'warning' | 'error' | 'default'>('primary')
|
||||||
const position = ref<'left-top'
|
const position = ref<'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' | 'left-center' | 'right-center' | 'top-center' | 'bottom-center'>(
|
||||||
| 'right-top'
|
'left-bottom'
|
||||||
| 'left-bottom'
|
)
|
||||||
| 'right-bottom'
|
|
||||||
| 'left-center'
|
|
||||||
| 'right-center'
|
|
||||||
| 'top-center'
|
|
||||||
| 'bottom-center'>('left-bottom')
|
|
||||||
const direction = ref<'top' | 'right' | 'bottom' | 'left'>('top')
|
const direction = ref<'top' | 'right' | 'bottom' | 'left'>('top')
|
||||||
const disabled = ref<boolean>(false)
|
const disabled = ref<boolean>(false)
|
||||||
```
|
```
|
||||||
@ -90,7 +83,6 @@ const active = ref<boolean>(false)
|
|||||||
|
|
||||||
通过`trigger`插槽自定义触发器,`expandable`控制点击触发器是否展开/收起动作按钮菜单。
|
通过`trigger`插槽自定义触发器,`expandable`控制点击触发器是否展开/收起动作按钮菜单。
|
||||||
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<wd-fab position="left-bottom" :expandable="false">
|
<wd-fab position="left-bottom" :expandable="false">
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
@ -98,17 +90,17 @@ const active = ref<boolean>(false)
|
|||||||
</template>
|
</template>
|
||||||
</wd-fab>
|
</wd-fab>
|
||||||
```
|
```
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
const handleClick = () => {
|
const handleClick = () => {
|
||||||
console.log('点击了')
|
console.log('点击了')
|
||||||
}
|
}
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Attributes
|
## Attributes
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||||
| -------------- | ----------------------------------------------------- | ------------ |-------------------------------------------------------------------------------------------------------------------------------------------| ---------------------------------------------- | ---------------- |
|
| -------------- | ----------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------- | -------- |
|
||||||
| v-model:active | 是否激活 | boolean | - | false | 0.1.57 |
|
| v-model:active | 是否激活 | boolean | - | false | 0.1.57 |
|
||||||
| type | 类型 | FabType | 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default' | 'primary' | 0.1.57 |
|
| type | 类型 | FabType | 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default' | 'primary' | 0.1.57 |
|
||||||
| position | 悬浮按钮位置 | FabPosition | 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' | left-center | right-center | top-center | bottom-center | 'right-bottom' | 0.1.57 |
|
| position | 悬浮按钮位置 | FabPosition | 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' | left-center | right-center | top-center | bottom-center | 'right-bottom' | 0.1.57 |
|
||||||
@ -119,19 +111,27 @@ const handleClick = () => {
|
|||||||
| activeIcon | 悬浮按钮展开时的图标 | string | - | 'close' | 0.1.57 |
|
| activeIcon | 悬浮按钮展开时的图标 | string | - | 'close' | 0.1.57 |
|
||||||
| zIndex | 自定义悬浮按钮层级 | number | - | 99 | 0.1.57 |
|
| zIndex | 自定义悬浮按钮层级 | number | - | 99 | 0.1.57 |
|
||||||
| gap | 自定义悬浮按钮与可视区域边缘的间距 | FabGap | - | \{ top: 16, left: 16, right: 16, bottom: 16 \} | 1.2.26 |
|
| gap | 自定义悬浮按钮与可视区域边缘的间距 | FabGap | - | \{ top: 16, left: 16, right: 16, bottom: 16 \} | 1.2.26 |
|
||||||
| customStyle | 自定义样式 | string | - | '' | 0.1.57 |
|
| custom-style | 自定义样式 | string | - | '' | 0.1.57 |
|
||||||
| expandable | 用于控制点击时是否展开菜单,设置为 false 时触发 click | boolean | - | true | 1.3.11 |
|
| expandable | 用于控制点击时是否展开菜单,设置为 false 时触发 click | boolean | - | true | 1.3.11 |
|
||||||
|
|
||||||
## Events
|
## Events
|
||||||
|
|
||||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||||
| -------- | -------------------------------------------- | ---- | ---------------- |
|
| -------- | -------------------------------------------- | ---- | -------- |
|
||||||
| click | expandable 设置为 false 时,点击悬浮按钮触发 | — | 1.3.11 |
|
| click | expandable 设置为 false 时,点击悬浮按钮触发 | — | 1.3.11 |
|
||||||
|
|
||||||
|
## Methods
|
||||||
|
|
||||||
|
| 方法名 | 说明 | 参数 | 最低版本 |
|
||||||
|
| ------ | -------- | ---- | -------- |
|
||||||
|
| open | 展开菜单 | - | 0.1.57 |
|
||||||
|
| close | 收起菜单 | - | 0.1.57 |
|
||||||
|
|
||||||
## Slot
|
## Slot
|
||||||
|
|
||||||
| name | 说明 | 最低版本 |
|
| name | 说明 | 最低版本 |
|
||||||
| ------- | -------------------------------------------------------------- | ---------------- |
|
| ------- | -------------------------------------------------------------- | -------- |
|
||||||
|
| default | 动作按钮,通常放置多个按钮 | 0.1.57 |
|
||||||
| trigger | 触发器插槽,用于自定义点击按钮,使用此插槽时组件不会抛出 click | 1.3.11 |
|
| trigger | 触发器插槽,用于自定义点击按钮,使用此插槽时组件不会抛出 click | 1.3.11 |
|
||||||
|
|
||||||
## 外部样式类
|
## 外部样式类
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
|
|
||||||
## 基本使用
|
## 基本使用
|
||||||
|
|
||||||
通过 `height` 属性设置标题 `background` 属性设置背景色。
|
通过 `height` 属性设置高度 `background` 属性设置背景色。
|
||||||
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
|
|||||||
@ -63,17 +63,15 @@
|
|||||||
|
|
||||||
通过默认插槽可以自定义 `GridItem` 的内容。
|
通过默认插槽可以自定义 `GridItem` 的内容。
|
||||||
|
|
||||||
使用默认插槽过程中, 开启 `GridItem` 上的属性 `use-slot`。
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<wd-grid>
|
<wd-grid>
|
||||||
<wd-grid-item use-slot>
|
<wd-grid-item>
|
||||||
<image class="img" :src="joy" />
|
<image class="img" :src="joy" />
|
||||||
</wd-grid-item>
|
</wd-grid-item>
|
||||||
<wd-grid-item use-slot>
|
<wd-grid-item>
|
||||||
<image class="img" :src="joy" />
|
<image class="img" :src="joy" />
|
||||||
</wd-grid-item>
|
</wd-grid-item>
|
||||||
<wd-grid-item use-slot>
|
<wd-grid-item>
|
||||||
<image class="img" :src="joy" />
|
<image class="img" :src="joy" />
|
||||||
</wd-grid-item>
|
</wd-grid-item>
|
||||||
</wd-grid>
|
</wd-grid>
|
||||||
@ -88,9 +86,9 @@
|
|||||||
|
|
||||||
## 单个插槽
|
## 单个插槽
|
||||||
|
|
||||||
通过插槽 `icon` 可以插入 `GridItem` 中的图标位。通过 `use-icon-slot` 开启图标插槽。
|
通过插槽 `icon` 可以插入 `GridItem` 中的图标位。
|
||||||
|
|
||||||
通过插槽 `text` 可以插入 `GridItem` 中的文字位。通过 `use-text-slot` 开启文字插槽。
|
通过插槽 `text` 可以插入 `GridItem` 中的文字位。
|
||||||
|
|
||||||
注意:
|
注意:
|
||||||
|
|
||||||
@ -100,14 +98,14 @@
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<wd-grid>
|
<wd-grid>
|
||||||
<wd-grid-item use-icon-slot text="文字" v-for="index in 3" :key="index" icon-size="36px">
|
<wd-grid-item text="文字" v-for="index in 3" :key="index" icon-size="36px">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<image class="slot-img" :src="joy" />
|
<image class="slot-img" :src="joy" />
|
||||||
</template>
|
</template>
|
||||||
</wd-grid-item>
|
</wd-grid-item>
|
||||||
</wd-grid>
|
</wd-grid>
|
||||||
<wd-grid>
|
<wd-grid>
|
||||||
<wd-grid-item use-text-slot icon="picture" v-for="index in 3" :key="index">
|
<wd-grid-item icon="picture" v-for="index in 3" :key="index">
|
||||||
<template #text>
|
<template #text>
|
||||||
<view class="text">自定义文字插槽</view>
|
<view class="text">自定义文字插槽</view>
|
||||||
</template>
|
</template>
|
||||||
@ -243,9 +241,9 @@
|
|||||||
| max | 图标右上角 `badge` 最大值,超过最大值会显示 '{max}+',要求 value 是 Number 类型 | number | - | - | - |
|
| max | 图标右上角 `badge` 最大值,超过最大值会显示 '{max}+',要求 value 是 Number 类型 | number | - | - | - |
|
||||||
| url | 点击后跳转的链接地址 | string | - | - | - |
|
| url | 点击后跳转的链接地址 | string | - | - | - |
|
||||||
| link-type | 页面跳转方式, 参考[微信小程序路由文档](https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html) | string | navigateTo / switchTab / reLaunch | - | - |
|
| link-type | 页面跳转方式, 参考[微信小程序路由文档](https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html) | string | navigateTo / switchTab / reLaunch | - | - |
|
||||||
| use-slot | 是否开启 `GridItem` 内容插槽 | boolean | - | false | - |
|
| <s>use-slot</s> | 是否开启 `GridItem` 内容插槽 **(1.12.0已废弃,直接使用默认插槽即可)** | boolean | - | false | - |
|
||||||
| use-icon-slot | 是否开启 `GridItem` icon 插槽 | boolean | - | false | - |
|
| <s>use-icon-slot</s> | 是否开启 `GridItem` icon 插槽 **(1.12.0已废弃,组件会自动检测icon插槽的存在)** | boolean | - | false | - |
|
||||||
| use-text-slot | 是否开启 `GridItem` text 内容插槽 | boolean | - | false | - |
|
| <s>use-text-slot</s> | 是否开启 `GridItem` text 内容插槽 **(1.12.0已废弃,组件会自动检测text插槽的存在)** | boolean | - | false | - |
|
||||||
| icon-size | 图标大小 | string | - | 26px | - |
|
| icon-size | 图标大小 | string | - | 26px | - |
|
||||||
| badge-props | 自定义徽标的属性,传入的对象会被透传给 [Badge 组件的 props](/component/badge#attributes) | BadgeProps | - | - | 0.1.50 |
|
| badge-props | 自定义徽标的属性,传入的对象会被透传给 [Badge 组件的 props](/component/badge#attributes) | BadgeProps | - | - | 0.1.50 |
|
||||||
|
|
||||||
|
|||||||
@ -68,12 +68,18 @@
|
|||||||
## Attributes
|
## Attributes
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||||
|-----|------|-----|-------|-------|---------|
|
|-----|------|-----|-------|-------|---------|
|
||||||
| name | 使用的图标名字,可以使用链接图片 | string | - | - | - |
|
| name | 图标名称或图片链接 | string | - | - | - |
|
||||||
| color | 图标的颜色 | string | - | inherit | - |
|
| color | 图标的颜色 | string | - | inherit | - |
|
||||||
| size | 图标的字体大小 | string | - | inherit | - |
|
| size | 图标的字体大小 | string \| number | - | inherit | - |
|
||||||
| classPrefix | 类名前缀,用于使用自定义图标 | string | - | 'wd-icon' | 0.1.27 |
|
| classPrefix | 类名前缀,用于使用自定义图标 | string | - | 'wd-icon' | 0.1.27 |
|
||||||
| custom-style | 根节点样式 | string | - | - | - |
|
| custom-style | 根节点样式 | string | - | - | - |
|
||||||
|
|
||||||
|
## Events
|
||||||
|
|
||||||
|
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||||
|
|---------|------|------|---------|
|
||||||
|
| click | 点击图标时触发 | event | - |
|
||||||
|
|
||||||
## 外部样式类
|
## 外部样式类
|
||||||
|
|
||||||
| 类名 | 说明 | 最低版本 |
|
| 类名 | 说明 | 最低版本 |
|
||||||
|
|||||||
@ -23,6 +23,36 @@
|
|||||||
const joy = 'data:image/jpeg;base64,...' // 图片文件base64
|
const joy = 'data:image/jpeg;base64,...' // 图片文件base64
|
||||||
```
|
```
|
||||||
|
|
||||||
|
:::tip 提示
|
||||||
|
可以配置 `transformAssetUrls` 使 `src` 属性获得与原生 `image` 一致的体验。
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// vite.config.(js|ts)
|
||||||
|
|
||||||
|
import uni from '@dcloudio/vite-plugin-uni'
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
// ...
|
||||||
|
uni({
|
||||||
|
vueOptions: {
|
||||||
|
template: {
|
||||||
|
transformAssetUrls: {
|
||||||
|
tags: {
|
||||||
|
'wd-img': ['src']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
]
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
修改完成后重启开发服务即可生效,查看 [uni-app issue#4997](https://github.com/dcloudio/uni-app/issues/4997#issuecomment-2456851123) 了解更多。
|
||||||
|
:::
|
||||||
|
|
||||||
## 插槽
|
## 插槽
|
||||||
|
|
||||||
使用`loading` `error`插槽设置在图片加载时、加载失败后的展示内容
|
使用`loading` `error`插槽设置在图片加载时、加载失败后的展示内容
|
||||||
|
|||||||
@ -165,6 +165,7 @@ function handleChange(event) {
|
|||||||
| center | 当有label属性时,设置标题和输入框垂直居中,默认为顶部居中 | boolean | - | false | - |
|
| center | 当有label属性时,设置标题和输入框垂直居中,默认为顶部居中 | boolean | - | false | - |
|
||||||
| label-width | 设置左侧标题宽度 | string | - | 33% | - |
|
| label-width | 设置左侧标题宽度 | string | - | 33% | - |
|
||||||
| required | cell 类型下必填样式 | boolean | - | false | - |
|
| required | cell 类型下必填样式 | boolean | - | false | - |
|
||||||
|
| marker-side | 必填标记的位置 | string | before / after | before | 1.12.0 |
|
||||||
| no-border | 非 cell 类型下是否隐藏下划线 | boolean | - | false | - |
|
| no-border | 非 cell 类型下是否隐藏下划线 | boolean | - | false | - |
|
||||||
| prop | 表单域 `model` 字段名,在使用表单校验功能的情况下,该属性是必填的 | string | - | - | - |
|
| prop | 表单域 `model` 字段名,在使用表单校验功能的情况下,该属性是必填的 | string | - | - | - |
|
||||||
| rules | 表单验证规则,结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - |
|
| rules | 表单验证规则,结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - |
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
---
|
---
|
||||||
version: 1.3.10
|
version: 1.3.10
|
||||||
---
|
---
|
||||||
|
|
||||||
# Keyboard 虚拟键盘
|
# Keyboard 虚拟键盘
|
||||||
|
|
||||||
虚拟数字键盘,用于输入数字、密码、身份证或车牌号等场景。
|
虚拟数字键盘,用于输入数字、密码、身份证或车牌号等场景。
|
||||||
@ -93,6 +94,42 @@ const onInput = (value) => showToast(`${value}`)
|
|||||||
const onDelete = () => showToast('删除')
|
const onDelete = () => showToast('删除')
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## 车牌号键盘语言控制
|
||||||
|
|
||||||
|
通过 `car-lang` 属性可以控制车牌键盘的语言模式,支持中文省份(`zh`)和英文字母(`en`)。通过 `auto-switch-lang` 属性可以控制是否自动切换语言。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- 受控模式:手动控制语言切换 -->
|
||||||
|
<wd-cell title="车牌号键盘(受控)" :value="value" is-link @click="showKeyBoard" />
|
||||||
|
|
||||||
|
<wd-keyboard v-model="value" v-model:visible="visible" v-model:car-lang="lang" mode="car" @input="onInput" @delete="onDelete"></wd-keyboard>
|
||||||
|
|
||||||
|
<!-- 非受控模式:禁用自动切换 -->
|
||||||
|
<wd-cell title="车牌号键盘(非受控)" :value="value2" is-link @click="showKeyBoard2" />
|
||||||
|
|
||||||
|
<wd-keyboard v-model="value2" v-model:visible="visible2" mode="car" auto-switch-lang @input="onInput" @delete="onDelete"></wd-keyboard>
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
const { show: showToast } = useToast()
|
||||||
|
const visible = ref<boolean>(false)
|
||||||
|
const visible2 = ref<boolean>(false)
|
||||||
|
const value = ref<string>('')
|
||||||
|
const value2 = ref<string>('')
|
||||||
|
const lang = ref<'zh' | 'en'>('zh')
|
||||||
|
|
||||||
|
function showKeyBoard() {
|
||||||
|
visible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
function showKeyBoard2() {
|
||||||
|
visible2.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const onInput = (value) => showToast(`${value}`)
|
||||||
|
const onDelete = () => showToast('删除')
|
||||||
|
```
|
||||||
|
|
||||||
## 带标题的键盘
|
## 带标题的键盘
|
||||||
|
|
||||||
通过 `title` 属性可以设置键盘标题。
|
通过 `title` 属性可以设置键盘标题。
|
||||||
@ -243,7 +280,7 @@ const onDelete = () => showToast('删除')
|
|||||||
## Attributes
|
## Attributes
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||||
| ------------------- | ------------------------ | --------------------- | -------------------------- | ---------- | ---------------- |
|
| ------------------- | -------------------------------------------------------------------- | --------------------- | -------------------------- | ---------- | -------- |
|
||||||
| v-model:visible | 是否展开 | `boolean` | - | `false` | 1.3.10 |
|
| v-model:visible | 是否展开 | `boolean` | - | `false` | 1.3.10 |
|
||||||
| v-model | 绑定的值 | `string` | - | - | 1.3.10 |
|
| v-model | 绑定的值 | `string` | - | - | 1.3.10 |
|
||||||
| title | 标题 | `string` | - | - | 1.3.10 |
|
| title | 标题 | `string` | - | - | 1.3.10 |
|
||||||
@ -261,6 +298,8 @@ const onDelete = () => showToast('删除')
|
|||||||
| safeAreaInsetBottom | 是否在底部安全区域内 | `boolean` | - | `true` | 1.3.10 |
|
| safeAreaInsetBottom | 是否在底部安全区域内 | `boolean` | - | `true` | 1.3.10 |
|
||||||
| extraKey | 额外按键 | `string` / `string[]` | - | - | 1.3.10 |
|
| extraKey | 额外按键 | `string` / `string[]` | - | - | 1.3.10 |
|
||||||
| root-portal | 是否从页面中脱离出来,用于解决各种 fixed 失效问题 | `boolean` | - | `false` | 1.11.0 |
|
| root-portal | 是否从页面中脱离出来,用于解决各种 fixed 失效问题 | `boolean` | - | `false` | 1.11.0 |
|
||||||
|
| v-model:carLang | 车牌键盘语言模式,当 mode=car 时生效 | `string` | `zh`, `en` | - | 1.13.0 |
|
||||||
|
| autoSwitchLang | 是否自动切换车牌键盘语言,当 mode=car 且 car-lang 是非受控状态时生效 | `boolean` | - | `false` | 1.13.0 |
|
||||||
|
|
||||||
## Slot
|
## Slot
|
||||||
|
|
||||||
|
|||||||
@ -2,6 +2,10 @@
|
|||||||
|
|
||||||
弹出对话框,常用于消息提示、消息确认等,支持函数调用。
|
弹出对话框,常用于消息提示、消息确认等,支持函数调用。
|
||||||
|
|
||||||
|
:::tip 提示
|
||||||
|
全局调用方案见 [wot-starter](https://starter.wot-ui.cn/guide/feedback.html),支持在路由导航守卫和网络请求拦截器等场景使用的可全局调用的反馈组件。
|
||||||
|
:::
|
||||||
|
|
||||||
## Alert 弹框
|
## Alert 弹框
|
||||||
|
|
||||||
alert 弹框只有确定按钮,用于强提醒。
|
alert 弹框只有确定按钮,用于强提醒。
|
||||||
|
|||||||
@ -111,6 +111,7 @@ const onChangeDistrict = (pickerView, value, columnIndex, resolve) => {
|
|||||||
| loading | 加载中 | boolean | - | false | - |
|
| loading | 加载中 | boolean | - | false | - |
|
||||||
| loading-color | 加载的颜色,只能使用十六进制的色值写法,且不能使用缩写 | string | - | #4D80F0 | - |
|
| loading-color | 加载的颜色,只能使用十六进制的色值写法,且不能使用缩写 | string | - | #4D80F0 | - |
|
||||||
| columns-height | picker内部滚筒高 | number | - | 231 | - |
|
| columns-height | picker内部滚筒高 | number | - | 231 | - |
|
||||||
|
| item-height | picker item的高度 | number | - | 35 | 1.13.0 |
|
||||||
| value-key | 选项对象中,value对应的 key | string | - | value | - |
|
| value-key | 选项对象中,value对应的 key | string | - | value | - |
|
||||||
| label-key | 选项对象中,展示的文本对应的 key | string | - | label | - |
|
| label-key | 选项对象中,展示的文本对应的 key | string | - | label | - |
|
||||||
| column-change | 接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参,根据选中项和列下标进行判断,通过 pickerView 实例暴露出来的 `setColumnData` 方法修改其他列的数据源。 | function | - | - | - |
|
| column-change | 接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参,根据选中项和列下标进行判断,通过 pickerView 实例暴露出来的 `setColumnData` 方法修改其他列的数据源。 | function | - | - | - |
|
||||||
|
|||||||
@ -260,6 +260,7 @@ function handleConfirm({ value }) {
|
|||||||
| label-width | 设置左侧标题宽度 | string | - | 33% | - |
|
| label-width | 设置左侧标题宽度 | string | - | 33% | - |
|
||||||
| error | 是否为错误状态,错误状态时右侧内容为红色 | boolean | - | false | - |
|
| error | 是否为错误状态,错误状态时右侧内容为红色 | boolean | - | false | - |
|
||||||
| required | 表单属性,必填 | boolean | - | false | - |
|
| required | 表单属性,必填 | boolean | - | false | - |
|
||||||
|
| marker-side | 必填标记位置 | string | before / after | before | 1.12.0 |
|
||||||
| align-right | 选择器的值靠右展示 | boolean | - | false | - |
|
| align-right | 选择器的值靠右展示 | boolean | - | false | - |
|
||||||
| use-label-slot | label 使用插槽 | boolean | - | false | - |
|
| use-label-slot | label 使用插槽 | boolean | - | false | - |
|
||||||
| use-default-slot | 使用默认插槽 | boolean | - | false | - |
|
| use-default-slot | 使用默认插槽 | boolean | - | false | - |
|
||||||
|
|||||||
@ -48,7 +48,6 @@
|
|||||||
<wd-popup v-model="show" position="bottom" :close-on-click-modal="false" closable custom-style="height: 200px;" @close="handleClose"></wd-popup>
|
<wd-popup v-model="show" position="bottom" :close-on-click-modal="false" closable custom-style="height: 200px;" @close="handleClose"></wd-popup>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
## 禁用遮罩
|
## 禁用遮罩
|
||||||
|
|
||||||
通过设置 `modal` 属性为 `false`,你可以禁用遮罩层,使用户可以与底层内容进行交互。
|
通过设置 `modal` 属性为 `false`,你可以禁用遮罩层,使用户可以与底层内容进行交互。
|
||||||
@ -117,11 +116,11 @@ h5 滚动穿透不需要处理,组件已默认开启 `lock-scroll`。
|
|||||||
| custom-style | 自定义弹出层样式 | string | - | - | - |
|
| custom-style | 自定义弹出层样式 | string | - | - | - |
|
||||||
| modal | 是否显示遮罩 | boolean | - | true | - |
|
| modal | 是否显示遮罩 | boolean | - | true | - |
|
||||||
| modal-style | 自定义modal蒙层样式 | string | - | - | - |
|
| modal-style | 自定义modal蒙层样式 | string | - | - | - |
|
||||||
| hide-when-close | 是否当关闭时将弹出层隐藏(display: none) | boolean | - | true | - |
|
| hide-when-close | 是否当关闭时将弹出层隐藏(display: none) | boolean | - | true | - |
|
||||||
| lazy-render | 弹层内容懒渲染,触发展示时才渲染内容 | boolean | - | true | - |
|
| lazy-render | 弹层内容懒渲染,触发展示时才渲染内容 | boolean | - | true | - |
|
||||||
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离(iphone X 类型的机型) | boolean | - | false | - |
|
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离(iphone X 类型的机型) | boolean | - | false | - |
|
||||||
| transition | 动画类型,参见 wd-transition 组件的name | string | fade / fade-up / fade-down / fade-left / fade-right / slide-up / slide-down / slide-left / slide-right / zoom-in | - | - |
|
| transition | 动画类型,参见 wd-transition 组件的name | string | fade / fade-up / fade-down / fade-left / fade-right / slide-up / slide-down / slide-left / slide-right / zoom-in | - | - |
|
||||||
| lockScroll | 是否锁定背景滚动,锁定时蒙层里的内容也将无法滚动 | boolean | - | true | 0.1.30 |
|
| lock-scroll | 是否锁定背景滚动,锁定时蒙层里的内容也将无法滚动 | boolean | - | true | 0.1.30 |
|
||||||
| root-portal | 是否从页面中脱离出来,用于解决各种 fixed 失效问题 | boolean | - | false | 1.11.0 |
|
| root-portal | 是否从页面中脱离出来,用于解决各种 fixed 失效问题 | boolean | - | false | 1.11.0 |
|
||||||
|
|
||||||
## Events
|
## Events
|
||||||
|
|||||||
@ -67,6 +67,14 @@ function changeValue({ value }) {
|
|||||||
<wd-rate v-model="value" allow-half />
|
<wd-rate v-model="value" allow-half />
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## 允许清空评分
|
||||||
|
|
||||||
|
设置 `clearable` 属性,当 clearable 属性设置为 true,再次点击相同的值时,可以将值重置为 0。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-rate v-model="value" clearable />
|
||||||
|
```
|
||||||
|
|
||||||
## Attributes
|
## Attributes
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||||
@ -83,6 +91,7 @@ function changeValue({ value }) {
|
|||||||
| disabled | 是否禁用 | boolean | - | false | - |
|
| disabled | 是否禁用 | boolean | - | false | - |
|
||||||
| disabled-color | 禁用的图标颜色 | string | - | linear-gradient(315deg, rgba(177,177,177,1) 0%,rgba(199,199,199,1) 100%) | - |
|
| disabled-color | 禁用的图标颜色 | string | - | linear-gradient(315deg, rgba(177,177,177,1) 0%,rgba(199,199,199,1) 100%) | - |
|
||||||
| allow-half | 是否允许半选 | boolean | - | false | 1.7.0 |
|
| allow-half | 是否允许半选 | boolean | - | false | 1.7.0 |
|
||||||
|
| clearable | 是否允许再次点击后清除 | boolean | - | false | 1.13.0 |
|
||||||
|
|
||||||
## Events
|
## Events
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
# Resize 监听元素尺寸变化
|
# Resize 监听元素尺寸变化
|
||||||
|
|
||||||
当组件包裹的文档流尺寸发生变化时,触发 `size` 事件。一般用于监听 dom 内容更新时导致的 dom 尺寸位置的变化,重新获取 dom 尺寸和位置,进行内容展示的计算操作。
|
当组件包裹的文档流尺寸发生变化时,触发 `resize` 事件。一般用于监听 dom 内容更新时导致的 dom 尺寸位置的变化,重新获取 dom 尺寸和位置,进行内容展示的计算操作。
|
||||||
|
|
||||||
|
|
||||||
## 基本用法
|
## 基本用法
|
||||||
@ -30,8 +30,22 @@ function handleResize(detail: Record<string, string | number>) {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Attributes
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||||
|
|-----|------|-----|-------|--------|---------|
|
||||||
|
| custom-style | 自定义根节点样式 | string | - | - | - |
|
||||||
|
| custom-class | 自定义根节点样式类 | string | - | - | - |
|
||||||
|
| custom-container-class | 自定义容器样式类 | string | - | - | - |
|
||||||
|
|
||||||
## Events
|
## Events
|
||||||
|
|
||||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||||
|--------|------|-----|---------|
|
|--------|------|-----|---------|
|
||||||
| resize | 尺寸发生变化时触发 | `{width: number, height: number, top: number, right: number, bottom: number, left: number}` | - |
|
| resize | 尺寸发生变化时触发 | `{width: number, height: number, top: number, right: number, bottom: number, left: number}` | - |
|
||||||
|
|
||||||
|
## Slots
|
||||||
|
|
||||||
|
| 插槽名称 | 说明 | 最低版本 |
|
||||||
|
|---------|------|---------|
|
||||||
|
| default | 需要监听尺寸变化的内容 | - |
|
||||||
|
|||||||
@ -56,9 +56,16 @@ version: 1.11.0
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Attributes
|
||||||
|
|
||||||
|
该组件无属性配置。
|
||||||
|
|
||||||
|
## Events
|
||||||
|
|
||||||
|
该组件无事件。
|
||||||
|
|
||||||
## Slots
|
## Slots
|
||||||
|
|
||||||
| 名称 | 说明 | 最低版本 |
|
| 名称 | 说明 | 最低版本 |
|
||||||
| ------- | ---------------------------- | -------- |
|
| ------- | ---------------------------- | -------- |
|
||||||
| default | 默认插槽,用于渲染传送内容 | - |
|
| default | 默认插槽,用于渲染传送内容 | 1.11.0 |
|
||||||
@ -74,14 +74,14 @@ const list = ref([
|
|||||||
value: '李雷',
|
value: '李雷',
|
||||||
disabled: false,
|
disabled: false,
|
||||||
payload: {
|
payload: {
|
||||||
avatar: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg'
|
avatar: 'https://wot-ui.cn/assets/redpanda.jpg'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: '韩梅梅',
|
value: '韩梅梅',
|
||||||
disabled: false,
|
disabled: false,
|
||||||
payload: {
|
payload: {
|
||||||
avatar: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg'
|
avatar: 'https://wot-ui.cn/assets/capybara.jpg'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
|
|||||||
@ -342,6 +342,7 @@ function handleConfirm({ value, selectedItems }) {
|
|||||||
| label-width | 左侧标题宽度 | string | - | 33% | - |
|
| label-width | 左侧标题宽度 | string | - | 33% | - |
|
||||||
| error | 错误状态(右侧内容红色) | boolean | - | false | - |
|
| error | 错误状态(右侧内容红色) | boolean | - | false | - |
|
||||||
| required | 必填样式 | boolean | - | false | - |
|
| required | 必填样式 | boolean | - | false | - |
|
||||||
|
| marker-side | 必填标记位置 | string | before / after | before | 1.12.0 |
|
||||||
| align-right | 值靠右展示 | boolean | - | false | - |
|
| align-right | 值靠右展示 | boolean | - | false | - |
|
||||||
| before-confirm | 确定前校验函数,接收(value,resolve)参数 | function | - | - | - |
|
| before-confirm | 确定前校验函数,接收(value,resolve)参数 | function | - | - | - |
|
||||||
| select-size | picker内部选项组尺寸 | string | large | - | - |
|
| select-size | picker内部选项组尺寸 | string | large | - | - |
|
||||||
|
|||||||
@ -49,7 +49,7 @@
|
|||||||
需要自定义图片时,可以在 `image` 属性中传入任意图片 URL。
|
需要自定义图片时,可以在 `image` 属性中传入任意图片 URL。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<wd-status-tip image="https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg" tip="查看我的头像" />
|
<wd-status-tip image="https://wot-ui.cn/assets/panda.jpg" tip="查看我的头像" />
|
||||||
```
|
```
|
||||||
|
|
||||||
## 自定义图片内容
|
## 自定义图片内容
|
||||||
@ -64,6 +64,32 @@
|
|||||||
</wd-status-tip>
|
</wd-status-tip>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## 自定义底部内容
|
||||||
|
|
||||||
|
使用插槽 `bottom` 可以在提示底部渲染自定义内容(如操作按钮)。推荐在插槽中包一层容器,便于控制布局与与上方内容的间距。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-status-tip image="content" tip="当前搜索无结果">
|
||||||
|
<template #bottom>
|
||||||
|
<view class="bottom-actions">
|
||||||
|
<wd-button type="info">重新加载</wd-button>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</wd-status-tip>
|
||||||
|
```
|
||||||
|
|
||||||
|
建议样式(可在页面或全局样式中添加):
|
||||||
|
|
||||||
|
```css
|
||||||
|
.bottom-actions {
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
## Attributes
|
## Attributes
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||||
@ -86,3 +112,4 @@
|
|||||||
| name | 说明 | 最低版本 |
|
| name | 说明 | 最低版本 |
|
||||||
| ------- | ------------------------ | -------- |
|
| ------- | ------------------------ | -------- |
|
||||||
| image | 图片内容 | 1.3.12 |
|
| image | 图片内容 | 1.3.12 |
|
||||||
|
| bottom | 底部内容 | $LOWEST_VERSION$ |
|
||||||
@ -18,11 +18,11 @@
|
|||||||
const current = ref<number>(0)
|
const current = ref<number>(0)
|
||||||
|
|
||||||
const swiperList = ref([
|
const swiperList = ref([
|
||||||
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
|
'https://wot-ui.cn/assets/redpanda.jpg',
|
||||||
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
|
'https://wot-ui.cn/assets/capybara.jpg',
|
||||||
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
|
'https://wot-ui.cn/assets/panda.jpg',
|
||||||
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
|
'https://wot-ui.cn/assets/moon.jpg',
|
||||||
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg'
|
'https://wot-ui.cn/assets/meng.jpg'
|
||||||
])
|
])
|
||||||
function handleClick(e) {
|
function handleClick(e) {
|
||||||
console.log(e)
|
console.log(e)
|
||||||
@ -67,7 +67,7 @@ const videoList = ref([
|
|||||||
'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_115503.mp4',
|
'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_115503.mp4',
|
||||||
'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_150752.mp4',
|
'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_150752.mp4',
|
||||||
'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_155516.mp4',
|
'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_155516.mp4',
|
||||||
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg'
|
'https://wot-ui.cn/assets/moon.jpg'
|
||||||
])
|
])
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -259,10 +259,10 @@ const videoList = ref([
|
|||||||
const current = ref<number>(0)
|
const current = ref<number>(0)
|
||||||
|
|
||||||
const customSwiperList = ref([
|
const customSwiperList = ref([
|
||||||
{ url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg', title: '小熊猫!' },
|
{ url: 'https://wot-ui.cn/assets/redpanda.jpg', title: '小熊猫!' },
|
||||||
{ url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg', title: '卡!皮!巴!拉!' },
|
{ url: 'https://wot-ui.cn/assets/capybara.jpg', title: '卡!皮!巴!拉!' },
|
||||||
{ url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg', title: '大熊猫!' },
|
{ url: 'https://wot-ui.cn/assets/panda.jpg', title: '大熊猫!' },
|
||||||
{ url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg', title: '诗画中国!' }
|
{ url: 'https://wot-ui.cn/assets/moon.jpg', title: '诗画中国!' }
|
||||||
])
|
])
|
||||||
```
|
```
|
||||||
```scss
|
```scss
|
||||||
@ -299,6 +299,27 @@ const current = ref <number>(0)
|
|||||||
const isLoop = ref(false)
|
const isLoop = ref(false)
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## 插槽用法
|
||||||
|
|
||||||
|
通过默认插槽可以自定义轮播项的内容。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-swiper
|
||||||
|
:list="swiperList"
|
||||||
|
autoplay
|
||||||
|
v-model:current="current"
|
||||||
|
:indicator="{ type: 'dots-bar' }"
|
||||||
|
@click="handleClick"
|
||||||
|
@change="onChange"
|
||||||
|
>
|
||||||
|
<template #default="{ item }">
|
||||||
|
<image :src="item as string" mode="aspectFill" style="width: 100%; height: 100%" />
|
||||||
|
</template>
|
||||||
|
</wd-swiper>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
## Attributes
|
## Attributes
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||||
@ -383,7 +404,8 @@ const isLoop = ref(false)
|
|||||||
|
|
||||||
| name | 说明 | 参数 | 最低版本 |
|
| name | 说明 | 参数 | 最低版本 |
|
||||||
| --------- | ------------ | ------------------------------------ | -------- |
|
| --------- | ------------ | ------------------------------------ | -------- |
|
||||||
| indicator | 自定义指示器 | `{ current: number, total: number }` | 0.1.22 |
|
| indicator | 自定义指示器 | `{ current: number, total: number }` | 1.13.0 |
|
||||||
|
| default | item展示内容 | `{ item: string | SwiperList, index: number }` | 1.13.0 |
|
||||||
|
|
||||||
|
|
||||||
## 外部样式类
|
## 外部样式类
|
||||||
|
|||||||
@ -84,7 +84,7 @@ const tabbar = ref(1)
|
|||||||
<wd-tabbar-item :value="2" title="首页" icon="home"></wd-tabbar-item>
|
<wd-tabbar-item :value="2" title="首页" icon="home"></wd-tabbar-item>
|
||||||
<wd-tabbar-item :value="2" icon="cart" title="分类">
|
<wd-tabbar-item :value="2" icon="cart" title="分类">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<wd-img round height="40rpx" width="40rpx" src="https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg"></wd-img>
|
<wd-img round height="40rpx" width="40rpx" src="https://wot-ui.cn/assets/panda.jpg"></wd-img>
|
||||||
</template>
|
</template>
|
||||||
</wd-tabbar-item>
|
</wd-tabbar-item>
|
||||||
<wd-tabbar-item :value="3" title="我的" icon="user"></wd-tabbar-item>
|
<wd-tabbar-item :value="3" title="我的" icon="user"></wd-tabbar-item>
|
||||||
|
|||||||
@ -270,6 +270,7 @@ function handlePopupShow() {
|
|||||||
| animated | 是否开启切换标签内容时的转场动画 | boolean | - | false | - |
|
| animated | 是否开启切换标签内容时的转场动画 | boolean | - | false | - |
|
||||||
| duration | 切换动画过渡时间,单位毫秒 | number | - | 300 | - |
|
| duration | 切换动画过渡时间,单位毫秒 | number | - | 300 | - |
|
||||||
| slidable | 是否开启滚动导航 | TabsSlidable | `always` | `auto` | 1.4.0 |
|
| slidable | 是否开启滚动导航 | TabsSlidable | `always` | `auto` | 1.4.0 |
|
||||||
|
| showScrollbar | 标签可滑动时是否显示滚动条 | boolean | - | false | $LOWEST_VERSION$ |
|
||||||
| badge-props | 自定义徽标的属性,传入的对象会被透传给 [Badge 组件的 props](/component/badge#attributes) | BadgeProps | - | - | 1.4.0 |
|
| badge-props | 自定义徽标的属性,传入的对象会被透传给 [Badge 组件的 props](/component/badge#attributes) | BadgeProps | - | - | 1.4.0 |
|
||||||
|
|
||||||
## Tab Attributes
|
## Tab Attributes
|
||||||
|
|||||||
@ -61,7 +61,7 @@
|
|||||||
|
|
||||||
## 脱敏
|
## 脱敏
|
||||||
|
|
||||||
设置 `format` 属性,当 `mode` 为 ` phone``name `时生效。
|
设置 `format` 属性,当 `mode` 为 `phone`或`name`时生效。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<wd-text text="李四" mode="name" :format="true"></wd-text>
|
<wd-text text="李四" mode="name" :format="true"></wd-text>
|
||||||
@ -90,14 +90,7 @@
|
|||||||
设置 `prefix` `suffix` 插槽。
|
设置 `prefix` `suffix` 插槽。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<wd-text
|
<wd-text text="12345678901" mode="phone" format type="primary" prefix="Prefix" suffix="Suffix" />
|
||||||
text="12345678901"
|
|
||||||
mode="phone"
|
|
||||||
format
|
|
||||||
type="primary"
|
|
||||||
prefix="Prefix"
|
|
||||||
suffix="Suffix"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<wd-text text="12345678901" mode="phone" format type="primary">
|
<wd-text text="12345678901" mode="phone" format type="primary">
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
@ -112,13 +105,7 @@
|
|||||||
设置 `mode="price"` 。
|
设置 `mode="price"` 。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<wd-text
|
<wd-text text="16354.156" mode="price" type="success" decoration="line-through" prefix="¥" />
|
||||||
text="16354.156"
|
|
||||||
mode="price"
|
|
||||||
type="success"
|
|
||||||
decoration="line-through"
|
|
||||||
prefix="¥"
|
|
||||||
/>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## 文字装饰
|
## 文字装饰
|
||||||
@ -147,31 +134,37 @@ function clickTest() {
|
|||||||
## Attributes
|
## Attributes
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||||
| ---------- | ------------------------------------------------------------------ | ------- | ------------------------------------------------------------------ | ------- | ---------------- |
|
| ---------- | ------------------------------------------------------------------ | --------------- | ------------------------------------------------------- | ------- | -------- |
|
||||||
| type | 主题类型 | string | 'primary' / 'error' / 'warning' / 'success' | default | 1.3.4 |
|
| type | 主题类型 | string | 'primary' / 'error' / 'warning' / 'success' / 'default' | default | 1.3.4 |
|
||||||
| text | 文字 | string / number | - | | 1.3.4 |
|
| text | 文字 | string / number | - | - | 1.3.4 |
|
||||||
| size | 字体大小 | string | - | - | 1.3.4 |
|
| size | 字体大小 | string | - | - | 1.3.4 |
|
||||||
| mode | 文本处理的匹配模式 | string | 'text-普通文本' / 'date - 日期' / 'phone - 手机号' / 'name - 姓名' / 'price - 金额' | text | 1.3.4+ |
|
| mode | 文本处理的匹配模式 | string | 'text' / 'date' / 'phone' / 'name' / 'price' | text | 1.3.4+ |
|
||||||
| bold | 是否粗体,默认 normal | boolean | - | false | 1.3.4 |
|
| bold | 是否粗体,默认 normal | boolean | - | false | 1.3.4 |
|
||||||
| format | 是否脱敏 | boolean | 当 mode 为 phone 和 name 时生效 | false | 1.3.4 |
|
| format | 是否脱敏 | boolean | 当 mode 为 phone 和 name 时生效 | false | 1.3.4 |
|
||||||
| color | 文字颜色 | string | - | - | 1.3.4 |
|
| color | 文字颜色 | string | - | - | 1.3.4 |
|
||||||
| lines | 文本显示的行数,如果设置,超出此行数,将会显示省略号。最大值为 5。 | Number | - | - | 1.3.4 |
|
| lines | 文本显示的行数,如果设置,超出此行数,将会显示省略号。最大值为 5。 | number | - | - | 1.3.4 |
|
||||||
| lineHeight | 文本行高 | string | - | | 1.3.4 |
|
| lineHeight | 文本行高 | string | - | - | 1.3.4 |
|
||||||
| decoration | 文字装饰,下划线,中划线等 | string | underline/line-through/overline | | 1.3.4+ |
|
| decoration | 文字装饰,下划线,中划线等 | string | 'underline' / 'line-through' / 'overline' | none | 1.3.4+ |
|
||||||
| prefix | 前置插槽 | string | - | | 1.3.4+ |
|
| prefix | 前置内容 | string | - | - | 1.3.4+ |
|
||||||
| suffix | 后置插槽 | string | - | | 1.3.4+ |
|
| suffix | 后置内容 | string | - | - | 1.3.4+ |
|
||||||
|
| call | mode=phone 时,点击文本是否拨打电话 | boolean | - | false | 1.3.4 |
|
||||||
|
|
||||||
## Events
|
## Events
|
||||||
|
|
||||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||||
| -------- | -------------- | ----- | ---------------- |
|
| -------- | -------------- | ----- | -------- |
|
||||||
| click | 标签点击时触发 | event | 1.3.4 |
|
| click | 标签点击时触发 | event | 1.3.4 |
|
||||||
|
|
||||||
## Slots
|
## Slots
|
||||||
|
|
||||||
|
| 插槽名称 | 说明 | 最低版本 |
|
||||||
|
| -------- | -------- | -------- |
|
||||||
|
| prefix | 前置插槽 | 1.3.4 |
|
||||||
|
| suffix | 后置插槽 | 1.3.4 |
|
||||||
|
|
||||||
## 外部样式类
|
## 外部样式类
|
||||||
|
|
||||||
| 类名 | 说明 | 最低版本 |
|
| 类名 | 说明 | 最低版本 |
|
||||||
| ------------ | ---------- | ---------------- |
|
| ------------ | ---------- | -------- |
|
||||||
| custom-class | 根节点样式 | 1.3.4 |
|
| custom-class | 根节点样式 | 1.3.4 |
|
||||||
| custom-style | 根节点样式 | 1.3.4 |
|
| custom-style | 根节点样式 | 1.3.4 |
|
||||||
|
|||||||
@ -154,6 +154,7 @@ const value = ref<string>('')
|
|||||||
| center | 有 label 时设置标题和输入框垂直居中(默认顶部居中) | boolean | - | false | - |
|
| center | 有 label 时设置标题和输入框垂直居中(默认顶部居中) | boolean | - | false | - |
|
||||||
| no-border | 非 cell 类型下是否隐藏下划线 | boolean | - | false | - |
|
| no-border | 非 cell 类型下是否隐藏下划线 | boolean | - | false | - |
|
||||||
| required | cell 类型下必填样式 | boolean | - | false | - |
|
| required | cell 类型下必填样式 | boolean | - | false | - |
|
||||||
|
| marker-side | 必填标记的位置 | string | before / after | before | 1.12.0 |
|
||||||
| prop | 表单域 `model` 字段名(表单校验必填) | string | - | - | - |
|
| prop | 表单域 `model` 字段名(表单校验必填) | string | - | - | - |
|
||||||
| rules | 表单验证规则 | FormItemRule[] | - | [] | - |
|
| rules | 表单验证规则 | FormItemRule[] | - | [] | - |
|
||||||
| clearTrigger | 显示清除图标的时机:always(输入框非空时展示)/ focus(聚焦且非空时展示) | InputClearTrigger | `focus`/`always` | `always` | 1.3.7 |
|
| clearTrigger | 显示清除图标的时机:always(输入框非空时展示)/ focus(聚焦且非空时展示) | InputClearTrigger | `focus`/`always` | `always` | 1.3.7 |
|
||||||
|
|||||||
@ -4,6 +4,8 @@
|
|||||||
|
|
||||||
:::tip 提示
|
:::tip 提示
|
||||||
`Toast` 自 1.7.0 版本起支持通过 `props` 属性控制组件样式,字段见[props](#props),需要注意的是函数式调用api的`options`优先级高于`props`。
|
`Toast` 自 1.7.0 版本起支持通过 `props` 属性控制组件样式,字段见[props](#props),需要注意的是函数式调用api的`options`优先级高于`props`。
|
||||||
|
|
||||||
|
全局调用方案见 [wot-starter](https://starter.wot-ui.cn/guide/feedback.html),支持在路由导航守卫和网络请求拦截器等场景使用的可全局调用的反馈组件。
|
||||||
:::
|
:::
|
||||||
|
|
||||||
## 基本用法
|
## 基本用法
|
||||||
|
|||||||
254
docs/component/tour.md
Normal file
254
docs/component/tour.md
Normal file
@ -0,0 +1,254 @@
|
|||||||
|
# Guide 漫游组件
|
||||||
|
|
||||||
|
用于引导用户逐步了解应用功能的组件,可以高亮显示页面中的特定元素并提供说明。
|
||||||
|
|
||||||
|
## 基本使用
|
||||||
|
|
||||||
|
通过 `steps` 属性设置引导步骤,通过 `v-model` 控制显示隐藏。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="tour-item" id="step1">
|
||||||
|
<text class="tour-title">第一步</text>
|
||||||
|
<text class="tour-content">这是引导的第一步,介绍基本功能</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="tour-item" id="step2">
|
||||||
|
<text class="tour-title">第二步</text>
|
||||||
|
<text class="tour-content">这是引导的第二步,展示更多功能</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<wd-tour
|
||||||
|
:model-value="showTour"
|
||||||
|
:steps="steps"
|
||||||
|
v-model:current="current"
|
||||||
|
@finish="onFinish"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
const showTour = ref(true)
|
||||||
|
const current = ref(0)
|
||||||
|
|
||||||
|
const steps = [
|
||||||
|
{
|
||||||
|
element: '#step1',
|
||||||
|
content: '这是第一步的说明'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
element: '#step2',
|
||||||
|
content: '这是第二步的说明'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
function onFinish() {
|
||||||
|
console.log('引导完成')
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 自定义引导内容
|
||||||
|
|
||||||
|
通过 `content` 插槽可以自定义引导内容。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-tour :model-value="showTour" :steps="steps">
|
||||||
|
<template #content>
|
||||||
|
<view class="custom-content">
|
||||||
|
<wd-icon name="help-circle-filled" size="22px"></wd-icon>
|
||||||
|
<text class="custom-text">自定义引导内容区域</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</wd-tour>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 自定义高亮区域
|
||||||
|
|
||||||
|
通过 `highlight` 插槽可以自定义高亮区域样式。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-tour :model-value="showTour" :steps="steps">
|
||||||
|
<template #highlight="{ elementInfo }">
|
||||||
|
<view class="custom-highlight" :style="getCustomHighlightStyle(elementInfo)"></view>
|
||||||
|
</template>
|
||||||
|
</wd-tour>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 自定义按钮
|
||||||
|
|
||||||
|
通过 `prev`、`next`、`skip`、`finish` 插槽可以自定义按钮。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-tour :model-value="showTour" :steps="steps" next-text="继续" finish-text="知道了">
|
||||||
|
<template #next>
|
||||||
|
<view class="custom-button custom-next">下一步</view>
|
||||||
|
</template>
|
||||||
|
<template #finish>
|
||||||
|
<view class="custom-button custom-finish">完成</view>
|
||||||
|
</template>
|
||||||
|
</wd-tour>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 点击蒙版继续
|
||||||
|
|
||||||
|
通过 `click-mask-next` 属性可以设置点击蒙版是否可以下一步。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-tour
|
||||||
|
:model-value="showTour"
|
||||||
|
:steps="steps"
|
||||||
|
:click-mask-next="true"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 自定义蒙版样式
|
||||||
|
|
||||||
|
通过 `mask-color`、`offset`、`border-radius`、`padding` 属性可以自定义蒙版样式。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-tour
|
||||||
|
:model-value="showTour"
|
||||||
|
:steps="steps"
|
||||||
|
mask-color="rgba(255, 0, 0, 0.6)"
|
||||||
|
:offset="40"
|
||||||
|
:border-radius="15"
|
||||||
|
:padding="20"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 关闭蒙版
|
||||||
|
|
||||||
|
通过 `mask` 属性可以控制是否显示蒙版。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-tour
|
||||||
|
:model-value="showTour"
|
||||||
|
:steps="steps"
|
||||||
|
:mask="false"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 控制当前步骤
|
||||||
|
|
||||||
|
通过 `v-model:current` 可以控制当前步骤。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<view>
|
||||||
|
<wd-button @click="current = 2">跳转到第三步</wd-button>
|
||||||
|
<wd-tour
|
||||||
|
:model-value="showTour"
|
||||||
|
:steps="steps"
|
||||||
|
v-model:current="current"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Attributes
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|
|------|------|------|--------|--------|
|
||||||
|
| v-model | 是否显示引导组件 | boolean | - | false |
|
||||||
|
| steps | 引导步骤列表 | array | - | [] |
|
||||||
|
| current | 当前步骤索引,支持 v-model:current 双向绑定 | number | - | 0 |
|
||||||
|
| mask | 蒙版是否显示 | boolean | - | true |
|
||||||
|
| mask-color | 蒙版颜色(支持 rgba 格式) | string | - | rgba(0, 0, 0, 0.5) |
|
||||||
|
| offset | 引导提示框与高亮框的间距 | number | - | 20 |
|
||||||
|
| duration | 动画持续时间(毫秒) | number | - | 300 |
|
||||||
|
| border-radius | 高亮区域的圆角大小 | number | - | 8 |
|
||||||
|
| padding | 高亮区域的内边距 | number | - | 10 |
|
||||||
|
| prev-text | 上一步按钮文字 | string | - | 上一步 |
|
||||||
|
| next-text | 下一步按钮文字 | string | - | 下一步 |
|
||||||
|
| skip-text | 跳过按钮文字 | string | - | 跳过 |
|
||||||
|
| finish-text | 完成按钮文字 | string | - | 完成 |
|
||||||
|
| bottom-safety-offset | 底部安全偏移量,用于滚动计算时确保元素周围有足够的空间 | number | - | 100 |
|
||||||
|
| top-safety-offset | 顶部安全偏移量,用于滚动计算时确保元素周围有足够的空间 | number | - | 0 |
|
||||||
|
| custom-nav | 是否自定义顶部导航栏 | boolean | - | false |
|
||||||
|
| click-mask-next | 点击蒙版是否可以下一步 | boolean | - | false |
|
||||||
|
| z-index | 引导组件的层级 | number | - | 999998 |
|
||||||
|
| show-tour-buttons | 是否显示引导按钮 | boolean | - | true |
|
||||||
|
|
||||||
|
## Steps 数据结构
|
||||||
|
|
||||||
|
| 属性 | 说明 | 类型 |
|
||||||
|
|------|------|------|
|
||||||
|
| element | 需要高亮的元素选择器 | string |
|
||||||
|
| content | 引导文字内容(支持富文本) | string |
|
||||||
|
|
||||||
|
## Events
|
||||||
|
|
||||||
|
| 事件名 | 说明 | 参数 |
|
||||||
|
|--------|------|------|
|
||||||
|
| change | 步骤改变时触发 | `{currentIndex: number }` |
|
||||||
|
| prev | 点击上一步按钮时触发 | `{ oldCurrent: number, current: number, total: number, isUp: number }` |
|
||||||
|
| next | 点击下一步按钮时触发 | `{ oldCurrent: number, current: number, total: number, isUp: number }` |
|
||||||
|
| finish | 点击完成按钮时触发 | `{ current: number, total: number }` |
|
||||||
|
| skip | 点击跳过按钮时触发 | `{ current: number, total: number }` |
|
||||||
|
| error | 查找引导元素出错时触发 | `{ message: string, element: string }` |
|
||||||
|
|
||||||
|
## Slots
|
||||||
|
|
||||||
|
| 插槽名 | 说明 | 参数 |
|
||||||
|
|--------|------|------|
|
||||||
|
| highlight | 自定义高亮区域 | elementInfo: 元素位置信息 |
|
||||||
|
| content | 自定义引导内容 | - |
|
||||||
|
| prev | 自定义上一步按钮 | - |
|
||||||
|
| next | 自定义下一步按钮 | - |
|
||||||
|
| skip | 自定义跳过按钮 | - |
|
||||||
|
| finish | 自定义完成按钮 | - |
|
||||||
|
|
||||||
|
## Methods
|
||||||
|
|
||||||
|
通过 ref 可以获取到组件实例,调用组件提供的方法:
|
||||||
|
|
||||||
|
| 方法名 | 说明 | 参数 |
|
||||||
|
|--------|------|------|
|
||||||
|
| handlePrev | 切换到上一步 | - |
|
||||||
|
| handleNext | 切换到下一步 | - |
|
||||||
|
| handleSkip | 跳过引导 | - |
|
||||||
|
| handleFinish | 完成引导 | - |
|
||||||
|
|
||||||
|
## 注意事项
|
||||||
|
|
||||||
|
1. 确保要高亮的元素在页面中存在且可选择
|
||||||
|
2. 在自定义导航栏的情况下,需要设置 `custom-nav` 和适当的 `top-safety-offset` 值
|
||||||
|
3. 引导组件会自动处理滚动,确保高亮元素在可视区域内
|
||||||
|
4. 可以通过 `mask` 属性控制是否显示遮罩层
|
||||||
|
5. 使用自定义高亮区域时,注意避免遮挡引导操作按钮
|
||||||
|
6. 在不同平台(H5、微信小程序等)中,插槽的使用方式可能略有差异
|
||||||
|
7. 建议在使用时添加 `v-if` 或 `v-show` 条件渲染,以确保组件正确初始化
|
||||||
|
|
||||||
|
## 主题定制
|
||||||
|
|
||||||
|
组件支持通过 CSS 变量定制主题,可以修改以下变量:
|
||||||
|
|
||||||
|
```scss
|
||||||
|
// 蒙版颜色
|
||||||
|
--wd-tour-mask-color: rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
// 引导框背景色
|
||||||
|
--wd-tour-popover-bg-color: #ffffff;
|
||||||
|
|
||||||
|
// 按钮背景色
|
||||||
|
--wd-tour-button-primary-bg-color: #007aff;
|
||||||
|
|
||||||
|
// 按钮文字颜色
|
||||||
|
--wd-tour-button-color: #ffffff;
|
||||||
|
```
|
||||||
|
|
||||||
|
## 常见问题
|
||||||
|
|
||||||
|
### 为什么在微信小程序中自定义插槽不显示?
|
||||||
|
|
||||||
|
在微信小程序中使用条件渲染与插槽结合时可能会出现问题,建议使用 `v-show` 替代 `v-if` 或将条件判断移到插槽内部。
|
||||||
|
|
||||||
|
### 为什么高亮区域会闪烁?
|
||||||
|
|
||||||
|
这通常是因为组件初始化时元素信息尚未获取完成导致的。组件已优化初始状态,避免闪烁问题。
|
||||||
|
|
||||||
|
### 如何解决点击问题?
|
||||||
|
|
||||||
|
如果自定义高亮区域遮挡了操作按钮,可以调整 `z-index` 或修改自定义高亮区域的样式,确保按钮可点击。
|
||||||
@ -77,9 +77,18 @@
|
|||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||||
|--------------|--------------|------------------|----------------|---------|----------|
|
|--------------|--------------|------------------|----------------|---------|----------|
|
||||||
| show | 是否展示组件 | boolean | - | - | - |
|
| show | 是否展示组件 | boolean | - | - | - |
|
||||||
| name | 动画类型 | string | `TransitionName` | - | - |
|
| name | 动画类型 | string / array | `TransitionName` | - | - |
|
||||||
| duration | 动画执行时间 | number / boolean | - | 300(ms) | - |
|
| duration | 动画执行时间 | number / object / boolean | - | 300(ms) | - |
|
||||||
| custom-style | 自定义样式 | string | - | - | - |
|
| custom-style | 自定义样式 | string | - | - | - |
|
||||||
|
| custom-class | 自定义根节点样式类 | string | - | - | - |
|
||||||
|
| lazy-render | 弹层内容懒渲染 | boolean | - | false | - |
|
||||||
|
| destroy | 是否在动画结束时销毁子节点 | boolean | - | true | - |
|
||||||
|
| enter-class | 进入过渡的开始状态 | string | - | - | - |
|
||||||
|
| enter-active-class | 进入过渡的激活状态 | string | - | - | - |
|
||||||
|
| enter-to-class | 进入过渡的结束状态 | string | - | - | - |
|
||||||
|
| leave-class | 离开过渡的开始状态 | string | - | - | - |
|
||||||
|
| leave-active-class | 离开过渡的激活状态 | string | - | - | - |
|
||||||
|
| leave-to-class | 离开过渡的结束状态 | string | - | - | - |
|
||||||
| disable-touch-move | 是否阻止触摸滚动 | boolean | - | false | 1.11.0 |
|
| disable-touch-move | 是否阻止触摸滚动 | boolean | - | false | 1.11.0 |
|
||||||
|
|
||||||
### TransitionName 动画类型
|
### TransitionName 动画类型
|
||||||
@ -103,12 +112,19 @@
|
|||||||
|
|
||||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||||
| ---------------- | ---------- | ---- | -------- |
|
| ---------------- | ---------- | ---- | -------- |
|
||||||
| beforeenter | 进入前触发 | - | - |
|
| before-enter | 进入前触发 | - | - |
|
||||||
| enter | 进入时触发 | - | - |
|
| enter | 进入时触发 | - | - |
|
||||||
| afterenter | 进入后触发 | - | - |
|
| after-enter | 进入后触发 | - | - |
|
||||||
| beforeleave | 离开前触发 | - | - |
|
| before-leave | 离开前触发 | - | - |
|
||||||
| leave | 离开时触发 | - | - |
|
| leave | 离开时触发 | - | - |
|
||||||
| afterleave | 离开后触发 | - | - |
|
| after-leave | 离开后触发 | - | - |
|
||||||
|
| click | 点击时触发 | - | - |
|
||||||
|
|
||||||
|
## Slots
|
||||||
|
|
||||||
|
| 插槽名称 | 说明 | 最低版本 |
|
||||||
|
|---------|------|---------|
|
||||||
|
| default | 需要应用动画效果的内容 | - |
|
||||||
|
|
||||||
## 外部样式类
|
## 外部样式类
|
||||||
|
|
||||||
|
|||||||
@ -655,12 +655,55 @@ const action: string = 'https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86e
|
|||||||
|
|
||||||
| name | 说明 | 最低版本 |
|
| name | 说明 | 最低版本 |
|
||||||
| ----- | -------------------------------------------------------------------------------------- | -------- |
|
| ----- | -------------------------------------------------------------------------------------- | -------- |
|
||||||
| image | 图片,全平台支持 | - |
|
| image | 图片,全平台支持,微信支持平台使用`chooseMedia`实现 | - |
|
||||||
| video | 视频,全平台支持 | 1.3.0 |
|
| video | 视频,全平台支持,微信支持平台使用`chooseMedia`实现 | 1.3.0 |
|
||||||
| media | 图片和视频,仅微信支持,使用`chooseMedia`实现 | 1.3.0 |
|
| media | 图片和视频,仅微信支持,使用`chooseMedia`实现 | 1.3.0 |
|
||||||
| file | 从客户端会话选择图片和视频以外的文件,仅微信支持,使用`chooseMessageFile`实现 | 1.3.0 |
|
| file | 从客户端会话选择图片和视频以外的文件,仅微信支持,使用`chooseMessageFile`实现 | 1.3.0 |
|
||||||
| all | 全部类型的文件,仅微信和 H5 支持,微信使用`chooseMessageFile`,H5 使用`chooseFile`实现 | 1.3.0 |
|
| all | 全部类型的文件,仅微信和 H5 支持,微信使用`chooseMessageFile`,H5 使用`chooseFile`实现 | 1.3.0 |
|
||||||
|
|
||||||
|
## 文件选择数量限制
|
||||||
|
|
||||||
|
不同平台的文件选择方法具有不同的最大选择数量限制,这些限制由 uni-app 平台 API 本身决定:
|
||||||
|
|
||||||
|
### 微信平台
|
||||||
|
|
||||||
|
微信小程序平台具有更丰富的文件选择能力和更高的数量上限:
|
||||||
|
|
||||||
|
| 选择方法 | 最大选择数量 | 说明 | 适用文件类型 |
|
||||||
|
| -------- | ------------ | ---- | ------------ |
|
||||||
|
| `chooseMedia` | 20 | 选择图片和视频时的最大数量限制 | accept 为 `image`、`video` 或 `media` 时使用 |
|
||||||
|
| `chooseMessageFile` | 100 | 从客户端会话选择文件时的最大数量限制 | accept 为 `file` 或 `all` 时使用 |
|
||||||
|
|
||||||
|
### H5平台
|
||||||
|
|
||||||
|
H5 平台支持多种文件选择方式:
|
||||||
|
|
||||||
|
| 选择方法 | 最大选择数量 | 说明 | 适用文件类型 |
|
||||||
|
| -------- | ------------ | ---- | ------------ |
|
||||||
|
| `chooseImage` | 9 | 选择图片时的最大数量限制 | accept 为 `image` 时使用 |
|
||||||
|
| `chooseVideo` | 1 | 不支持多选,只能选择单个视频文件 | accept 为 `video` 时使用 |
|
||||||
|
| `chooseFile` | 100 | 选择文件时的最大数量限制 | accept 为 `all` 时使用 |
|
||||||
|
|
||||||
|
::: warning H5平台特别说明
|
||||||
|
count 值在 H5 平台的表现基于浏览器本身的规范。目前测试结果来看,只能限制单选/多选,并不能限制具体数量。并且,在实际的手机浏览器中很少有能够支持多选的。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 其他平台
|
||||||
|
|
||||||
|
其他平台(如支付宝小程序、钉钉小程序、App等)的文件选择能力相对有限:
|
||||||
|
|
||||||
|
| 选择方法 | 最大选择数量 | 说明 | 适用文件类型 |
|
||||||
|
| -------- | ------------ | ---- | ------------ |
|
||||||
|
| `chooseImage` | 9 | 选择图片时的最大数量限制 | accept 为 `image` 时使用 |
|
||||||
|
| `chooseVideo` | 1 | 不支持多选,只能选择单个视频文件 | accept 为 `video` 时使用 |
|
||||||
|
|
||||||
|
::: tip 提示
|
||||||
|
- 当设置的 `limit` 或 `maxCount` 超过上述平台限制时,实际选择数量将以平台限制为准
|
||||||
|
- 微信小程序平台优先使用 `chooseMedia` 来选择图片和视频,具有更高的选择数量上限
|
||||||
|
- 视频选择在非微信平台受限于 `chooseVideo` API,仅支持单选
|
||||||
|
- 平台能力的优先级:微信平台 > H5平台 > 其他平台
|
||||||
|
:::
|
||||||
|
|
||||||
## file 数据结构
|
## file 数据结构
|
||||||
|
|
||||||
| 键名 | 类型 | 说明 | 最低版本 |
|
| 键名 | 类型 | 说明 | 最低版本 |
|
||||||
|
|||||||
@ -78,3 +78,39 @@ abort()
|
|||||||
| maxDuration | 视频最大时长(秒) | number | 60 | - |
|
| maxDuration | 视频最大时长(秒) | number | 60 | - |
|
||||||
| camera | 摄像头朝向 | 'back' \| 'front' | 'back' | - |
|
| camera | 摄像头朝向 | 'back' \| 'front' | 'back' | - |
|
||||||
| extension | 根据文件拓展名过滤(H5支持全部类型过滤,微信小程序支持all和file时过滤,其余平台不支持) | string[] | - |
|
| extension | 根据文件拓展名过滤(H5支持全部类型过滤,微信小程序支持all和file时过滤,其余平台不支持) | string[] | - |
|
||||||
|
|
||||||
|
## 文件选择数量限制
|
||||||
|
|
||||||
|
不同平台对文件选择数量有不同的限制,这些限制由 uni-app 平台 API 本身决定:
|
||||||
|
|
||||||
|
### 微信平台
|
||||||
|
|
||||||
|
| 选择方法 | 最大数量 | 说明 | 适用场景 |
|
||||||
|
|---------|---------|------|----------|
|
||||||
|
| `chooseMedia` | 20 | 选择图片和视频时的最大数量限制 | accept 为 `image`、`video`、`media` 时使用 |
|
||||||
|
| `chooseMessageFile` | 100 | 选择文件时的最大数量限制 | accept 为 `file`、`all` 时使用 |
|
||||||
|
|
||||||
|
### H5平台
|
||||||
|
|
||||||
|
| 选择方法 | 最大数量 | 说明 | 适用场景 |
|
||||||
|
|---------|---------|------|----------|
|
||||||
|
| `chooseImage` | 9 | 选择图片时的最大数量限制 | accept 为 `image` 时使用 |
|
||||||
|
| `chooseVideo` | 1 | 不支持多选,只能选择单个视频文件 | accept 为 `video` 时使用 |
|
||||||
|
| `chooseFile` | 100 | 选择文件时的最大数量限制 | accept 为 `all` 时使用 |
|
||||||
|
|
||||||
|
::: warning H5平台特别说明
|
||||||
|
count 值在 H5 平台的表现基于浏览器本身的规范。目前测试结果来看,只能限制单选/多选,并不能限制具体数量。并且,在实际的手机浏览器中很少有能够支持多选的。
|
||||||
|
:::
|
||||||
|
|
||||||
|
### 其他平台
|
||||||
|
|
||||||
|
| 选择方法 | 最大数量 | 说明 | 适用场景 |
|
||||||
|
|---------|---------|------|----------|
|
||||||
|
| `chooseImage` | 9 | 选择图片时的最大数量限制 | accept 为 `image` 时使用 |
|
||||||
|
| `chooseVideo` | 1 | 不支持多选,只能选择单个视频文件 | accept 为 `video` 时使用 |
|
||||||
|
|
||||||
|
::: tip 提示
|
||||||
|
- 微信平台优先使用 `chooseMedia` 和 `chooseMessageFile`,具有更高的选择数量限制
|
||||||
|
- 视频选择在大多数平台都不支持多选
|
||||||
|
- 实际可选择的数量还会受到 `maxCount` 参数的进一步限制
|
||||||
|
:::
|
||||||
|
|||||||
@ -16,7 +16,7 @@
|
|||||||
**注意:钉钉小程序平台仅支持网络图片。**
|
**注意:钉钉小程序平台仅支持网络图片。**
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<wd-watermark image="https://wot-design-uni.cn/logo.png" :image-width="38" :image-height="38"></wd-watermark>
|
<wd-watermark image="https://wot-ui.cn/logo.png" :image-width="38" :image-height="38"></wd-watermark>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -137,8 +137,8 @@ Use the `custom-class` and `custom-style` attributes to customize the button's s
|
|||||||
| hover-stop-propagation | Specifies whether to prevent the ancestor node of this node from appearing in the clicked state | boolean | - | false | - |
|
| hover-stop-propagation | Specifies whether to prevent the ancestor node of this node from appearing in the clicked state | boolean | - | false | - |
|
||||||
| lang | Specifies the language of the returned user information, zh_CN for Simplified Chinese, zh_TW for Traditional Chinese, en for English | string | zh_CN / zh_TW | en | - |
|
| lang | Specifies the language of the returned user information, zh_CN for Simplified Chinese, zh_TW for Traditional Chinese, en for English | string | zh_CN / zh_TW | en | - |
|
||||||
| session-from | Session source, valid when open-type="contact" | string | - | - | - |
|
| session-from | Session source, valid when open-type="contact" | string | - | - | - |
|
||||||
| session-message-title | Session message card title, valid when open-type="contact" | string | - | Current title | - |
|
| send-message-title | Session message card title, valid when open-type="contact" | string | - | Current title | - |
|
||||||
| session-message-path | Session message card click jump Mini Program path, valid when open-type="contact" | string | - | Current share path | - |
|
| send-message-path | Session message card click jump Mini Program path, valid when open-type="contact" | string | - | Current share path | - |
|
||||||
| send-message-img | Session message card image, valid when open-type="contact" | string | - | Screenshot | - |
|
| send-message-img | Session message card image, valid when open-type="contact" | string | - | Screenshot | - |
|
||||||
| app-parameter | Parameters passed to the APP when opening the APP, valid when open-type=launchApp | string | - | - | - |
|
| app-parameter | Parameters passed to the APP when opening the APP, valid when open-type=launchApp | string | - | - | - |
|
||||||
| show-message-card | Whether to display the message card in the session, setting this parameter to true will show a prompt "May want to send Mini Program" in the bottom right corner when the user enters the customer service session, and the user can quickly send the Mini Program message after clicking, valid when open-type="contact" | boolean | - | false | - |
|
| show-message-card | Whether to display the message card in the session, setting this parameter to true will show a prompt "May want to send Mini Program" in the bottom right corner when the user enters the customer service session, and the user can quickly send the Mini Program message after clicking, valid when open-type="contact" | boolean | - | false | - |
|
||||||
@ -157,6 +157,7 @@ WeChat Mini Program open capabilities, see [WeChat Mini Program Button](https://
|
|||||||
| getUserInfo | Get user information, which can be obtained from the @getuserinfo callback |
|
| getUserInfo | Get user information, which can be obtained from the @getuserinfo callback |
|
||||||
| contact | Open customer service session, if the user returns to the application after clicking the message card in the session, specific information can be obtained from the @contact callback |
|
| contact | Open customer service session, if the user returns to the application after clicking the message card in the session, specific information can be obtained from the @contact callback |
|
||||||
| getPhoneNumber | Get the user's phone number, which can be obtained from the @getphonenumber callback |
|
| getPhoneNumber | Get the user's phone number, which can be obtained from the @getphonenumber callback |
|
||||||
|
| getRealtimePhoneNumber | Get user phone number in real time, user information can be obtained from @getrealtimephonenumber callback, WeChat Mini Program only |
|
||||||
| launchApp | Open APP in Mini Program, parameters can be passed to the APP through the app-parameter attribute |
|
| launchApp | Open APP in Mini Program, parameters can be passed to the APP through the app-parameter attribute |
|
||||||
| openSetting | Open authorization settings page |
|
| openSetting | Open authorization settings page |
|
||||||
| chooseAvatar | Get user avatar, avatar information can be obtained from the @chooseavatar callback |
|
| chooseAvatar | Get user avatar, avatar information can be obtained from the @chooseavatar callback |
|
||||||
@ -173,9 +174,12 @@ WeChat Mini Program open capabilities, see [WeChat Mini Program Button](https://
|
|||||||
| getuserinfo | Get user information | `detail` | - |
|
| getuserinfo | Get user information | `detail` | - |
|
||||||
| contact | Customer service message callback, valid when open-type="contact" | `detail` | - |
|
| contact | Customer service message callback, valid when open-type="contact" | `detail` | - |
|
||||||
| getphonenumber | Get user phone number callback, valid when open-type=getPhoneNumber | `detail` | - |
|
| getphonenumber | Get user phone number callback, valid when open-type=getPhoneNumber | `detail` | - |
|
||||||
|
| getrealtimephonenumber | Get user phone number in real time callback, valid when open-type=getRealtimePhoneNumber | `detail` | - |
|
||||||
| error | Error callback when using open capabilities, valid when open-type=launchApp | `detail` | - |
|
| error | Error callback when using open capabilities, valid when open-type=launchApp | `detail` | - |
|
||||||
| launchapp | Callback for successfully opening APP, valid when open-type=launchApp | `detail` | - |
|
| launchapp | Callback for successfully opening APP, valid when open-type=launchApp | `detail` | - |
|
||||||
| opensetting | Callback after opening authorization settings page, valid when open-type=openSetting | `detail` | - |
|
| opensetting | Callback after opening authorization settings page, valid when open-type=openSetting | `detail` | - |
|
||||||
|
| chooseavatar | Get user avatar callback, valid when open-type=chooseAvatar | `detail` | - |
|
||||||
|
| agreeprivacyauthorization | User agrees to privacy agreement callback, valid when open-type=agreePrivacyAuthorization | `detail` | - |
|
||||||
|
|
||||||
## External Style Classes
|
## External Style Classes
|
||||||
|
|
||||||
|
|||||||
@ -197,6 +197,7 @@ Set the `formatter` parameter, which is a function type that receives an `object
|
|||||||
| label-width | Set left title width | string | - | 33% | - |
|
| label-width | Set left title width | string | - | 33% | - |
|
||||||
| error | Whether in error state, right content is red in error state | boolean | - | false | - |
|
| error | Whether in error state, right content is red in error state | boolean | - | false | - |
|
||||||
| required | Required style | boolean | - | false | - |
|
| required | Required style | boolean | - | false | - |
|
||||||
|
| marker-side | Position of the required marker | 'before' \| 'after' | - | 'before' | 1.12.0 |
|
||||||
| center | Whether to vertically center | boolean | - | false | - |
|
| center | Whether to vertically center | boolean | - | false | - |
|
||||||
| ellipsis | Whether to hide overflow | boolean | - | false | - |
|
| ellipsis | Whether to hide overflow | boolean | - | false | - |
|
||||||
| align-right | Display picker value aligned to the right | boolean | - | false | - |
|
| align-right | Display picker value aligned to the right | boolean | - | false | - |
|
||||||
|
|||||||
@ -105,6 +105,7 @@ The `center` attribute sets whether the left and right content of the cell is ve
|
|||||||
| title | Left title | string | - | - |
|
| title | Left title | string | - | - |
|
||||||
| value | Right content | string | - | - |
|
| value | Right content | string | - | - |
|
||||||
| icon | Left icon class name, see Icon component for optional values | string | - | - |
|
| icon | Left icon class name, see Icon component for optional values | string | - | - |
|
||||||
|
| icon-size | Icon size | string \| number | - | 1.13.0 |
|
||||||
| icon-prefix | Icon class name prefix, same as Icon component | string | 'wd-icon' | - |
|
| icon-prefix | Icon class name prefix, same as Icon component | string | 'wd-icon' | - |
|
||||||
| label | Description below the title | string | - | - |
|
| label | Description below the title | string | - | - |
|
||||||
| is-link | Whether to show the right arrow and click effect | boolean | false | - |
|
| is-link | Whether to show the right arrow and click effect | boolean | false | - |
|
||||||
@ -117,6 +118,7 @@ The `center` attribute sets whether the left and right content of the cell is ve
|
|||||||
| title-width | Title width, with unit | string | - | - |
|
| title-width | Title width, with unit | string | - | - |
|
||||||
| center | Whether to vertically center the left and right content | boolean | false | - |
|
| center | Whether to vertically center the left and right content | boolean | false | - |
|
||||||
| required | Whether to show the required asterisk | boolean | false | - |
|
| required | Whether to show the required asterisk | boolean | false | - |
|
||||||
|
| marker-side | Position of the required marker | 'before' \| 'after' | 'before' | 1.12.0 |
|
||||||
| on | Whether to show the on icon on the right | boolean | false | - |
|
| on | Whether to show the on icon on the right | boolean | false | - |
|
||||||
| bordered | Whether to show the bottom border | boolean | true | - |
|
| bordered | Whether to show the bottom border | boolean | true | - |
|
||||||
| center-title | Whether to center the title | boolean | false | 0.1.1 |
|
| center-title | Whether to center the title | boolean | false | 0.1.1 |
|
||||||
|
|||||||
@ -161,7 +161,7 @@ const columnChange = ({ selectedItem, resolve, finish }) => {
|
|||||||
// Simulate request failure
|
// Simulate request failure
|
||||||
if (Math.random() > 0.7) {
|
if (Math.random() > 0.7) {
|
||||||
finish(false)
|
finish(false)
|
||||||
toast.error.error('Data request failed, please try again')
|
toast.error('Data request failed, please try again')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
// Why use selectedItem.value as code? Because when constructing area, we put the identifier in the value field, similarly you can change it to other fields as long as they correspond to area's fields
|
// Why use selectedItem.value as code? Because when constructing area, we put the identifier in the value field, similarly you can change it to other fields as long as they correspond to area's fields
|
||||||
@ -196,3 +196,360 @@ There are two ways to set initial options:
|
|||||||
```html
|
```html
|
||||||
<wd-col-picker label="Select Address" v-model="value" :columns="area" :column-change="columnChange"></wd-col-picker>
|
<wd-col-picker label="Select Address" v-model="value" :columns="area" :column-change="columnChange"></wd-col-picker>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// useColPickerData can be referenced from the introduction at the top of this section
|
||||||
|
// Adjust the import path according to your actual situation, don't just copy and paste
|
||||||
|
import { useColPickerData } from '@/hooks/useColPickerData'
|
||||||
|
const { colPickerData, findChildrenByCode } = useColPickerData()
|
||||||
|
|
||||||
|
const value = ref<string[]>(['110000', '110100', '110101'])
|
||||||
|
|
||||||
|
const area = ref<any[]>([
|
||||||
|
colPickerData.map((item) => {
|
||||||
|
return {
|
||||||
|
value: item.value,
|
||||||
|
label: item.text
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
findChildrenByCode(colPickerData, '110000')!.map((item) => {
|
||||||
|
return {
|
||||||
|
value: item.value,
|
||||||
|
label: item.text
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
findChildrenByCode(colPickerData, '110100')!.map((item) => {
|
||||||
|
return {
|
||||||
|
value: item.value,
|
||||||
|
label: item.text
|
||||||
|
}
|
||||||
|
})
|
||||||
|
])
|
||||||
|
|
||||||
|
const columnChange = ({ selectedItem, resolve, finish, index }) => {
|
||||||
|
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
|
||||||
|
if (areaData && areaData.length) {
|
||||||
|
resolve(
|
||||||
|
areaData.map((item) => {
|
||||||
|
return {
|
||||||
|
value: item.value,
|
||||||
|
label: item.text
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
finish()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
2) Use the `auto-complete` attribute. When `auto-complete` is `true`, the component will automatically trigger the `column-change` event to complete the data.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-col-picker label="Select Address" v-model="value" :columns="area" :column-change="columnChange" auto-complete></wd-col-picker>
|
||||||
|
```
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// useColPickerData can be referenced from the introduction at the top of this section
|
||||||
|
// Adjust the import path according to your actual situation, don't just copy and paste
|
||||||
|
import { useColPickerData } from '@/hooks/useColPickerData'
|
||||||
|
const { colPickerData, findChildrenByCode } = useColPickerData()
|
||||||
|
|
||||||
|
const value = ref<string[]>(['110000', '110100', '110101'])
|
||||||
|
|
||||||
|
const area = ref<any[]>([
|
||||||
|
colPickerData.map((item) => {
|
||||||
|
return {
|
||||||
|
value: item.value,
|
||||||
|
label: item.text
|
||||||
|
}
|
||||||
|
})
|
||||||
|
])
|
||||||
|
|
||||||
|
const columnChange = ({ selectedItem, resolve, finish }) => {
|
||||||
|
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
|
||||||
|
if (areaData && areaData.length) {
|
||||||
|
resolve(
|
||||||
|
areaData.map((item) => {
|
||||||
|
return {
|
||||||
|
value: item.value,
|
||||||
|
label: item.text
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
finish()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Disabled
|
||||||
|
|
||||||
|
Set `disabled` to disable the picker.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-col-picker label="Select Address" v-model="value" :columns="area" :column-change="columnChange" disabled></wd-col-picker>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Readonly
|
||||||
|
|
||||||
|
Set `readonly` to make the picker readonly.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-col-picker label="Select Address" v-model="value" :columns="area" :column-change="columnChange" readonly></wd-col-picker>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Disabled Options
|
||||||
|
|
||||||
|
Set the `disabled` property in option data to disable specific options.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-col-picker label="Select Address" v-model="value" :columns="area" :column-change="columnChange"></wd-col-picker>
|
||||||
|
```
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
const area = ref<any[]>([
|
||||||
|
[
|
||||||
|
{ value: '1', label: 'Beijing', disabled: true },
|
||||||
|
{ value: '2', label: 'Shanghai' },
|
||||||
|
{ value: '3', label: 'Shenzhen' }
|
||||||
|
]
|
||||||
|
])
|
||||||
|
|
||||||
|
const columnChange = ({ selectedItem, resolve, finish }) => {
|
||||||
|
if (selectedItem.value === '1') {
|
||||||
|
resolve([
|
||||||
|
{ value: '11', label: 'Dongcheng District' },
|
||||||
|
{ value: '12', label: 'Xicheng District' }
|
||||||
|
])
|
||||||
|
} else if (selectedItem.value === '2') {
|
||||||
|
resolve([
|
||||||
|
{ value: '21', label: 'Huangpu District' },
|
||||||
|
{ value: '22', label: 'Xuhui District' }
|
||||||
|
])
|
||||||
|
} else {
|
||||||
|
finish()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Option Tips
|
||||||
|
|
||||||
|
Set the `tip` property in option data to show tips for options.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-col-picker label="Select Address" v-model="value" :columns="area" :column-change="columnChange"></wd-col-picker>
|
||||||
|
```
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
const area = ref<any[]>([
|
||||||
|
[
|
||||||
|
{ value: '1', label: 'Beijing', tip: 'Capital' },
|
||||||
|
{ value: '2', label: 'Shanghai', tip: 'Municipality' },
|
||||||
|
{ value: '3', label: 'Shenzhen', tip: 'Special Economic Zone' }
|
||||||
|
]
|
||||||
|
])
|
||||||
|
|
||||||
|
const columnChange = ({ selectedItem, resolve, finish }) => {
|
||||||
|
if (selectedItem.value === '1') {
|
||||||
|
resolve([
|
||||||
|
{ value: '11', label: 'Dongcheng District' },
|
||||||
|
{ value: '12', label: 'Xicheng District' }
|
||||||
|
])
|
||||||
|
} else if (selectedItem.value === '2') {
|
||||||
|
resolve([
|
||||||
|
{ value: '21', label: 'Huangpu District' },
|
||||||
|
{ value: '22', label: 'Xuhui District' }
|
||||||
|
])
|
||||||
|
} else {
|
||||||
|
finish()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Display Format
|
||||||
|
|
||||||
|
Set `display-format` to customize the display text.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-col-picker label="Select Address" v-model="value" :columns="area" :column-change="columnChange" :display-format="displayFormat"></wd-col-picker>
|
||||||
|
```
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
const displayFormat = (items) => {
|
||||||
|
return items.map((item) => item.label).join(' > ')
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Set Title
|
||||||
|
|
||||||
|
Set `title` to customize the popup title.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-col-picker label="Select Address" v-model="value" :columns="area" :column-change="columnChange" title="Select Region"></wd-col-picker>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Before Confirm
|
||||||
|
|
||||||
|
Set `before-confirm` to validate before confirming.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-col-picker label="Select Address" v-model="value" :columns="area" :column-change="columnChange" :before-confirm="beforeConfirm"></wd-col-picker>
|
||||||
|
```
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
const beforeConfirm = (value, resolve) => {
|
||||||
|
if (value.length < 3) {
|
||||||
|
toast.error('Please select a complete address')
|
||||||
|
resolve(false)
|
||||||
|
} else {
|
||||||
|
resolve(true)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Error State
|
||||||
|
|
||||||
|
Set `error` to show error state.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-col-picker label="Select Address" v-model="value" :columns="area" :column-change="columnChange" error></wd-col-picker>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Required Style
|
||||||
|
|
||||||
|
Set `required` to show required asterisk.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-col-picker label="Select Address" v-model="value" :columns="area" :column-change="columnChange" required></wd-col-picker>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Required Marker Position
|
||||||
|
|
||||||
|
Set `marker-side` to control the position of the required marker.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-col-picker label="Select Address" v-model="value" :columns="area" :column-change="columnChange" required marker-side="after"></wd-col-picker>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Picker Size
|
||||||
|
|
||||||
|
Set `size` to change picker size.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-col-picker label="Select Address" v-model="value" :columns="area" :column-change="columnChange" size="large"></wd-col-picker>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Right Align Value
|
||||||
|
|
||||||
|
Set `align-right` to right-align the picker value.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-col-picker label="Select Address" v-model="value" :columns="area" :column-change="columnChange" align-right></wd-col-picker>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Custom Picker
|
||||||
|
|
||||||
|
Use slots to customize the picker display.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-col-picker v-model="value" :columns="area" :column-change="columnChange" use-default-slot>
|
||||||
|
<wd-cell title="Select Address" :value="value.length ? displayFormat(selectedItems) : 'Please select'" is-link></wd-cell>
|
||||||
|
</wd-col-picker>
|
||||||
|
```
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
const selectedItems = ref([])
|
||||||
|
|
||||||
|
const displayFormat = (items) => {
|
||||||
|
return items.map((item) => item.label).join(' > ')
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleConfirm = ({ selectedItems: items }) => {
|
||||||
|
selectedItems.value = items
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Attributes
|
||||||
|
|
||||||
|
| Attribute | Description | Type | Options | Default | Version |
|
||||||
|
|-----------|-------------|------|----------|---------|----------|
|
||||||
|
| v-model | Selected value | array | - | - | - |
|
||||||
|
| columns | Picker data, 2D array | array | - | - | - |
|
||||||
|
| value-key | Key for the `value` property in option objects | string | - | value | - |
|
||||||
|
| label-key | Key for the `label` property in option objects | string | - | label | - |
|
||||||
|
| tip-key | Key for the `tip` property in option objects | string | - | tip | - |
|
||||||
|
| title | Popup title | string | - | - | - |
|
||||||
|
| label | Left-side text label | string | - | - | - |
|
||||||
|
| placeholder | Placeholder text | string | - | Select | - |
|
||||||
|
| disabled | Disabled state | boolean | - | false | - |
|
||||||
|
| readonly | Readonly state | boolean | - | false | - |
|
||||||
|
| display-format | Custom display text formatting function (returns a string) | function | - | - | - |
|
||||||
|
| column-change | Function to handle column changes, receives current column's selected item, column index, selected item index, next column data handler resolve, and finish selection function | function | - | - | - |
|
||||||
|
| size | Picker size | string | large | - | - |
|
||||||
|
| label-width | Left-side label width | string | - | 33% | - |
|
||||||
|
| error | Error state (displays value in red) | boolean | - | false | - |
|
||||||
|
| required | Whether to display the required asterisk | boolean | - | false | - |
|
||||||
|
| marker-side | Position of the required marker | string | before / after | before | 1.12.0 |
|
||||||
|
| align-right | Right-align the picker value | boolean | - | false | - |
|
||||||
|
| before-confirm | Validation function before confirming, receives (value, resolve) parameters, continue execution through resolve, resolve accepts 1 boolean parameter | function | - | - | - |
|
||||||
|
| loading-color | Loading icon color | string | - | #4D80F0 | - |
|
||||||
|
| use-default-slot | Set this option when using default slot | boolean | - | false | - |
|
||||||
|
| use-label-slot | Set this option when using label slot | boolean | - | false | - |
|
||||||
|
| close-on-click-modal | Whether to close when clicking modal | boolean | - | true | - |
|
||||||
|
| auto-complete | Automatically trigger column-change event to complete data, triggers column-change when columns is empty array or columns array length is less than value array length | boolean | - | false | - |
|
||||||
|
| z-index | Popup z-index | number | - | 15 | - |
|
||||||
|
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation for popup panel (iPhone X type models) | boolean | - | true | - |
|
||||||
|
| ellipsis | Whether to hide overflow | boolean | - | false | - |
|
||||||
|
| prop | Form field `model` property name, required when using form validation | string | - | - | - |
|
||||||
|
| rules | Form validation rules, used with `wd-form` component | `FormItemRule []` | - | `[]` | - |
|
||||||
|
| lineWidth | Bottom line width in pixels | number | - | - | 1.3.7 |
|
||||||
|
| lineHeight | Bottom line height in pixels | number | - | - | 1.3.7 |
|
||||||
|
| root-portal | Whether to detach from the page, used to solve various fixed positioning issues | boolean | - | false | 1.11.0 |
|
||||||
|
|
||||||
|
### FormItemRule Data Structure
|
||||||
|
|
||||||
|
| Key | Description | Type |
|
||||||
|
|-----|-------------|------|
|
||||||
|
| required | Whether it's a required field | `boolean` |
|
||||||
|
| message | Error message | `string` |
|
||||||
|
| validator | Validation through function, can return a `Promise` for async validation | `(value, rule) => boolean \| Promise` |
|
||||||
|
| pattern | Validation through regular expression, regex mismatch indicates validation failure | `RegExp` |
|
||||||
|
|
||||||
|
## Option Data Structure
|
||||||
|
|
||||||
|
| Key | Description | Type | Required | Version |
|
||||||
|
|-----|-------------|------|----------|----------|
|
||||||
|
| value | Option value | string | Yes | - |
|
||||||
|
| label | Option name | string | Yes | - |
|
||||||
|
| tip | Option tip | string | No | - |
|
||||||
|
| disabled | Disable option | boolean | No | - |
|
||||||
|
|
||||||
|
## Events
|
||||||
|
|
||||||
|
| Event Name | Description | Parameters | Version |
|
||||||
|
|------------|-------------|------------|----------|
|
||||||
|
| confirm | Triggered when the last column option is selected | `{ value(option value array), selectedItems(option array) }` | - |
|
||||||
|
| close | Triggered when close button or overlay is clicked | - | - |
|
||||||
|
|
||||||
|
## Methods
|
||||||
|
|
||||||
|
| Method Name | Description | Parameters | Version |
|
||||||
|
|-------------|-------------|------------|----------|
|
||||||
|
| open | Open picker popup | - | - |
|
||||||
|
| close | Close picker popup | - | - |
|
||||||
|
|
||||||
|
## Slots
|
||||||
|
|
||||||
|
| Name | Description | Version |
|
||||||
|
|------|-------------|----------|
|
||||||
|
| default | Custom display | - |
|
||||||
|
| label | Left slot | - |
|
||||||
|
|
||||||
|
## External Style Classes
|
||||||
|
|
||||||
|
| Class Name | Description | Version |
|
||||||
|
|------------|-------------|---------|
|
||||||
|
| custom-class | Root node style | - |
|
||||||
|
| custom-label-class | Label external custom style | - |
|
||||||
|
| custom-value-class | Value external custom style | - |
|
||||||
@ -104,10 +104,11 @@ export default {
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Using with TypeScript
|
### Using with TypeScript
|
||||||
When defining `themeVars` in TypeScript, it's recommended to use the __ConfigProviderThemeVars__ type provided by __wot-design-uni__, which can provide comprehensive type hints:
|
|
||||||
|
When defining `themeVars` in TypeScript, it's recommended to use the **ConfigProviderThemeVars** type provided by **wot-design-uni**, which can provide comprehensive type hints:
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
import type { ConfigProviderThemeVars } from 'wot-design-uni';
|
import type { ConfigProviderThemeVars } from 'wot-design-uni'
|
||||||
|
|
||||||
const themeVars: ConfigProviderThemeVars = {
|
const themeVars: ConfigProviderThemeVars = {
|
||||||
colorTheme: 'red'
|
colorTheme: 'red'
|
||||||
@ -125,6 +126,7 @@ Note: ConfigProvider only affects the styles of its child components, not the gl
|
|||||||
### Installation
|
### Installation
|
||||||
|
|
||||||
::: code-group
|
::: code-group
|
||||||
|
|
||||||
```bash [npm]
|
```bash [npm]
|
||||||
npm i -D @uni-ku/root
|
npm i -D @uni-ku/root
|
||||||
```
|
```
|
||||||
@ -136,6 +138,7 @@ yarn add -D @uni-ku/root
|
|||||||
```bash [pnpm]
|
```bash [pnpm]
|
||||||
pnpm add -D @uni-ku/root
|
pnpm add -D @uni-ku/root
|
||||||
```
|
```
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
### Import
|
### Import
|
||||||
@ -188,11 +191,65 @@ const { theme, themeVars } = useTheme({
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>Hello AppKuVue</div>
|
<div>Hello AppKuVue</div>
|
||||||
<!-- Assuming WdConfigProvider component is registered -->
|
<!-- Ensure WdConfigProvider component is registered -->
|
||||||
<WdConfigProvider :theme="theme" :theme-vars="themeVars">
|
<wd-config-provider :theme="theme" :theme-vars="themeVars">
|
||||||
<KuRootView />
|
<KuRootView />
|
||||||
</WdConfigProvider>
|
</wd-config-provider>
|
||||||
</template>
|
</template>
|
||||||
```
|
```
|
||||||
|
|
||||||
2. Write a composable function for theme control
|
2. Write a composable function for theme control
|
||||||
|
|
||||||
|
```ts
|
||||||
|
// src/composables/useTheme.ts
|
||||||
|
|
||||||
|
import type { ConfigProviderThemeVars } from 'wot-design-uni'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
const theme = ref<'light' | 'dark'>()
|
||||||
|
const themeVars = ref<ConfigProviderThemeVars>()
|
||||||
|
|
||||||
|
export function useTheme(vars?: ConfigProviderThemeVars) {
|
||||||
|
vars && (themeVars.value = vars)
|
||||||
|
|
||||||
|
function toggleTheme(mode?: 'light' | 'dark') {
|
||||||
|
theme.value = mode || (theme.value === 'light' ? 'dark' : 'light')
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
theme,
|
||||||
|
themeVars,
|
||||||
|
toggleTheme
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Use theme switching in any view file
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<!-- src/pages/*.vue -->
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useTheme } from '@/composables/useTheme'
|
||||||
|
|
||||||
|
const { theme, toggleTheme } = useTheme()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<button @click="toggleTheme">Toggle theme, current mode: {{ theme }}</button>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Attributes
|
||||||
|
|
||||||
|
| Parameter | Description | Type | Options | Default | Version |
|
||||||
|
| ---------- | --------------------------------------------------------------------- | ------------------------- | -------------- | ------- | ------- |
|
||||||
|
| theme | Theme style, set to `dark` to enable dark mode, takes effect globally | string | `dark`/`light` | - | - |
|
||||||
|
| theme-vars | Custom theme variables | `ConfigProviderThemeVars` | - | - | - |
|
||||||
|
|
||||||
|
## External Style Classes
|
||||||
|
|
||||||
|
| Class Name | Description | Version |
|
||||||
|
| ------------ | --------------- | ------- |
|
||||||
|
| custom-class | Root node style | 1.3.9 |
|
||||||
|
| custom-style | Root node style | 1.3.9 |
|
||||||
|
|||||||
@ -96,6 +96,8 @@ function handleClick() {
|
|||||||
| hide-when-close | Hide popup layer when closed (display: none) | boolean | - | true | - |
|
| hide-when-close | Hide popup layer when closed (display: none) | boolean | - | true | - |
|
||||||
| z-index | Set layer level | number | - | 10 | 1.4.0 |
|
| z-index | Set layer level | number | - | 10 | 1.4.0 |
|
||||||
| root-portal | Whether to detach from the page, used to solve various fixed positioning issues | boolean | - | false | 1.11.0 |
|
| root-portal | Whether to detach from the page, used to solve various fixed positioning issues | boolean | - | false | 1.11.0 |
|
||||||
|
| show-menu-by-longpress | Enable long press image to show Mini Program code recognition menu, only supported in WeChat Mini Program | boolean | - | false | 1.13.0 |
|
||||||
|
| close-on-click | Whether clicking the image should close the curtain. Defaults to true. | boolean | - | ture | 1.13.0 |
|
||||||
|
|
||||||
## Events
|
## Events
|
||||||
|
|
||||||
|
|||||||
@ -144,6 +144,7 @@ const filter = (type, values) => {
|
|||||||
| loading | Loading state | boolean | - | false | - |
|
| loading | Loading state | boolean | - | false | - |
|
||||||
| loading-color | Loading color, can only use hexadecimal color values and cannot use abbreviated format | string | - | #4D80F0 | - |
|
| loading-color | Loading color, can only use hexadecimal color values and cannot use abbreviated format | string | - | #4D80F0 | - |
|
||||||
| columns-height | Height of picker's internal roller | number | - | 231 | - |
|
| columns-height | Height of picker's internal roller | number | - | 231 | - |
|
||||||
|
| item-height | Height of picker item | number | - | 35 | 1.13.0 |
|
||||||
| formatter | Custom formatting function for popup layer option text, returns a string | function | - | - | - |
|
| formatter | Custom formatting function for popup layer option text, returns a string | function | - | - | - |
|
||||||
| filter | Custom function for filtering options, returns column's option array | function | - | - | - |
|
| filter | Custom function for filtering options, returns column's option array | function | - | - | - |
|
||||||
| minDate | Minimum date, 13-digit timestamp | `timestamp` | - | Current date - 10 years | - |
|
| minDate | Minimum date, 13-digit timestamp | `timestamp` | - | Current date - 10 years | - |
|
||||||
|
|||||||
@ -302,6 +302,7 @@ const displayFormatTabLabel = (items) => {
|
|||||||
| minMinute | Minimum minute, effective for time type | number | - | 0 | - |
|
| minMinute | Minimum minute, effective for time type | number | - | 0 | - |
|
||||||
| maxMinute | Maximum minute, effective for time type | number | - | 59 | - |
|
| maxMinute | Maximum minute, effective for time type | number | - | 59 | - |
|
||||||
| required | Form attribute, required | boolean | - | false | - |
|
| required | Form attribute, required | boolean | - | false | - |
|
||||||
|
| marker-side | Position of the required marker | 'before' \| 'after' | - | 'before' | 1.12.0 |
|
||||||
| size | Set picker size | string | large | - | - |
|
| size | Set picker size | string | large | - | - |
|
||||||
| label-width | Set left title width | string | - | 33% | - |
|
| label-width | Set left title width | string | - | 33% | - |
|
||||||
| error | Whether in error state, right content is red in error state | boolean | - | false | - |
|
| error | Whether in error state, right content is red in error state | boolean | - | false | - |
|
||||||
|
|||||||
@ -116,7 +116,7 @@ You can set the menu's right icon through `icon`, equivalent to the `name` prope
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<wd-drop-menu>
|
<wd-drop-menu>
|
||||||
<wd-drop-menu-item title="Map" icon="location" icon-size="24px" />
|
<wd-drop-menu-item title="Map" icon="location" icon-size="14px" />
|
||||||
</wd-drop-menu>
|
</wd-drop-menu>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -137,6 +137,8 @@ The `before-toggle` function cannot prevent the expansion/closure operations of
|
|||||||
|
|
||||||
```typescript
|
```typescript
|
||||||
import { useMessage } from '@/uni_modules/wot-design-uni'
|
import { useMessage } from '@/uni_modules/wot-design-uni'
|
||||||
|
import type { DropMenuItemBeforeToggle } from '@/uni_modules/wot-design-uni/components/wd-drop-menu-item/types'
|
||||||
|
|
||||||
const messageBox = useMessage()
|
const messageBox = useMessage()
|
||||||
|
|
||||||
const value = ref<number>(0)
|
const value = ref<number>(0)
|
||||||
|
|||||||
@ -115,7 +115,7 @@ const handleClick = () => {
|
|||||||
| activeIcon | Icon when floating button is expanded | string | - | 'close' | 0.1.57 |
|
| activeIcon | Icon when floating button is expanded | string | - | 'close' | 0.1.57 |
|
||||||
| zIndex | Custom floating button layer level | number | - | 99 | 0.1.57 |
|
| zIndex | Custom floating button layer level | number | - | 99 | 0.1.57 |
|
||||||
| gap | Custom gap between floating button and viewport edges | FabGap | - | \{ top: 16, left: 16, right: 16, bottom: 16 \} | 1.2.26 |
|
| gap | Custom gap between floating button and viewport edges | FabGap | - | \{ top: 16, left: 16, right: 16, bottom: 16 \} | 1.2.26 |
|
||||||
| customStyle | Custom style | string | - | '' | 0.1.57 |
|
| custom-style | Custom style | string | - | '' | 0.1.57 |
|
||||||
| expandable | Controls whether to expand menu when clicked, triggers click when set to false | boolean | - | true | 1.3.11 |
|
| expandable | Controls whether to expand menu when clicked, triggers click when set to false | boolean | - | true | 1.3.11 |
|
||||||
|
|
||||||
## Events
|
## Events
|
||||||
@ -124,10 +124,18 @@ const handleClick = () => {
|
|||||||
|------------|----------------------------------------------------------------|------------|----------|
|
|------------|----------------------------------------------------------------|------------|----------|
|
||||||
| click | Triggered when clicking the floating button when expandable is false | — | 1.3.11 |
|
| click | Triggered when clicking the floating button when expandable is false | — | 1.3.11 |
|
||||||
|
|
||||||
|
## Methods
|
||||||
|
|
||||||
|
| Method Name | Description | Parameters | Version |
|
||||||
|
|-------------|-------------|------------|----------|
|
||||||
|
| open | Expand menu | - | 0.1.57 |
|
||||||
|
| close | Collapse menu | - | 0.1.57 |
|
||||||
|
|
||||||
## Slot
|
## Slot
|
||||||
|
|
||||||
| name | Description | Version |
|
| name | Description | Version |
|
||||||
|---------|------------------------------------------------------------------------------------------------------------|----------|
|
|---------|------------------------------------------------------------------------------------------------------------|----------|
|
||||||
|
| default | Action buttons, usually contains multiple buttons | 0.1.57 |
|
||||||
| trigger | Trigger slot, used for custom click button, component won't emit click when using this slot | 1.3.11 |
|
| trigger | Trigger slot, used for custom click button, component won't emit click when using this slot | 1.3.11 |
|
||||||
|
|
||||||
## External Classes
|
## External Classes
|
||||||
|
|||||||
@ -63,17 +63,15 @@ Basic usage requires binding the `icon` value and `text` property. By default, i
|
|||||||
|
|
||||||
The content of `GridItem` can be customized through the default slot.
|
The content of `GridItem` can be customized through the default slot.
|
||||||
|
|
||||||
When using the default slot, enable the `use-slot` property on `GridItem`.
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<wd-grid>
|
<wd-grid>
|
||||||
<wd-grid-item use-slot>
|
<wd-grid-item>
|
||||||
<image class="img" :src="joy" />
|
<image class="img" :src="joy" />
|
||||||
</wd-grid-item>
|
</wd-grid-item>
|
||||||
<wd-grid-item use-slot>
|
<wd-grid-item>
|
||||||
<image class="img" :src="joy" />
|
<image class="img" :src="joy" />
|
||||||
</wd-grid-item>
|
</wd-grid-item>
|
||||||
<wd-grid-item use-slot>
|
<wd-grid-item>
|
||||||
<image class="img" :src="joy" />
|
<image class="img" :src="joy" />
|
||||||
</wd-grid-item>
|
</wd-grid-item>
|
||||||
</wd-grid>
|
</wd-grid>
|
||||||
@ -88,9 +86,9 @@ When using the default slot, enable the `use-slot` property on `GridItem`.
|
|||||||
|
|
||||||
## Individual Slots
|
## Individual Slots
|
||||||
|
|
||||||
The `icon` slot can be inserted into the icon position of `GridItem`. Enable the icon slot through `use-icon-slot`.
|
The `icon` slot can be inserted into the icon position of `GridItem`.
|
||||||
|
|
||||||
The `text` slot can be inserted into the text position of `GridItem`. Enable the text slot through `use-text-slot`.
|
The `text` slot can be inserted into the text position of `GridItem`.
|
||||||
|
|
||||||
Note:
|
Note:
|
||||||
|
|
||||||
@ -100,14 +98,14 @@ Note:
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<wd-grid>
|
<wd-grid>
|
||||||
<wd-grid-item use-icon-slot text="Text" v-for="index in 3" :key="index" icon-size="36px">
|
<wd-grid-item text="Text" v-for="index in 3" :key="index" icon-size="36px">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<image class="slot-img" :src="joy" />
|
<image class="slot-img" :src="joy" />
|
||||||
</template>
|
</template>
|
||||||
</wd-grid-item>
|
</wd-grid-item>
|
||||||
</wd-grid>
|
</wd-grid>
|
||||||
<wd-grid>
|
<wd-grid>
|
||||||
<wd-grid-item use-text-slot icon="picture" v-for="index in 3" :key="index">
|
<wd-grid-item icon="picture" v-for="index in 3" :key="index">
|
||||||
<template #text>
|
<template #text>
|
||||||
<view class="text">Custom Text Slot</view>
|
<view class="text">Custom Text Slot</view>
|
||||||
</template>
|
</template>
|
||||||
@ -230,9 +228,9 @@ Set jump link through `url` property.
|
|||||||
| icon-size | Icon size | string | '26px' | - |
|
| icon-size | Icon size | string | '26px' | - |
|
||||||
| url | Page jump link | string | - | - |
|
| url | Page jump link | string | - | - |
|
||||||
| link-type | Page jump type | string | 'navigateTo' | - |
|
| link-type | Page jump type | string | 'navigateTo' | - |
|
||||||
| use-slot | Whether to use slot | boolean | false | - |
|
| <s>use-slot</s> | Whether to use slot **(1.12.0Deprecated, use default slot directly)** | boolean | false | - |
|
||||||
| use-icon-slot | Whether to use icon slot | boolean | false | - |
|
| <s>use-icon-slot</s> | Whether to use icon slot **(1.12.0Deprecated, component auto-detects icon slot existence)** | boolean | false | - |
|
||||||
| use-text-slot | Whether to use text slot | boolean | false | - |
|
| <s>use-text-slot</s> | Whether to use text slot **(1.12.0Deprecated, component auto-detects text slot existence)** | boolean | false | - |
|
||||||
| clickable | Whether clickable | boolean | false | - |
|
| clickable | Whether clickable | boolean | false | - |
|
||||||
|
|
||||||
## GridItem Events
|
## GridItem Events
|
||||||
|
|||||||
@ -8,10 +8,6 @@ Set the `name` attribute to use the built-in icons.
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<wd-icon name="add-circle"></wd-icon>
|
<wd-icon name="add-circle"></wd-icon>
|
||||||
<wd-icon name="add"></wd-icon>
|
|
||||||
<wd-icon name="arrow-down"></wd-icon>
|
|
||||||
<wd-icon name="arrow-right"></wd-icon>
|
|
||||||
<wd-icon name="camera"></wd-icon>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Icon Color
|
## Icon Color
|
||||||
@ -46,34 +42,30 @@ First, you need to define your own font icon library, and then set the `class-pr
|
|||||||
|
|
||||||
### 2. Using Image Icons
|
### 2. Using Image Icons
|
||||||
|
|
||||||
Set the `custom` attribute to use image icons, and set the `name` attribute to the image URL.
|
Set the `name` attribute to an image URL to use image icons. The component automatically detects URLs containing `/`.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<wd-icon custom name="https://example.com/icon.png"></wd-icon>
|
<wd-icon name="https://example.com/icon.png"></wd-icon>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Icon List
|
|
||||||
|
|
||||||
<icon-list></icon-list>
|
|
||||||
|
|
||||||
## Attributes
|
## Attributes
|
||||||
|
|
||||||
| Attribute | Description | Type | Default | Version |
|
| Attribute | Description | Type | Default | Version |
|
||||||
|---------|---------|---------|---------|------|
|
| ------------ | ------------------------ | ------ | ------- | ------- |
|
||||||
| name | Icon name | string | - | - |
|
| name | Icon name or image URL | string | - | - |
|
||||||
| color | Icon color | string | - | - |
|
| color | Icon color | string | - | - |
|
||||||
| size | Icon size | string | - | - |
|
| size | Icon size | string \| number | - | - |
|
||||||
| class-prefix | Custom icon class prefix | string | wd-icon | - |
|
| class-prefix | Custom icon class prefix | string | wd-icon | - |
|
||||||
| custom | Whether to use custom image icon | boolean | false | - |
|
| custom-style | Custom root node style | string | - | - |
|
||||||
|
|
||||||
## Events
|
## Events
|
||||||
|
|
||||||
| Event Name | Description | Parameters | Version |
|
| Event Name | Description | Parameters | Version |
|
||||||
|---------|---------|---------|------|
|
| ---------- | ---------------------------------- | ------------ | ------- |
|
||||||
| click | Triggered when the icon is clicked | event: Event | - |
|
| click | Triggered when the icon is clicked | event: Event | - |
|
||||||
|
|
||||||
## External Style Classes
|
## External Style Classes
|
||||||
|
|
||||||
| Class Name | Description | Version |
|
| Class Name | Description | Version |
|
||||||
|---------|---------|------|
|
| ------------ | ---------------------- | ------- |
|
||||||
| custom-class | Root node custom class | - |
|
| custom-class | Root node custom class | - |
|
||||||
@ -23,6 +23,37 @@ When using `file import`, note that WeChat Mini Program image tag paths accept b
|
|||||||
const joy = 'data:image/jpeg;base64,...' // Image file base64
|
const joy = 'data:image/jpeg;base64,...' // Image file base64
|
||||||
```
|
```
|
||||||
|
|
||||||
|
:::tip
|
||||||
|
You can configure `transformAssetUrls` so that the `src` attribute works consistently with the native `image` component.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// vite.config.(js|ts)
|
||||||
|
|
||||||
|
import uni from '@dcloudio/vite-plugin-uni'
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
// ...
|
||||||
|
uni({
|
||||||
|
vueOptions: {
|
||||||
|
template: {
|
||||||
|
transformAssetUrls: {
|
||||||
|
tags: {
|
||||||
|
'wd-img': ['src']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
]
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
After updating the configuration, restart the development server to apply the changes.
|
||||||
|
For more details, see [uni-app issue#4997](https://github.com/dcloudio/uni-app/issues/4997#issuecomment-2456851123).
|
||||||
|
:::
|
||||||
|
|
||||||
## Slots
|
## Slots
|
||||||
|
|
||||||
Use `loading` and `error` slots to set display content during image loading and after loading failure
|
Use `loading` and `error` slots to set display content during image loading and after loading failure
|
||||||
|
|||||||
@ -242,6 +242,7 @@ Set the `error-message` attribute to display an error message below the input.
|
|||||||
| label-width | Label width | string | 33% | - |
|
| label-width | Label width | string | 33% | - |
|
||||||
| cell | Whether to display in cell style | boolean | false | - |
|
| cell | Whether to display in cell style | boolean | false | - |
|
||||||
| required | Whether to display the required asterisk | boolean | false | - |
|
| required | Whether to display the required asterisk | boolean | false | - |
|
||||||
|
| marker-side | Position of the required marker | 'before' \| 'after' | 'before' | 1.12.0 |
|
||||||
| center | Whether to vertically center the content | boolean | false | - |
|
| center | Whether to vertically center the content | boolean | false | - |
|
||||||
| active-color | Active color when focused | string | - | - |
|
| active-color | Active color when focused | string | - | - |
|
||||||
| adjust-position | Whether to adjust the position when the keyboard is displayed | boolean | true | - |
|
| adjust-position | Whether to adjust the position when the keyboard is displayed | boolean | true | - |
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
---
|
---
|
||||||
version: 1.3.10
|
version: 1.3.10
|
||||||
---
|
---
|
||||||
|
|
||||||
# Keyboard
|
# Keyboard
|
||||||
|
|
||||||
Virtual keyboard for inputting numbers, passwords, ID cards, or license plate numbers.
|
Virtual keyboard for inputting numbers, passwords, ID cards, or license plate numbers.
|
||||||
@ -93,6 +94,42 @@ const onInput = (value) => showToast(`${value}`)
|
|||||||
const onDelete = () => showToast('Delete')
|
const onDelete = () => showToast('Delete')
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## License Plate Keyboard Language Control
|
||||||
|
|
||||||
|
You can control the language mode of the license plate keyboard through the `car-lang` property, supporting Chinese provinces (`zh`) and English letters (`en`). Use the `auto-switch-lang` property to control whether to automatically switch languages.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- Controlled mode: Manual language switching -->
|
||||||
|
<wd-cell title="License Plate Keyboard (Controlled)" :value="value" is-link @click="showKeyBoard" />
|
||||||
|
|
||||||
|
<wd-keyboard v-model="value" v-model:visible="visible" v-model:car-lang="lang" mode="car" @input="onInput" @delete="onDelete"></wd-keyboard>
|
||||||
|
|
||||||
|
<!-- Uncontrolled mode: Disable auto-switching -->
|
||||||
|
<wd-cell title="License Plate Keyboard (No Auto-switch)" :value="value2" is-link @click="showKeyBoard2" />
|
||||||
|
|
||||||
|
<wd-keyboard v-model="value2" v-model:visible="visible2" mode="car" auto-switch-lang @input="onInput" @delete="onDelete"></wd-keyboard>
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
const { show: showToast } = useToast()
|
||||||
|
const visible = ref<boolean>(false)
|
||||||
|
const visible2 = ref<boolean>(false)
|
||||||
|
const value = ref<string>('')
|
||||||
|
const value2 = ref<string>('')
|
||||||
|
const lang = ref<'zh' | 'en'>('zh')
|
||||||
|
|
||||||
|
function showKeyBoard() {
|
||||||
|
visible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
function showKeyBoard2() {
|
||||||
|
visible2.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const onInput = (value) => showToast(`${value}`)
|
||||||
|
const onDelete = () => showToast('Delete')
|
||||||
|
```
|
||||||
|
|
||||||
## Keyboard with Title
|
## Keyboard with Title
|
||||||
|
|
||||||
You can set the keyboard title through the `title` property.
|
You can set the keyboard title through the `title` property.
|
||||||
@ -201,33 +238,86 @@ You can bind the keyboard's current input value through `v-model` and limit the
|
|||||||
></wd-keyboard>
|
></wd-keyboard>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
const { show: showToast } = useToast()
|
||||||
|
const visible = ref<boolean>(false)
|
||||||
|
const value1 = ref<string>('')
|
||||||
|
|
||||||
|
function showKeyBoard() {
|
||||||
|
visible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const onInput = (value) => showToast(`${value}`)
|
||||||
|
const onDelete = () => showToast('Delete')
|
||||||
|
```
|
||||||
|
|
||||||
|
## Display Modal Overlay
|
||||||
|
|
||||||
|
`hideOnClickOutside` controls whether the keyboard popup has an overlay, and `modal` controls whether the overlay is transparent.
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
Currently `modal` only controls whether the overlay is transparent, `hideOnClickOutside` controls whether the popup has an overlay. When there is an overlay, clicking the overlay can close the keyboard, but when the keyboard is open, you must click the overlay to close the current keyboard before you can click other buttons. You can also disable `hideOnClickOutside` and manually control whether the keyboard is displayed to implement closing the keyboard when clicking outside, which is more flexible.
|
||||||
|
:::
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-cell title="Two-way Binding" :value="value1" is-link @click="showKeyBoard" />
|
||||||
|
<wd-keyboard :modal="true" :hide-on-click-outside="true" v-model:visible="visible" @input="onInput" @delete="onDelete" />
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
const { show: showToast } = useToast()
|
||||||
|
const visible = ref<boolean>(false)
|
||||||
|
const value1 = ref<string>('')
|
||||||
|
|
||||||
|
function showKeyBoard() {
|
||||||
|
visible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const onInput = (value) => showToast(`${value}`)
|
||||||
|
const onDelete = () => showToast('Delete')
|
||||||
|
```
|
||||||
|
|
||||||
## Attributes
|
## Attributes
|
||||||
|
|
||||||
| Attribute | Description | Type | Default | Version |
|
| Parameter | Description | Type | Options | Default | Version |
|
||||||
|---------|-------------|------|---------|------|
|
| ------------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------- | -------------------------- | ---------- | ------- |
|
||||||
| v-model:visible | Whether to display keyboard | boolean | false | - |
|
| v-model:visible | Whether to display | `boolean` | - | `false` | 1.3.10 |
|
||||||
| v-model | Keyboard input value | string | - | - |
|
| v-model | Bound value | `string` | - | - | 1.3.10 |
|
||||||
| maxlength | Maximum input length | number | - | - |
|
| title | Title | `string` | - | - | 1.3.10 |
|
||||||
| title | Keyboard title | string | - | - |
|
| mode | Keyboard mode | `string` | `default`, `car`, `custom` | `default` | 1.3.10 |
|
||||||
| mode | Keyboard mode, can be set to `custom` or `car` | string | - | - |
|
| zIndex | Z-index | `number` | - | `100` | 1.3.10 |
|
||||||
| close-text | Text of close button | string | - | - |
|
| maxlength | Maximum length | `number` | - | `Infinity` | 1.3.10 |
|
||||||
| extra-key | Content of extra key | string / string[] | - | - |
|
| showDeleteKey | Whether to show delete key | `boolean` | - | `true` | 1.3.10 |
|
||||||
| random-key-order | Whether to randomly arrange number keys | boolean | false | - |
|
| randomKeyOrder | Whether to randomize keyboard key order | `boolean` | - | `false` | 1.3.10 |
|
||||||
| show-close-button | Whether to show close button | boolean | true | - |
|
| closeText | Confirm button text | `string` | - | - | 1.3.10 |
|
||||||
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | boolean | true | - |
|
| deleteText | Delete button text | `string` | - | - | 1.3.10 |
|
||||||
| z-index | Keyboard z-index | number | 100 | - |
|
| closeButtonLoading | Whether close button shows loading state | `boolean` | - | `false` | 1.3.10 |
|
||||||
| root-portal | Whether to detach from the page, used to solve various fixed positioning issues | boolean | false | 1.11.0 |
|
| modal | Whether to show modal overlay | `boolean` | - | `false` | 1.3.10 |
|
||||||
|
| hideOnClickOutside | Whether to close keyboard when clicking outside | `boolean` | - | `true` | 1.3.10 |
|
||||||
|
| lockScroll | Whether to lock background scroll, when locked, content in the overlay will also not scroll | `boolean` | - | `true` | 1.3.10 |
|
||||||
|
| safeAreaInsetBottom | Whether to enable bottom safe area | `boolean` | - | `true` | 1.3.10 |
|
||||||
|
| extraKey | Extra key | `string` / `string[]` | - | - | 1.3.10 |
|
||||||
|
| root-portal | Whether to detach from the page, used to solve various fixed positioning issues | `boolean` | - | `false` | 1.11.0 |
|
||||||
|
| v-model:carLang | License plate keyboard language mode, effective when mode=car | `string` | `zh`, `en` | - | 1.13.0 |
|
||||||
|
| autoSwitchLang | Whether to automatically switch license plate keyboard language, effective when mode=car and car-lang is uncontrolled | `boolean` | - | `false` | 1.13.0 |
|
||||||
|
|
||||||
|
## Slot
|
||||||
|
|
||||||
|
| name | Description | Type | Version |
|
||||||
|
| ----- | ----------- | ---- | ------- |
|
||||||
|
| title | Title | - | 1.2.12 |
|
||||||
|
|
||||||
## Events
|
## Events
|
||||||
|
|
||||||
| Event | Description | Parameters |
|
| Event Name | Description | Parameters | Version |
|
||||||
|-------|-------------|------------|
|
| ---------- | ------------------------------------------------- | ----------- | ------- |
|
||||||
| input | Triggered when a key is pressed | key: The pressed key |
|
| input | Triggered when a key is pressed | key: string | - |
|
||||||
| delete | Triggered when delete key is pressed | - |
|
| delete | Triggered when delete key is pressed | - | - |
|
||||||
| close | Triggered when keyboard is closed | - |
|
| close | Triggered when close button or outside is clicked | - | - |
|
||||||
|
|
||||||
## Slots
|
## External Style Classes
|
||||||
|
|
||||||
| Name | Description |
|
| Class Name | Description | Version |
|
||||||
|------|-------------|
|
| ------------ | --------------------- | ------- |
|
||||||
| title | Custom title content |
|
| custom-class | Root node style class | 1.3.10 |
|
||||||
|
| custom-style | Root node style | 1.3.10 |
|
||||||
|
|||||||
@ -2,6 +2,10 @@
|
|||||||
|
|
||||||
A dialog box that pops up, commonly used for message prompts, message confirmation, etc., supports function calls.
|
A dialog box that pops up, commonly used for message prompts, message confirmation, etc., supports function calls.
|
||||||
|
|
||||||
|
:::tip Note
|
||||||
|
For global calling solutions, see [wot-starter](https://starter.wot-ui.cn/guide/feedback.html), which supports globally callable feedback components for use in scenarios like route navigation guards and network request interceptors.
|
||||||
|
:::
|
||||||
|
|
||||||
## Alert Dialog
|
## Alert Dialog
|
||||||
|
|
||||||
Alert dialog only has a confirm button, used for strong reminders.
|
Alert dialog only has a confirm button, used for strong reminders.
|
||||||
|
|||||||
@ -108,6 +108,7 @@ const onChangeDistrict = (pickerView, value, columnIndex, resolve) => {
|
|||||||
| loading | Loading state | boolean | - | false | - |
|
| loading | Loading state | boolean | - | false | - |
|
||||||
| loading-color | Loading color, can only use hexadecimal color values and cannot use abbreviated form | string | - | #4D80F0 | - |
|
| loading-color | Loading color, can only use hexadecimal color values and cannot use abbreviated form | string | - | #4D80F0 | - |
|
||||||
| columns-height | Height of picker's internal cylinder | number | - | 231 | - |
|
| columns-height | Height of picker's internal cylinder | number | - | 231 | - |
|
||||||
|
| item-height | Height of picker item | number | - | 35 | 1.13.0 |
|
||||||
| value-key | Key for value in option object | string | - | value | - |
|
| value-key | Key for value in option object | string | - | value | - |
|
||||||
| label-key | Key for display text in option object | string | - | label | - |
|
| label-key | Key for display text in option object | string | - | label | - |
|
||||||
| column-change | Function that receives pickerView instance, selected item, current modified column index, resolve as parameters | function | - | - | - |
|
| column-change | Function that receives pickerView instance, selected item, current modified column index, resolve as parameters | function | - | - | - |
|
||||||
|
|||||||
@ -258,6 +258,7 @@ Enable `use-default-slot` and use the default slot to customize the picker trigg
|
|||||||
| label-width | Left-side label width | string | - | 33% | - |
|
| label-width | Left-side label width | string | - | 33% | - |
|
||||||
| error | Error state (displays value in red) | boolean | - | false | - |
|
| error | Error state (displays value in red) | boolean | - | false | - |
|
||||||
| required | Required field style | boolean | - | false | - |
|
| required | Required field style | boolean | - | false | - |
|
||||||
|
| marker-side | Position of the required marker | 'before' \| 'after' | - | 'before' | 1.12.0 |
|
||||||
| align-right | Right-align the picker value | boolean | - | false | - |
|
| align-right | Right-align the picker value | boolean | - | false | - |
|
||||||
| use-label-slot | Use label slot | boolean | - | false | - |
|
| use-label-slot | Use label slot | boolean | - | false | - |
|
||||||
| use-default-slot | Use default slot | boolean | - | false | - |
|
| use-default-slot | Use default slot | boolean | - | false | - |
|
||||||
|
|||||||
@ -1,88 +1,80 @@
|
|||||||
# Popup
|
# Popup
|
||||||
|
|
||||||
A popup layer that displays content on top of the current page.
|
A popup layer component used to display popups, information prompts, and other content.
|
||||||
|
|
||||||
## Basic Usage
|
## Basic Usage
|
||||||
|
|
||||||
The `visible` attribute controls whether the popup is displayed. The `position` attribute sets the popup position, which can be 'center', 'top', 'right', 'bottom', 'left', default is 'center'.
|
`v-model` is the binding value that indicates whether to display the popup layer.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<wd-popup :visible.sync="show" position="bottom">
|
<wd-popup v-model="show" custom-style="border-radius:32rpx;" @close="handleClose">
|
||||||
<view style="height: 200px; text-align: center; line-height: 200px;">
|
<text class="custom-txt">Pop Pop Pop</text>
|
||||||
Content
|
|
||||||
</view>
|
|
||||||
</wd-popup>
|
</wd-popup>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
.custom-txt {
|
||||||
|
color: black;
|
||||||
|
width: 400rpx;
|
||||||
|
height: 400rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 40rpx;
|
||||||
|
border-radius: 32rpx;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Popup Position
|
||||||
|
|
||||||
|
Set `position`, default is 'center', optional values are 'top', 'right', 'bottom', 'left'.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-popup v-model="show" position="top" custom-style="height: 200px;" @close="handleClose"></wd-popup>
|
||||||
|
```
|
||||||
|
|
||||||
## Close Button
|
## Close Button
|
||||||
|
|
||||||
Set the `closable` attribute to display a close button in the popup.
|
Set the `closable` attribute.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<wd-popup :visible.sync="show" position="bottom" closable>
|
<wd-popup v-model="show" position="bottom" closable custom-style="height: 200px;" @close="handleClose"></wd-popup>
|
||||||
<view style="height: 200px; text-align: center; line-height: 200px;">
|
|
||||||
Content
|
|
||||||
</view>
|
|
||||||
</wd-popup>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Close Button Position
|
|
||||||
|
|
||||||
Set the `close-position` attribute to customize the position of the close button, which can be 'top-left', 'top-right', 'bottom-left', 'bottom-right', default is 'top-right'.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<wd-popup :visible.sync="show" position="bottom" closable close-position="top-left">
|
|
||||||
<view style="height: 200px; text-align: center; line-height: 200px;">
|
|
||||||
Content
|
|
||||||
</view>
|
|
||||||
</wd-popup>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Custom Close Icon
|
|
||||||
|
|
||||||
Set the `close-icon` attribute to customize the close icon.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<wd-popup :visible.sync="show" position="bottom" closable close-icon="check">
|
|
||||||
<view style="height: 200px; text-align: center; line-height: 200px;">
|
|
||||||
Content
|
|
||||||
</view>
|
|
||||||
</wd-popup>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Rounded Corners
|
|
||||||
|
|
||||||
Set the `border-radius` attribute to customize the border radius of the popup. This attribute is only valid when the position is 'top', 'right', 'bottom', 'left'.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<wd-popup :visible.sync="show" position="bottom" border-radius="16px">
|
|
||||||
<view style="height: 200px; text-align: center; line-height: 200px;">
|
|
||||||
Content
|
|
||||||
</view>
|
|
||||||
</wd-popup>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Disable Mask Click
|
## Disable Mask Click
|
||||||
|
|
||||||
Set the `close-on-click-modal` attribute to `false` to disable closing the popup when clicking the mask.
|
By setting the `close-on-click-modal` attribute to `false`, you can disable the function of closing the popup layer when the user clicks the mask layer.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<wd-popup :visible.sync="show" position="bottom" :close-on-click-modal="false">
|
<wd-popup v-model="show" position="bottom" :close-on-click-modal="false" closable custom-style="height: 200px;" @close="handleClose"></wd-popup>
|
||||||
<view style="height: 200px; text-align: center; line-height: 200px;">
|
```
|
||||||
Content
|
|
||||||
</view>
|
## Disable Mask
|
||||||
</wd-popup>
|
|
||||||
|
By setting the `modal` attribute to `false`, you can disable the mask layer, allowing users to interact with the underlying content.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-popup v-model="show" position="bottom" :modal="false" closable custom-style="height: 200px;" @close="handleClose"></wd-popup>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Enable Bottom Safe Area
|
||||||
|
|
||||||
|
By setting the `safe-area-inset-bottom` attribute to `true`, you can ensure that the popup layer is not blocked by the bottom safe area when displayed at the bottom.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-popup v-model="show" position="bottom" :safe-area-inset-bottom="true" custom-style="height: 200px;" @close="handleClose"></wd-popup>
|
||||||
```
|
```
|
||||||
|
|
||||||
## root-portal
|
## root-portal
|
||||||
|
|
||||||
When the `root-portal` attribute is set to `true`, the popup will be teleported to the page root node, which can avoid the influence of parent component's transform, filter and other CSS properties on the fixed positioning of the popup.
|
When the `root-portal` attribute is set to `true`, the popup will be detached from the page, which can avoid the influence of parent component's transform, filter and other CSS properties on the fixed positioning of the popup.
|
||||||
|
|
||||||
Different platforms use different implementation schemes:
|
Different platforms use different implementation schemes:
|
||||||
|
|
||||||
- **H5**: Use Vue 3's teleport feature
|
- **H5**: Use Vue 3's teleport feature
|
||||||
- **APP**: Use renderjs to move elements to the uni-app root node
|
- **APP**: Use renderjs to move elements to the uni-app root node
|
||||||
- **WeChat Mini Program/Alipay Mini Program**: Use root-portal component
|
- **WeChat Mini Program/Alipay Mini Program**: Use root-portal component
|
||||||
- **Other platforms**: root-portal feature is not supported
|
- **Other platforms**: This feature is not supported
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<wd-popup v-model="show" root-portal position="center" custom-style="height: 200px;" @close="handleClose">
|
<wd-popup v-model="show" root-portal position="center" custom-style="height: 200px;" @close="handleClose">
|
||||||
@ -94,45 +86,60 @@ Different platforms use different implementation schemes:
|
|||||||
This feature is mainly used to solve layering and positioning issues of popups in complex layouts, and it is recommended to enable it only when needed.
|
This feature is mainly used to solve layering and positioning issues of popups in complex layouts, and it is recommended to enable it only when needed.
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
## Prevent Scroll Penetration
|
||||||
|
|
||||||
|
When using the component, you will find that when the content part scrolls to the bottom, continuing to swipe will cause the underlying page to scroll, which is scroll penetration.
|
||||||
|
|
||||||
|
Currently, the component can handle some scroll penetration issues through the `lock-scroll` attribute. However, due to the reasons of the mini-program and APP platforms themselves, scroll penetration will still occur in the popup content area. However, we provide developers with a recommended solution to completely solve scroll penetration:
|
||||||
|
|
||||||
|
You can use the [page-meta](https://uniapp.dcloud.net.cn/component/page-meta#page-meta) component to dynamically modify the `overflow` attribute of `page-meta`.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- page-meta can only be the first node in the page -->
|
||||||
|
<page-meta :page-style="`overflow:${show ? 'hidden' : 'visible'};`"></page-meta>
|
||||||
|
|
||||||
|
<wd-popup v-model="show" lock-scroll position="bottom" :safe-area-inset-bottom="true" custom-style="height: 200px;" @close="handleClose"></wd-popup>
|
||||||
|
```
|
||||||
|
|
||||||
|
:::tip Tip
|
||||||
|
H5 scroll penetration does not need to be handled, the component has enabled `lock-scroll` by default.
|
||||||
|
:::
|
||||||
|
|
||||||
## Attributes
|
## Attributes
|
||||||
|
|
||||||
| Attribute | Description | Type | Default | Version |
|
|Attribute|Description|Type|Optional Values|Default|Version|
|
||||||
|---------|---------|---------|---------|------|
|
|---|---|---|---|---|---|
|
||||||
| visible | Whether to display the popup, supports the .sync modifier | boolean | false | - |
|
|v-model|Whether to show popup|boolean|-|-|-|
|
||||||
| position | Popup position | string | center | - |
|
|position|Popup position|string|center/top/right/bottom/left|center|-|
|
||||||
| closable | Whether to display the close button | boolean | false | - |
|
|closable|Whether to show close button|boolean|-|false|-|
|
||||||
| close-position | Close button position | string | top-right | - |
|
|close-on-click-modal|Whether to close when clicking mask|boolean|-|true|-|
|
||||||
| close-icon | Close button icon | string | close | - |
|
|duration|Animation duration|number/boolean|-|300(ms)|-|
|
||||||
| modal | Whether to display the mask | boolean | true | - |
|
|z-index|Popup z-index|number|-|10|-|
|
||||||
| modal-style | Custom mask style | object | - | - |
|
|custom-style|Custom popup style|string|-|-|-|
|
||||||
| modal-class | Custom mask class | string | - | - |
|
|modal|Whether to show mask|boolean|-|true|-|
|
||||||
| z-index | z-index | number | 10 | - |
|
|modal-style|Custom mask style|string|-|-|-|
|
||||||
| lazy-render | Whether to lazily render the popup | boolean | true | - |
|
|hide-when-close|Whether to hide when closed|boolean|-|true|-|
|
||||||
| close-on-click-modal | Whether to close the popup when clicking the mask | boolean | true | - |
|
|lazy-render|Whether to enable lazy rendering|boolean|-|true|-|
|
||||||
| duration | Animation duration | number | 300(ms) | - |
|
|safe-area-inset-bottom|Whether to enable bottom safe area|boolean|-|false|-|
|
||||||
| custom-style | Custom popup style | object | - | - |
|
|transition|Transition type|string|fade/fade-up/fade-down/fade-left/fade-right/slide-up/slide-down/slide-left/slide-right/zoom-in|-|-|
|
||||||
| border-radius | Border radius of the popup | string | 0 | - |
|
|lock-scroll|Whether to lock background scroll|boolean|-|true|0.1.30|
|
||||||
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | boolean | false | - |
|
|root-portal|Whether to mount to root node|boolean|-|false|1.11.0|
|
||||||
| root-portal | Whether to break away from the page to solve various fixed failure issues | boolean | false | 1.11.0 |
|
|
||||||
|
|
||||||
## Events
|
## Events
|
||||||
|
|
||||||
| Event Name | Description | Parameters | Version |
|
|Event|Description|Parameters|Version|
|
||||||
|---------|---------|---------|------|
|
|---|---|---|---|
|
||||||
| open | Triggered when the popup is opened | - | - |
|
|close|Triggered when popup is closed|-|-|
|
||||||
| opened | Triggered when the popup opening animation ends | - | - |
|
|click-modal|Triggered when mask is clicked|-|-|
|
||||||
| close | Triggered when the popup is closed | - | - |
|
|before-enter|Triggered before enter transition starts|-|-|
|
||||||
| closed | Triggered when the popup closing animation ends | - | - |
|
|enter|Triggered when enter transition starts|-|-|
|
||||||
| click-modal | Triggered when the mask is clicked | - | - |
|
|after-enter|Triggered when enter transition ends|-|-|
|
||||||
|
|before-leave|Triggered before leave transition starts|-|-|
|
||||||
## Slots
|
|leave|Triggered when leave transition starts|-|-|
|
||||||
|
|after-leave|Triggered when leave transition ends|-|-|
|
||||||
| Name | Description | Version |
|
|
||||||
|---------|---------|------|
|
|
||||||
| default | Content of the popup | - |
|
|
||||||
|
|
||||||
## External Style Classes
|
## External Style Classes
|
||||||
|
|
||||||
|Class Name|Description|Version|
|
|Class Name|Description|Version|
|
||||||
|---------|---------|------|
|
|---|---|---|
|
||||||
| custom-class | Root node custom class | - |
|
|custom-class|Root node style|-|
|
||||||
|
|||||||
@ -67,6 +67,14 @@ Set the `allowHalf` property.
|
|||||||
<wd-rate v-model="value" allow-half />
|
<wd-rate v-model="value" allow-half />
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Allow Clear Rating
|
||||||
|
|
||||||
|
Set the `clearable` property. When clearable is set to true, clicking the same value again can reset the value to 0.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-rate v-model="value" clearable />
|
||||||
|
```
|
||||||
|
|
||||||
## Attributes
|
## Attributes
|
||||||
|
|
||||||
| Parameter | Description | Type | Options | Default | Version |
|
| Parameter | Description | Type | Options | Default | Version |
|
||||||
@ -83,6 +91,7 @@ Set the `allowHalf` property.
|
|||||||
| disabled | Whether it's disabled | boolean | - | false | - |
|
| disabled | Whether it's disabled | boolean | - | false | - |
|
||||||
| disabled-color | Disabled icon color | string | - | linear-gradient(315deg, rgba(177,177,177,1) 0%,rgba(199,199,199,1) 100%) | - |
|
| disabled-color | Disabled icon color | string | - | linear-gradient(315deg, rgba(177,177,177,1) 0%,rgba(199,199,199,1) 100%) | - |
|
||||||
| allow-half | Whether to allow half selection | boolean | - | false | 1.7.0 |
|
| allow-half | Whether to allow half selection | boolean | - | false | 1.7.0 |
|
||||||
|
| clearable | Whether to allow clear rating | boolean | - | false | 1.13.0 |
|
||||||
|
|
||||||
## Events
|
## Events
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
# Resize
|
# Resize
|
||||||
|
|
||||||
When the size of the document flow wrapped by the component changes, it triggers the `size` event. Generally used to monitor changes in DOM dimensions and positions caused by DOM content updates, re-acquire DOM dimensions and positions, and perform calculations for content display.
|
When the size of the document flow wrapped by the component changes, it triggers the `resize` event. Generally used to monitor changes in DOM dimensions and positions caused by DOM content updates, re-acquire DOM dimensions and positions, and perform calculations for content display.
|
||||||
|
|
||||||
## Basic Usage
|
## Basic Usage
|
||||||
|
|
||||||
@ -29,8 +29,22 @@ function handleResize(detail: Record<string, string | number>) {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Attributes
|
||||||
|
|
||||||
|
| Parameter | Description | Type | Optional Values | Default | Version |
|
||||||
|
| ---------------------- | ---------------------------- | ------ | --------------- | ------- | ------- |
|
||||||
|
| custom-style | Custom root node style | string | - | - | - |
|
||||||
|
| custom-class | Custom root node style class | string | - | - | - |
|
||||||
|
| custom-container-class | Custom container style class | string | - | - | - |
|
||||||
|
|
||||||
## Events
|
## Events
|
||||||
|
|
||||||
| Event Name | Description | Parameters | Version |
|
| Event Name | Description | Parameters | Version |
|
||||||
|------------|-------------|------------|----------|
|
| ---------- | --------------------------- | ------------------------------------------------------------------------------------------- | ------- |
|
||||||
| resize | Triggered when size changes | `{width: number, height: number, top: number, right: number, bottom: number, left: number}` | - |
|
| resize | Triggered when size changes | `{width: number, height: number, top: number, right: number, bottom: number, left: number}` | - |
|
||||||
|
|
||||||
|
## Slots
|
||||||
|
|
||||||
|
| Slot Name | Description | Version |
|
||||||
|
| --------- | ----------------------------------- | ------- |
|
||||||
|
| default | Content to monitor for size changes | - |
|
||||||
|
|||||||
@ -54,8 +54,16 @@ Use `wd-root-portal` to render content to the root node, avoiding style interfer
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Attributes
|
||||||
|
|
||||||
|
This component has no attribute configuration.
|
||||||
|
|
||||||
|
## Events
|
||||||
|
|
||||||
|
This component has no events.
|
||||||
|
|
||||||
## Slots
|
## Slots
|
||||||
|
|
||||||
| Name | Description | Version |
|
| Name | Description | Version |
|
||||||
| ------- | ------------------------------ | ------- |
|
| ------- | ------------------------------ | ------- |
|
||||||
| default | Default slot for portal content | - |
|
| default | Default slot for portal content | 1.11.0 |
|
||||||
@ -74,14 +74,14 @@ const list = ref([
|
|||||||
value: 'Li Lei',
|
value: 'Li Lei',
|
||||||
disabled: false,
|
disabled: false,
|
||||||
payload: {
|
payload: {
|
||||||
avatar: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg'
|
avatar: 'https://wot-ui.cn/assets/redpanda.jpg'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 'Han Meimei',
|
value: 'Han Meimei',
|
||||||
disabled: false,
|
disabled: false,
|
||||||
payload: {
|
payload: {
|
||||||
avatar: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg'
|
avatar: 'https://wot-ui.cn/assets/capybara.jpg'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
|
|||||||
@ -247,6 +247,8 @@ Set the `label-key` property to customize the key name of the option label.
|
|||||||
| size | Size | string | - | - |
|
| size | Size | string | - | - |
|
||||||
| error | Whether to be in error state | boolean | false | - |
|
| error | Whether to be in error state | boolean | false | - |
|
||||||
| error-message | Error message | string | - | - |
|
| error-message | Error message | string | - | - |
|
||||||
|
| required | Whether to display the required asterisk | boolean | false | - |
|
||||||
|
| marker-side | Position of the required marker | 'before' \| 'after' | 'before' | 1.12.0 |
|
||||||
| align | Alignment of right content | string | 'left' | - |
|
| align | Alignment of right content | string | 'left' | - |
|
||||||
| before-confirm | Validation function before confirming | function | - | - |
|
| before-confirm | Validation function before confirming | function | - | - |
|
||||||
| display-format | Display format function | function | - | - |
|
| display-format | Display format function | function | - | - |
|
||||||
|
|||||||
@ -49,7 +49,7 @@ Customize the image size through the `image-size` property.
|
|||||||
When you need to customize the image, you can pass any image URL in the `image` property.
|
When you need to customize the image, you can pass any image URL in the `image` property.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<wd-status-tip image="https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg" tip="View my avatar" />
|
<wd-status-tip image="https://wot-ui.cn/assets/panda.jpg" tip="View my avatar" />
|
||||||
```
|
```
|
||||||
|
|
||||||
## Custom Image Content
|
## Custom Image Content
|
||||||
@ -64,6 +64,31 @@ Use the `image` slot to customize image content.
|
|||||||
</wd-status-tip>
|
</wd-status-tip>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Custom Bottom Content
|
||||||
|
|
||||||
|
Use the `bottom` slot to render custom content at the bottom (e.g., action buttons). It’s recommended to wrap slot content with a container for layout and spacing control.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-status-tip image="content" tip="No search results">
|
||||||
|
<template #bottom>
|
||||||
|
<view class="bottom-actions">
|
||||||
|
<wd-button type="info">Reload</wd-button>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</wd-status-tip>
|
||||||
|
```
|
||||||
|
|
||||||
|
Suggested styles (add to page or global styles):
|
||||||
|
|
||||||
|
```css
|
||||||
|
.bottom-actions {
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
## Attributes
|
## Attributes
|
||||||
|
|
||||||
| Parameter | Description | Type | Options | Default | Version |
|
| Parameter | Description | Type | Options | Default | Version |
|
||||||
@ -86,3 +111,4 @@ Use the `image` slot to customize image content.
|
|||||||
| Name | Description | Version |
|
| Name | Description | Version |
|
||||||
|------|-------------|----------|
|
|------|-------------|----------|
|
||||||
| image | Image content | 1.3.12 |
|
| image | Image content | 1.3.12 |
|
||||||
|
| bottom | Bottom content | $LOWEST_VERSION$ |
|
||||||
@ -18,11 +18,11 @@ Control whether the carousel automatically plays through the `autoplay` property
|
|||||||
const current = ref<number>(0)
|
const current = ref<number>(0)
|
||||||
|
|
||||||
const swiperList = ref([
|
const swiperList = ref([
|
||||||
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
|
'https://wot-ui.cn/assets/redpanda.jpg',
|
||||||
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
|
'https://wot-ui.cn/assets/capybara.jpg',
|
||||||
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
|
'https://wot-ui.cn/assets/panda.jpg',
|
||||||
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
|
'https://wot-ui.cn/assets/moon.jpg',
|
||||||
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg'
|
'https://wot-ui.cn/assets/meng.jpg'
|
||||||
])
|
])
|
||||||
function handleClick(e) {
|
function handleClick(e) {
|
||||||
console.log(e)
|
console.log(e)
|
||||||
@ -67,7 +67,7 @@ const videoList = ref([
|
|||||||
'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_115503.mp4',
|
'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_115503.mp4',
|
||||||
'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_150752.mp4',
|
'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_150752.mp4',
|
||||||
'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_155516.mp4',
|
'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_155516.mp4',
|
||||||
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg'
|
'https://wot-ui.cn/assets/moon.jpg'
|
||||||
])
|
])
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -201,31 +201,216 @@ Set the `display-multiple-items` property to control the number of slides displa
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Vertical Direction
|
||||||
|
|
||||||
|
Set `direction` to `vertical` to arrange slides vertically.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-swiper
|
||||||
|
:list="swiperList"
|
||||||
|
direction="vertical"
|
||||||
|
indicatorPosition="right"
|
||||||
|
autoplay
|
||||||
|
v-model:current="current"
|
||||||
|
:indicator="{ type: 'dots-bar' }"
|
||||||
|
@click="handleClick"
|
||||||
|
@change="onChange"
|
||||||
|
></wd-swiper>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Custom Indicator
|
||||||
|
|
||||||
|
Use the `indicator` slot to customize the indicator style.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-swiper
|
||||||
|
:list="swiperList"
|
||||||
|
direction="vertical"
|
||||||
|
indicatorPosition="right"
|
||||||
|
autoplay
|
||||||
|
v-model:current="current"
|
||||||
|
@click="handleClick"
|
||||||
|
@change="onChange"
|
||||||
|
>
|
||||||
|
<template #indicator="{ current, total }">
|
||||||
|
<view class="custom-indicator" style="position: absolute; bottom: 24rpx; right: 24rpx">{{ current + 1 }}/{{ total }}</view>
|
||||||
|
</template>
|
||||||
|
</wd-swiper>
|
||||||
|
```
|
||||||
|
|
||||||
|
```scss
|
||||||
|
.custom-indicator {
|
||||||
|
padding: 0 12rpx;
|
||||||
|
height: 48rpx;
|
||||||
|
line-height: 48rpx;
|
||||||
|
border-radius: 45%;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Specify valueKey and textKey
|
||||||
|
|
||||||
|
Use `value-key` to specify the image address field in each object of the `list`, default is `value`.
|
||||||
|
|
||||||
|
Use `text-key` to specify the title field in each object of the `list`, default is `text`.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-swiper
|
||||||
|
value-key="url"
|
||||||
|
text-key="title"
|
||||||
|
:list="customSwiperList"
|
||||||
|
autoplay
|
||||||
|
v-model:current="current"
|
||||||
|
@click="handleClick"
|
||||||
|
@change="onChange"
|
||||||
|
></wd-swiper>
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
const current = ref<number>(0)
|
||||||
|
|
||||||
|
const customSwiperList = ref([
|
||||||
|
{ url: 'https://wot-ui.cn/assets/redpanda.jpg', title: 'Red Panda!' },
|
||||||
|
{ url: 'https://wot-ui.cn/assets/capybara.jpg', title: 'Capybara!' },
|
||||||
|
{ url: 'https://wot-ui.cn/assets/panda.jpg', title: 'Giant Panda!' },
|
||||||
|
{ url: 'https://wot-ui.cn/assets/moon.jpg', title: 'Poetic China!' }
|
||||||
|
])
|
||||||
|
```
|
||||||
|
|
||||||
|
## Property Control Switching
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-swiper :loop="isLoop" :autoplay="false" :list="swiperList" v-model:current="current" />
|
||||||
|
<wd-gap />
|
||||||
|
<wd-cell-group>
|
||||||
|
<wd-cell title="loop">
|
||||||
|
<wd-switch v-model="isLoop" size="24px" />
|
||||||
|
</wd-cell>
|
||||||
|
<wd-cell title="current" :value="current.toString()" />
|
||||||
|
</wd-cell-group>
|
||||||
|
<view style="display: flex; justify-content: space-between">
|
||||||
|
<wd-button @click="current--">prev</wd-button>
|
||||||
|
<wd-button type="success" @click="current++">next</wd-button>
|
||||||
|
</view>
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const current = ref<number>(0)
|
||||||
|
const isLoop = ref(false)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Slot Usage
|
||||||
|
|
||||||
|
Use the default slot to customize the content of carousel items.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-swiper
|
||||||
|
:list="swiperList"
|
||||||
|
autoplay
|
||||||
|
v-model:current="current"
|
||||||
|
:indicator="{ type: 'dots-bar' }"
|
||||||
|
@click="handleClick"
|
||||||
|
@change="onChange"
|
||||||
|
>
|
||||||
|
<template #default="{ item }">
|
||||||
|
<image :src="item as string" mode="aspectFill" style="width: 100%; height: 100%" />
|
||||||
|
</template>
|
||||||
|
</wd-swiper>
|
||||||
|
```
|
||||||
|
|
||||||
## Attributes
|
## Attributes
|
||||||
|
|
||||||
| Attribute | Description | Type | Default | Version |
|
| Parameter | Description | Type | Optional Values | Default Value | Minimum Version |
|
||||||
|-----------|-------------|------|---------|----------|
|
| ------------------------- | ------------------------------------------------------------------ | --------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------- | ---------------- |
|
||||||
| list | List of images or videos to display | array | [] | - |
|
| autoplay | Whether to enable auto-play | `boolean` | - | true | 0.1.22 |
|
||||||
| v-model:current | Current slide index | number | 0 | - |
|
| v-model:current | Control which carousel item is currently displayed (index) | `number` | - | 0 | 0.1.22 |
|
||||||
| autoplay | Whether to enable auto-play | boolean | false | - |
|
| direction | Carousel sliding direction | `DirectionType` | `horizontal, vertical` | horizontal | 0.1.22 |
|
||||||
| interval | Auto-play interval (ms) | number | 3000 | - |
|
| displayMultipleItems | Number of slides displayed simultaneously | `number` | - | 1 | 0.1.22 |
|
||||||
| duration | Slide animation duration (ms) | number | 500 | - |
|
| duration | Slide animation duration | `number` | - | 300 | 0.1.22 |
|
||||||
| indicator | Indicator configuration object | object | { type: 'dots' } | - |
|
| easingFunction | Switching easing animation type (WeChat Mini Program, Kuaishou Mini Program, JD Mini Program) | `EasingType` | - | default | 0.1.22 |
|
||||||
| indicator-position | Indicator position | string | 'bottom' | - |
|
| height | Height of the carousel | `string / number` | - | 192 | 0.1.22 |
|
||||||
| previous-margin | Previous slide margin | string | '0px' | - |
|
| interval | Carousel interval time | `number` | - | 5000 | 0.1.22 |
|
||||||
| next-margin | Next slide margin | string | '0px' | - |
|
| list | Image list | `string[] / SwiperList[]` | - | - | 0.1.22 |
|
||||||
| display-multiple-items | Number of slides to display simultaneously | number | 1 | - |
|
| loop | Whether to enable loop playback | `boolean` | - | true | 0.1.22 |
|
||||||
| autoplay-video | Whether to auto-play videos | boolean | true | - |
|
| nextMargin | Next margin | `string / number` | - | 0 | 0.1.22 |
|
||||||
| stop-autoplay-when-video-play | Whether to stop carousel when playing video | boolean | false | - |
|
| indicatorPosition | Indicator display position | `IndicatorPositionType` | `left, top-left, top, top-right, bottom-left, bottom, bottom-right, right` | bottom | 0.1.22 |
|
||||||
| loop | Whether to enable loop mode | boolean | true | - |
|
| previousMargin | Previous margin | `string / number` | - | 0 | 0.1.22 |
|
||||||
| custom-indicator-class | Custom indicator class | string | - | - |
|
| snapToEdge | Whether margins should apply to first and last elements | `boolean` | - | false | 0.1.22 |
|
||||||
| custom-image-class | Custom image class | string | - | - |
|
| indicator | Complete indicator configuration | `SwiperIndicatorProps / boolean` | - | true | 0.1.22 |
|
||||||
| custom-next-image-class | Custom next image class | string | - | - |
|
| imageMode | Image cropping and scaling mode | `string` | Refer to official documentation [mode](https://uniapp.dcloud.net.cn/component/image.html#mode-%E6%9C%89%E6%95%88%E5%80%BC) | `aspectFill` | 0.1.55 |
|
||||||
| custom-prev-image-class | Custom previous image class | string | - | - |
|
| autoplayVideo | Whether videos auto-play, default is auto-play | `boolean` | - | true | 1.3.13 |
|
||||||
|
| stopPreviousVideo | Whether to stop previous video playback when switching carousel items, default stops previous video when switching | `boolean` | - | true | 1.3.13 |
|
||||||
|
| stopAutoplayWhenVideoPlay | Whether to stop auto-carousel when video is playing | `boolean` | - | false | 1.3.13 |
|
||||||
|
| customStyle | External custom style | `string` | - | '' | 0.1.22 |
|
||||||
|
| value-key | Key corresponding to value in option object | `string` | - | `value` | 1.3.7 |
|
||||||
|
| text-key | Key corresponding to title text in option object | `string` | - | `text` | 1.3.13 |
|
||||||
|
| adjust-height | Automatically use specified slide height as entire container height. When vertical is true, default is not adjusted, only supported by Alipay Mini Program. | `string` | `'first' / 'current' / 'highest' / 'none'` | `highest` | 1.3.13 |
|
||||||
|
| adjust-vertical-height | Force adjust-height to take effect when vertical is true. Only supported by Alipay Mini Program. | `boolean` | - | `false` | 1.3.13 |
|
||||||
|
| muted | Whether video plays muted | `boolean` | - | `true` | 1.6.0 |
|
||||||
|
| videoLoop | Whether video loops | `boolean` | - | `true` | 1.6.0 |
|
||||||
|
|
||||||
|
### DirectionType
|
||||||
|
|
||||||
|
Carousel sliding direction, optional values are `'horizontal'` and `'vertical'`.
|
||||||
|
|
||||||
|
### EasingType
|
||||||
|
|
||||||
|
Switching easing animation type, optional values are `'default'`, `'linear'`, `'easeInCubic'`, `'easeOutCubic'` and `'easeInOutCubic'`.
|
||||||
|
|
||||||
|
### IndicatorPositionType
|
||||||
|
|
||||||
|
Page information display position, optional values are `'left'`, `'top-left'`, `'top'`, `'top-right'`, `'bottom-left'`, `'bottom'`, `'bottom-right'` and `'right'`.
|
||||||
|
|
||||||
|
### SwiperList
|
||||||
|
|
||||||
|
Carousel item list configuration, including image or video address `value`, video cover `poster`, file resource type `type` and other attributes, supports extended attributes. After specifying `type`, the component will not internally determine the file type and will use `type` as the standard.
|
||||||
|
|
||||||
|
| name | Description | Minimum Version |
|
||||||
|
| ------ | ------------------------------ | --------------- |
|
||||||
|
| value | Image or video address | - |
|
||||||
|
| poster | Video cover | - |
|
||||||
|
| type | Used to specify file resource type, optional values `image`, `video` | 1.4.0 |
|
||||||
|
|
||||||
|
### SwiperIndicatorProps
|
||||||
|
|
||||||
|
| Parameter | Description | Type | Optional Values | Default Value | Minimum Version |
|
||||||
|
| ------------------- | ------------------------------ | --------------------- | ---------------------------------------------------------------------------------- | ------------- | --------------- |
|
||||||
|
| current | Current carousel item (index) | Number | - | 0 | 0.1.22 |
|
||||||
|
| direction | Carousel sliding direction | DirectionType | `horizontal, vertical` | horizontal | 0.1.22 |
|
||||||
|
| min-show-num | Won't show navigator below this number | Number | - | 2 | 0.1.22 |
|
||||||
|
| pagination-position | Page information display position | IndicatorPositionType | `left, top-left, top, top-right, bottom-left, bottom, bottom-right, right` | bottom | 0.1.22 |
|
||||||
|
| show-controls | Whether to show control buttons | Boolean | - | false | 0.1.22 |
|
||||||
|
| total | Total number of items | Number | - | 0 | 0.1.22 |
|
||||||
|
| type | Navigator type | SwiperIndicatorType | `dots, dots-bar, fraction` | dots | 0.1.22 |
|
||||||
|
| autoplay | Whether to enable auto-play | boolean | - | true | 0.1.22 |
|
||||||
|
|
||||||
## Events
|
## Events
|
||||||
|
|
||||||
| Event | Description | Parameters |
|
| Event Name | Description | Parameters | Minimum Version |
|
||||||
|-------|-------------|------------|
|
| ---------- | ------------------------ | ----------------------------------------------------------- | --------------- |
|
||||||
| click | Triggered when clicking a slide | event: Event |
|
| click | Triggered when clicking carousel item | `(index: number, item: SwiperList \| string)` | 0.1.22 |
|
||||||
| change | Triggered when current slide changes | index: number |
|
| change | Triggered when carousel switches | `(current: number, source: 'autoplay' \| 'touch' \| 'nav')` | 0.1.22 |
|
||||||
|
|
||||||
|
## Slot
|
||||||
|
|
||||||
|
| name | Description | Parameters | Minimum Version |
|
||||||
|
| --------- | ------------------- | ------------------------------------ | --------------- |
|
||||||
|
| indicator | Custom indicator | `{ current: number, total: number }` | 1.13.0 |
|
||||||
|
| default | Item display content | `{ item: string | SwiperList, index: number }` | 1.13.0 |
|
||||||
|
|
||||||
|
## External Style Classes
|
||||||
|
|
||||||
|
| Class Name | Description | Minimum Version |
|
||||||
|
| -------------------- | --------------------------- | --------------- |
|
||||||
|
| customClass | External custom class name | 0.1.22 |
|
||||||
|
| customIndicatorClass | Custom indicator class name | 0.1.22 |
|
||||||
|
| customImageClass | Custom image class name, will be deprecated in version 1.3, please use `customItemClass` instead | 0.1.22 |
|
||||||
|
| customPrevImageClass | Custom previous image class name, will be deprecated in version 1.3, please use `customPrevClass` instead | 0.1.22 |
|
||||||
|
| customNextImageClass | Custom next image class name, will be deprecated in version 1.3, please use `customNextClass` instead | 0.1.22 |
|
||||||
|
| customItemClass | Custom item class name | 1.3.13 |
|
||||||
|
| customPrevClass | Custom previous item class name | 1.3.13 |
|
||||||
|
| customNextClass | Custom next item class name | 1.3.13 |
|
||||||
|
| customTextClass | Custom text title class name | 1.3.13 |
|
||||||
|
| customTextStyle | Custom text title style | 1.3.13 |
|
||||||
@ -83,7 +83,7 @@ By using `<template #icon>`, you can customize the tab's icon.
|
|||||||
<wd-tabbar-item :value="2" title="Home" icon="home"></wd-tabbar-item>
|
<wd-tabbar-item :value="2" title="Home" icon="home"></wd-tabbar-item>
|
||||||
<wd-tabbar-item :value="2" icon="cart" title="Category">
|
<wd-tabbar-item :value="2" icon="cart" title="Category">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<wd-img round height="40rpx" width="40rpx" src="https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg"></wd-img>
|
<wd-img round height="40rpx" width="40rpx" src="https://wot-ui.cn/assets/panda.jpg"></wd-img>
|
||||||
</template>
|
</template>
|
||||||
</wd-tabbar-item>
|
</wd-tabbar-item>
|
||||||
<wd-tabbar-item :value="3" title="My" icon="user"></wd-tabbar-item>
|
<wd-tabbar-item :value="3" title="My" icon="user"></wd-tabbar-item>
|
||||||
|
|||||||
@ -200,3 +200,58 @@ When `slidable` is set to `always`, all tabs will be aligned to the left and can
|
|||||||
</block>
|
</block>
|
||||||
</wd-tabs>
|
</wd-tabs>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Tabs Attributes
|
||||||
|
|
||||||
|
| Parameter | Description | Type | Options | Default | Version |
|
||||||
|
| -------------- | ---------------------------------------------------------------------------------- | --------------- | ------------ | ------- | ------- |
|
||||||
|
| v-model | Binding value | string / number | - | - | - |
|
||||||
|
| slidable-num | Threshold count of tabs to enable scrolling when `slidable` is `auto` | number | - | `6` | - |
|
||||||
|
| map-num | Threshold count of tabs to show navigation map | number | - | `10` | - |
|
||||||
|
| map-title | Title of the navigation map | string | - | - | 1.4.0 |
|
||||||
|
| sticky | Enable sticky layout | boolean | - | `false` | - |
|
||||||
|
| offset-top | Distance from the top when sticky | number | - | `0` | - |
|
||||||
|
| swipeable | Enable gesture swipe | boolean | - | `false` | - |
|
||||||
|
| autoLineWidth | Bottom line width follows text; invalid when `lineWidth` is specified | boolean | - | `false` | 1.4.0 |
|
||||||
|
| lineWidth | Bottom line width, unit px | number | - | `19` | - |
|
||||||
|
| lineHeight | Bottom line height, unit px | number | - | `3` | - |
|
||||||
|
| color | Text color | string | - | - | - |
|
||||||
|
| inactiveColor | Text color of inactive tabs | string | - | - | - |
|
||||||
|
| animated | Enable transition animation when switching tab content | boolean | - | `false` | - |
|
||||||
|
| duration | Transition duration in ms | number | - | `300` | - |
|
||||||
|
| slidable | Enable scrollable navigation | TabsSlidable | `always` | `auto` | 1.4.0 |
|
||||||
|
| showScrollbar | Whether to show scrollbar when tabs are slidable (nav) | boolean | - | `false` | $LOWEST_VERSION$ |
|
||||||
|
| badge-props | Props passed to [Badge component props](/component/badge#attributes) | BadgeProps | - | - | 1.4.0 |
|
||||||
|
|
||||||
|
## Tab Attributes
|
||||||
|
|
||||||
|
| Parameter | Description | Type | Options | Default | Version |
|
||||||
|
| --------- | --------------------------------------------------------------- | ------- | ------- | ------- | ------- |
|
||||||
|
| name | Tab name | string | - | - | - |
|
||||||
|
| title | Title | string | - | - | - |
|
||||||
|
| disabled | Disable | boolean | - | `false` | - |
|
||||||
|
| lazy | Lazy render; when `animated` is enabled this is always `false` | boolean | - | `true` | 1.4.0 |
|
||||||
|
|
||||||
|
## Tabs Events
|
||||||
|
|
||||||
|
| Event Name | Description | Parameters | Version |
|
||||||
|
| ---------- | ----------------------- | --------------------------------------------------------------- | ------- |
|
||||||
|
| change | Triggered when value changes | `event = { index, name }` | - |
|
||||||
|
| click | Triggered when title is clicked | `event = { index, name }` | - |
|
||||||
|
| disabled | Triggered when clicking a disabled title | `event = { index, name }` | - |
|
||||||
|
|
||||||
|
## Methods
|
||||||
|
|
||||||
|
Exposed methods
|
||||||
|
|
||||||
|
| Method | Description | Signature | Version |
|
||||||
|
| ---------------- | --------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------- |
|
||||||
|
| setActive | Set active tab; params: `value` active value, `init` initialized, `setScroll` set scroll-view | `(value: number \| string, init: boolean, setScroll: boolean) => void` | - |
|
||||||
|
| scrollIntoView | Scroll the selected tab into view | `() => void` | - |
|
||||||
|
| updateLineStyle | Update active underline style; `animation` determines whether to animate, default enabled | `(animation?: boolean) => void` | - |
|
||||||
|
|
||||||
|
## External Classes
|
||||||
|
|
||||||
|
| Class Name | Description | Version |
|
||||||
|
| ------------ | ---------------- | ------- |
|
||||||
|
| custom-class | Root node style | - |
|
||||||
@ -148,18 +148,19 @@ function clickTest() {
|
|||||||
|
|
||||||
| Parameter | Description | Type | Options | Default | Version |
|
| Parameter | Description | Type | Options | Default | Version |
|
||||||
|-----------|-------------|------|----------|---------|----------|
|
|-----------|-------------|------|----------|---------|----------|
|
||||||
| type | Theme type | string | 'primary' / 'error' / 'warning' / 'success' | default | 1.3.4 |
|
| type | Theme type | string | 'primary' / 'error' / 'warning' / 'success' / 'default' | default | 1.3.4 |
|
||||||
| text | Text content | string / number | - | | 1.3.4 |
|
| text | Text content | string / number | - | - | 1.3.4 |
|
||||||
| size | Font size | string | - | - | 1.3.4 |
|
| size | Font size | string | - | - | 1.3.4 |
|
||||||
| mode | Text processing mode | string | 'text-normal text' / 'date' / 'phone' / 'name' / 'price' | text | 1.3.4+ |
|
| mode | Text processing mode | string | 'text' / 'date' / 'phone' / 'name' / 'price' | text | 1.3.4+ |
|
||||||
| bold | Whether bold, default normal | boolean | - | false | 1.3.4 |
|
| bold | Whether bold, default normal | boolean | - | false | 1.3.4 |
|
||||||
| format | Whether to mask data | boolean | Effective when mode is phone or name | false | 1.3.4 |
|
| format | Whether to mask data | boolean | Effective when mode is phone or name | false | 1.3.4 |
|
||||||
| color | Text color | string | - | - | 1.3.4 |
|
| color | Text color | string | - | - | 1.3.4 |
|
||||||
| lines | Number of lines to display, if set, ellipsis will show when exceeding. Max value is 5. | Number | - | - | 1.3.4 |
|
| lines | Number of lines to display, if set, ellipsis will show when exceeding. Max value is 5. | number | - | - | 1.3.4 |
|
||||||
| lineHeight | Text line height | string | - | | 1.3.4 |
|
| lineHeight | Text line height | string | - | - | 1.3.4 |
|
||||||
| decoration | Text decoration, underline, line-through, etc. | string | underline/line-through/overline | | 1.3.4+ |
|
| decoration | Text decoration, underline, line-through, etc. | string | 'underline' / 'line-through' / 'overline' | none | 1.3.4+ |
|
||||||
| prefix | Prefix slot | string | - | | 1.3.4+ |
|
| prefix | Prefix content | string | - | - | 1.3.4+ |
|
||||||
| suffix | Suffix slot | string | - | | 1.3.4+ |
|
| suffix | Suffix content | string | - | - | 1.3.4+ |
|
||||||
|
| call | Whether to make a call when clicking text in phone mode | boolean | - | false | 1.3.4 |
|
||||||
|
|
||||||
## Events
|
## Events
|
||||||
|
|
||||||
@ -169,6 +170,11 @@ function clickTest() {
|
|||||||
|
|
||||||
## Slots
|
## Slots
|
||||||
|
|
||||||
|
| Slot Name | Description | Version |
|
||||||
|
|-----------|-------------|---------|
|
||||||
|
| prefix | Prefix slot | 1.3.4 |
|
||||||
|
| suffix | Suffix slot | 1.3.4 |
|
||||||
|
|
||||||
## External Classes
|
## External Classes
|
||||||
|
|
||||||
| Class Name | Description | Version |
|
| Class Name | Description | Version |
|
||||||
|
|||||||
@ -152,6 +152,7 @@ When a `label` title is set, it defaults to top alignment. Set the `center` prop
|
|||||||
| center | Vertically center title and input box when label is set (defaults to top alignment) | boolean | - | false | - |
|
| center | Vertically center title and input box when label is set (defaults to top alignment) | boolean | - | false | - |
|
||||||
| no-border | Whether to hide underline in non-cell type | boolean | - | false | - |
|
| no-border | Whether to hide underline in non-cell type | boolean | - | false | - |
|
||||||
| required | Required style in cell type | boolean | - | false | - |
|
| required | Required style in cell type | boolean | - | false | - |
|
||||||
|
| marker-side | Position of the required marker | 'before' \| 'after' | - | 'before' | 1.12.0 |
|
||||||
| prop | Form field model name (required for form validation) | string | - | - | - |
|
| prop | Form field model name (required for form validation) | string | - | - | - |
|
||||||
| rules | Form validation rules | FormItemRule[] | - | [] | - |
|
| rules | Form validation rules | FormItemRule[] | - | [] | - |
|
||||||
| clearTrigger | When to show clear icon: always (show when input is not empty) / focus (show when focused and not empty) | InputClearTrigger | `focus`/`always` | `always` | 1.3.7 |
|
| clearTrigger | When to show clear icon: always (show when input is not empty) / focus (show when focused and not empty) | InputClearTrigger | `focus`/`always` | `always` | 1.3.7 |
|
||||||
|
|||||||
@ -2,6 +2,12 @@
|
|||||||
|
|
||||||
A lightweight feedback component that appears in the middle of the page.
|
A lightweight feedback component that appears in the middle of the page.
|
||||||
|
|
||||||
|
:::tip Note
|
||||||
|
`Toast` supports controlling component styles through the `props` attribute since version 1.7.0. See [props](#props) for fields. Note that the `options` priority of functional call API is higher than `props`.
|
||||||
|
|
||||||
|
For global calling solutions, see [wot-starter](https://starter.wot-ui.cn/guide/feedback.html), which supports globally callable feedback components for use in scenarios like route navigation guards and network request interceptors.
|
||||||
|
:::
|
||||||
|
|
||||||
## Basic Usage
|
## Basic Usage
|
||||||
|
|
||||||
The Toast component is a functional component that can be used by calling the `$toast` method on the current instance.
|
The Toast component is a functional component that can be used by calling the `$toast` method on the current instance.
|
||||||
|
|||||||
@ -77,9 +77,18 @@ When the animation leaves, the tag will be set with `leave-class` and `leave-act
|
|||||||
| Parameter | Description | Type | Optional Values | Default Value | Minimum Version |
|
| Parameter | Description | Type | Optional Values | Default Value | Minimum Version |
|
||||||
|--------------------|------------------------------------|------------------|------------------|---------------|------------------|
|
|--------------------|------------------------------------|------------------|------------------|---------------|------------------|
|
||||||
| show | Whether to display the component | boolean | - | - | - |
|
| show | Whether to display the component | boolean | - | - | - |
|
||||||
| name | Animation type | string | `TransitionName` | - | - |
|
| name | Animation type | string / array | `TransitionName` | - | - |
|
||||||
| duration | Animation duration | number / boolean | - | 300(ms) | - |
|
| duration | Animation duration | number / object / boolean | - | 300(ms) | - |
|
||||||
| custom-style | Custom styles | string | - | - | - |
|
| custom-style | Custom styles | string | - | - | - |
|
||||||
|
| custom-class | Custom root node style class | string | - | - | - |
|
||||||
|
| lazy-render | Lazy render content | boolean | - | false | - |
|
||||||
|
| destroy | Whether to destroy child nodes after animation ends | boolean | - | true | - |
|
||||||
|
| enter-class | Starting state of enter transition | string | - | - | - |
|
||||||
|
| enter-active-class | Active state of enter transition | string | - | - | - |
|
||||||
|
| enter-to-class | Ending state of enter transition | string | - | - | - |
|
||||||
|
| leave-class | Starting state of leave transition | string | - | - | - |
|
||||||
|
| leave-active-class | Active state of leave transition | string | - | - | - |
|
||||||
|
| leave-to-class | Ending state of leave transition | string | - | - | - |
|
||||||
| disable-touch-move | Whether to prevent touch scrolling | boolean | - | false | 1.11.0 |
|
| disable-touch-move | Whether to prevent touch scrolling | boolean | - | false | 1.11.0 |
|
||||||
|
|
||||||
### TransitionName Animation Types
|
### TransitionName Animation Types
|
||||||
@ -102,12 +111,19 @@ When the animation leaves, the tag will be set with `leave-class` and `leave-act
|
|||||||
|
|
||||||
| Event Name | Description | Parameters | Version |
|
| Event Name | Description | Parameters | Version |
|
||||||
|------------|-------------|------------|----------|
|
|------------|-------------|------------|----------|
|
||||||
| beforeenter | Triggered before enter | - | - |
|
| before-enter | Triggered before enter | - | - |
|
||||||
| enter | Triggered during enter | - | - |
|
| enter | Triggered during enter | - | - |
|
||||||
| afterenter | Triggered after enter | - | - |
|
| after-enter | Triggered after enter | - | - |
|
||||||
| beforeleave | Triggered before leave | - | - |
|
| before-leave | Triggered before leave | - | - |
|
||||||
| leave | Triggered during leave | - | - |
|
| leave | Triggered during leave | - | - |
|
||||||
| afterleave | Triggered after leave | - | - |
|
| after-leave | Triggered after leave | - | - |
|
||||||
|
| click | Triggered when clicked | - | - |
|
||||||
|
|
||||||
|
## Slots
|
||||||
|
|
||||||
|
| Slot Name | Description | Version |
|
||||||
|
|-----------|-------------|---------|
|
||||||
|
| default | Content to apply animation effects | - |
|
||||||
|
|
||||||
## External Style Classes
|
## External Style Classes
|
||||||
|
|
||||||
|
|||||||
@ -98,3 +98,65 @@ The upload component can limit the number of uploaded files by setting `limit`.
|
|||||||
## Overwrite Upload
|
## Overwrite Upload
|
||||||
|
|
||||||
The upload component can automatically replace the previous file when selected by setting `reupload`.
|
The upload component can automatically replace the previous file when selected by setting `reupload`.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<wd-upload
|
||||||
|
:file-list="fileList"
|
||||||
|
reupload
|
||||||
|
action="https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload"
|
||||||
|
@change="handleChange"
|
||||||
|
></wd-upload>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Valid Values for accept
|
||||||
|
|
||||||
|
| name | Description | Minimum Version |
|
||||||
|
| ----- | --------------------------------------------------------------------------------------------- | --------------- |
|
||||||
|
| image | Images, supported on all platforms | - |
|
||||||
|
| video | Videos, supported on all platforms | 1.3.0 |
|
||||||
|
| media | Images and videos, WeChat only, implemented using `chooseMedia` | 1.3.0 |
|
||||||
|
| file | Files other than images and videos from client sessions, WeChat only, implemented using `chooseMessageFile` | 1.3.0 |
|
||||||
|
| all | All types of files, WeChat and H5 only, WeChat uses `chooseMessageFile`, H5 uses `chooseFile` | 1.3.0 |
|
||||||
|
|
||||||
|
## File Selection Quantity Limits
|
||||||
|
|
||||||
|
Different platforms have different file selection methods with varying maximum quantity limits, which are determined by the uni-app platform APIs:
|
||||||
|
|
||||||
|
### WeChat Platform
|
||||||
|
|
||||||
|
WeChat Mini Program platform offers richer file selection capabilities with higher quantity limits:
|
||||||
|
|
||||||
|
| Selection Method | Maximum Count | Description | Applicable File Types |
|
||||||
|
| ---------------- | ------------- | ----------- | -------------------- |
|
||||||
|
| `chooseMedia` | 20 | Maximum selection count for images and videos | Used when accept is `image`, `video`, or `media` |
|
||||||
|
| `chooseMessageFile` | 100 | Maximum selection count for files from client sessions | Used when accept is `file` or `all` |
|
||||||
|
|
||||||
|
### H5 Platform
|
||||||
|
|
||||||
|
H5 platform supports multiple file selection methods:
|
||||||
|
|
||||||
|
| Selection Method | Maximum Count | Description | Applicable File Types |
|
||||||
|
| ---------------- | ------------- | ----------- | -------------------- |
|
||||||
|
| `chooseImage` | 9 | Maximum selection count for images | Used when accept is `image` |
|
||||||
|
| `chooseVideo` | 1 | Does not support multiple selection, single video file only | Used when accept is `video` |
|
||||||
|
| `chooseFile` | 100 | Maximum selection count for files | Used when accept is `all` |
|
||||||
|
|
||||||
|
::: warning H5 Platform Special Note
|
||||||
|
The behavior of the count value on the H5 platform is based on the browser's own specifications. Current test results show that it can only limit single/multiple selection, but cannot limit the specific quantity. Moreover, very few mobile browsers actually support multiple selection.
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Other Platforms
|
||||||
|
|
||||||
|
Other platforms (such as Alipay Mini Program, DingTalk Mini Program, App, etc.) have relatively limited file selection capabilities:
|
||||||
|
|
||||||
|
| Selection Method | Maximum Count | Description | Applicable File Types |
|
||||||
|
| ---------------- | ------------- | ----------- | -------------------- |
|
||||||
|
| `chooseImage` | 9 | Maximum selection count for images | Used when accept is `image` |
|
||||||
|
| `chooseVideo` | 1 | Does not support multiple selection, single video file only | Used when accept is `video` |
|
||||||
|
|
||||||
|
::: tip Tips
|
||||||
|
- When the set `limit` or `maxCount` exceeds the above platform limits, the actual selection count will be subject to platform limits
|
||||||
|
- WeChat Mini Program platform prioritizes using `chooseMedia` for selecting images and videos, which has higher selection count limits
|
||||||
|
- Video selection on non-WeChat platforms is limited by the `chooseVideo` API and only supports single selection
|
||||||
|
- Platform capability priority: WeChat Platform > H5 Platform > Other Platforms
|
||||||
|
:::
|
||||||
@ -77,4 +77,50 @@ abort()
|
|||||||
| compressed | Whether to compress video | boolean | true | - |
|
| compressed | Whether to compress video | boolean | true | - |
|
||||||
| maxDuration | Maximum video duration (seconds) | number | 60 | - |
|
| maxDuration | Maximum video duration (seconds) | number | 60 | - |
|
||||||
| camera | Camera direction | 'back' \| 'front' | 'back' | - |
|
| camera | Camera direction | 'back' \| 'front' | 'back' | - |
|
||||||
| extension | Filter by file extension (H5 supports all type filtering, WeChat Mini Program supports filtering when all and file, other platforms do not support) | string[] | - |
|
| extension | Filter by file extension (H5 supports all types; WeChat Mini Program supports filtering when accept is 'all' or 'file'; other platforms do not support) | string[] | - | - |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## File Selection Quantity Limits
|
||||||
|
|
||||||
|
Different platforms have different file selection methods with varying maximum quantity limits, which are determined by the uni-app platform APIs:
|
||||||
|
|
||||||
|
### WeChat Platform
|
||||||
|
|
||||||
|
WeChat Mini Program platform offers richer file selection capabilities with higher quantity limits:
|
||||||
|
|
||||||
|
| Selection Method | Maximum Count | Description | Applicable File Types |
|
||||||
|
| ---------------- | ------------- | ----------- | -------------------- |
|
||||||
|
| `chooseMedia` | 20 | Maximum selection count for images and videos | Used when accept is `image`, `video`, or `media` |
|
||||||
|
| `chooseMessageFile` | 100 | Maximum selection count for files from client sessions | Used when accept is `file` or `all` |
|
||||||
|
|
||||||
|
### H5 Platform
|
||||||
|
|
||||||
|
H5 platform supports multiple file selection methods:
|
||||||
|
|
||||||
|
| Selection Method | Maximum Count | Description | Applicable File Types |
|
||||||
|
| ---------------- | ------------- | ----------- | -------------------- |
|
||||||
|
| `chooseImage` | 9 | Maximum selection count for images | Used when accept is `image` |
|
||||||
|
| `chooseVideo` | 1 | Does not support multiple selection, single video file only | Used when accept is `video` |
|
||||||
|
| `chooseFile` | 100 | Maximum selection count for files | Used when accept is `all` |
|
||||||
|
|
||||||
|
### Other Platforms
|
||||||
|
|
||||||
|
Other platforms (such as Alipay Mini Program, DingTalk Mini Program, App, etc.) have relatively limited file selection capabilities:
|
||||||
|
|
||||||
|
| Selection Method | Maximum Count | Description | Applicable File Types |
|
||||||
|
| ---------------- | ------------- | ----------- | -------------------- |
|
||||||
|
| `chooseImage` | 9 | Maximum selection count for images | Used when accept is `image` |
|
||||||
|
| `chooseVideo` | 1 | Does not support multiple selection, single video file only | Used when accept is `video` |
|
||||||
|
|
||||||
|
::: tip Tips
|
||||||
|
- When the set `maxCount` exceeds the above platform limits, the actual selection count will be subject to platform limits
|
||||||
|
- The `chooseFile` function will automatically choose the optimal method based on platform capabilities
|
||||||
|
- WeChat Mini Program platform prioritizes using `chooseMedia` for selecting images and videos, which has higher selection count limits
|
||||||
|
- Video selection on non-WeChat platforms is limited by the `chooseVideo` API and only supports single selection
|
||||||
|
- Platform capability priority: WeChat Platform > H5 Platform > Other Platforms
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: warning maxCount Parameter Limitation
|
||||||
|
The `maxCount` parameter in `ChooseFileOption` is limited by the underlying platform APIs. Setting a value higher than the platform limit will be automatically capped to the maximum supported value.
|
||||||
|
:::
|
||||||
@ -16,7 +16,7 @@ Set the network image address or Base64 image through the `image` field, and set
|
|||||||
**Note: DingTalk Mini Program platform only supports network images.**
|
**Note: DingTalk Mini Program platform only supports network images.**
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<wd-watermark image="https://wot-design-uni.cn/logo.png" :image-width="38" :image-height="38"></wd-watermark>
|
<wd-watermark image="https://wot-ui.cn/logo.png" :image-width="38" :image-height="38"></wd-watermark>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Local Watermark
|
### Local Watermark
|
||||||
|
|||||||
@ -1,6 +1,109 @@
|
|||||||
# 更新日志
|
# 更新日志
|
||||||
|
|
||||||
|
|
||||||
|
## [1.13.0](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.12.4...v1.13.0) (2025-09-28)
|
||||||
|
|
||||||
|
|
||||||
|
### ✨ Features | 新功能
|
||||||
|
|
||||||
|
* ✨ 为 Curtain 组件添加 show-menu-by-longpress 和 close-on-click 属性 ([a905655](https://github.com/Moonofweisheng/wot-design-uni/commit/a90565510ab55431f6d7537da465cc8299d07a46)), closes [#1279](https://github.com/Moonofweisheng/wot-design-uni/issues/1279)
|
||||||
|
* ✨ 优化 Swiper 使用默认插槽时插槽内容的显示效果 ([#1301](https://github.com/Moonofweisheng/wot-design-uni/issues/1301)) ([41dd417](https://github.com/Moonofweisheng/wot-design-uni/commit/41dd4177b66e6e03357ce79f5c9b92fa2a932a7a))
|
||||||
|
* ✨ 优化 Toast 组件图标的体积 ([#1034](https://github.com/Moonofweisheng/wot-design-uni/issues/1034)) ([c984cff](https://github.com/Moonofweisheng/wot-design-uni/commit/c984cff24749ffd753f21f04c79c6f896f7bd9ef))
|
||||||
|
* ✨ 增加车牌键盘语言切换功能,支持受控和非受控模式 ([#1294](https://github.com/Moonofweisheng/wot-design-uni/issues/1294)) ([9943011](https://github.com/Moonofweisheng/wot-design-uni/commit/9943011b4c629625091e82115d9241e6503efeae)), closes [#1275](https://github.com/Moonofweisheng/wot-design-uni/issues/1275) [#818](https://github.com/Moonofweisheng/wot-design-uni/issues/818)
|
||||||
|
* ✨ button组件支持微信小程序的getrealtimephonenumber 事件 ([#1097](https://github.com/Moonofweisheng/wot-design-uni/issues/1097)) ([ed412b6](https://github.com/Moonofweisheng/wot-design-uni/commit/ed412b67261fce04c51d5c5b8836ca4dd0dc22a4))
|
||||||
|
* ✨ Cell 新增 icon-siz 属性用于指定左侧图标大小 ([#1298](https://github.com/Moonofweisheng/wot-design-uni/issues/1298)) ([9585db1](https://github.com/Moonofweisheng/wot-design-uni/commit/9585db11503bc5e77e72e78ba7a51f1f6932f510)), closes [#1088](https://github.com/Moonofweisheng/wot-design-uni/issues/1088)
|
||||||
|
* ✨ Rate 支持清空评分([#1302](https://github.com/Moonofweisheng/wot-design-uni/issues/1302)) ([1333bda](https://github.com/Moonofweisheng/wot-design-uni/commit/1333bdac4f8f605c3c9851d0f43d267205ce5aef)), closes [#1293](https://github.com/Moonofweisheng/wot-design-uni/issues/1293)
|
||||||
|
* ✨ swiper新增default slot 用户可自定义swiper-item中的内容展示 ([#1164](https://github.com/Moonofweisheng/wot-design-uni/issues/1164)) ([046b135](https://github.com/Moonofweisheng/wot-design-uni/commit/046b135a14a938840c9309c6b9eedb1878866ac9))
|
||||||
|
* ✨ wd-picker-view 添加 item-height 属性 ([8d84508](https://github.com/Moonofweisheng/wot-design-uni/commit/8d845081657581a84282f8d4de6039272700e9b0))
|
||||||
|
|
||||||
|
|
||||||
|
### ✏️ Documentation | 文档
|
||||||
|
|
||||||
|
* 修复黑暗模式下demo页面样式异常 ([397c883](https://github.com/Moonofweisheng/wot-design-uni/commit/397c88338a65afa71f452a67cec938afd5e25e9a))
|
||||||
|
* ✏️ 补充 Button 组件的 getRealtimePhoneNumber 仅支持微信小程序 ([7466c91](https://github.com/Moonofweisheng/wot-design-uni/commit/7466c91c1a50318c6f80cbcbeb368dad2bff7dd9))
|
||||||
|
* ✏️ 补全一些缺失的文档 ([b0bb46d](https://github.com/Moonofweisheng/wot-design-uni/commit/b0bb46d3a792bc01c7f8fdbe97835fc04ae577bc))
|
||||||
|
* ✏️ 调整 Gap 文档描述错误的问题 ([1a9f626](https://github.com/Moonofweisheng/wot-design-uni/commit/1a9f62698643b5d1e5fc24be52ad3416464ff651))
|
||||||
|
* ✏️ 调整文档站点域名为 wot-ui.cn ([4c8cdb8](https://github.com/Moonofweisheng/wot-design-uni/commit/4c8cdb83d077370f6d81b9250c6651301521eb6b))
|
||||||
|
* ✏️ 更新快速上手项目链接 ([d86dd18](https://github.com/Moonofweisheng/wot-design-uni/commit/d86dd18b49bbaf2a06a6f85338b2e9fe6b9950b6))
|
||||||
|
* ✏️ 添加 vscode 代码提示插件 ([c3c6eb1](https://github.com/Moonofweisheng/wot-design-uni/commit/c3c6eb124985b4620a336c034919085ecaed20d9))
|
||||||
|
* ✏️ 添加博客链接地址 ([d7272eb](https://github.com/Moonofweisheng/wot-design-uni/commit/d7272ebab6fbea321133ee52ce1c6748567bf486))
|
||||||
|
* ✏️ 添加关于全局反馈方案和最佳实践分享的文档 ([a4d2550](https://github.com/Moonofweisheng/wot-design-uni/commit/a4d2550fefe77c64e179ebd22d212827b5fa5217))
|
||||||
|
* ✏️ 添加赞助渠道 ([3564bce](https://github.com/Moonofweisheng/wot-design-uni/commit/3564bce12f4341bd329731c9a18121c611c460c7))
|
||||||
|
* ✏️ 文档首页新增快速上手模板和公众号的入口 ([e80b0df](https://github.com/Moonofweisheng/wot-design-uni/commit/e80b0df51e5049cecf4f0f70cc83535dc52f8e06))
|
||||||
|
* ✏️ 优化演示 Demo 在小屏幕上的显示效果 ([#1296](https://github.com/Moonofweisheng/wot-design-uni/issues/1296)) ([0dbdde9](https://github.com/Moonofweisheng/wot-design-uni/commit/0dbdde9e23645c4735e4051f5c259b0c473df896))
|
||||||
|
* ✏️ 优化演示demo显示效果 ([868b5ad](https://github.com/Moonofweisheng/wot-design-uni/commit/868b5ad3108f45a096da967f92793ae05b645c2b)), closes [#1269](https://github.com/Moonofweisheng/wot-design-uni/issues/1269)
|
||||||
|
* ✏️ 友情链接支持一行最多四个 ([4810db7](https://github.com/Moonofweisheng/wot-design-uni/commit/4810db7d6fba25062382be3f862b5ba252052b70))
|
||||||
|
* ✏️ 添加 img 组件 transformAssetUrls 配置介绍 ([#1259](https://github.com/Moonofweisheng/wot-design-uni/issues/1259)) ([96cf9c7](https://github.com/Moonofweisheng/wot-design-uni/commit/96cf9c7082b94904d45ef1a514f66bff60a57071))
|
||||||
|
* ✏️ 修正 Text 组件文档一些语言组织的错误 ([abc4571](https://github.com/Moonofweisheng/wot-design-uni/commit/abc457147a09444fa82868aa73800958b3621796))
|
||||||
|
* 修复 starter 地址错误 ([#1316](https://github.com/Moonofweisheng/wot-design-uni/issues/1316)) ([00212b0](https://github.com/Moonofweisheng/wot-design-uni/commit/00212b0e3ecad336edbeec6473db01a67c04cb6b))
|
||||||
|
|
||||||
|
|
||||||
|
### 🐛 Bug Fixes | Bug 修复
|
||||||
|
|
||||||
|
* 🐛 修复 Segmented 选项点击时无论是否改变选中值都会触发 change 的问题 ([#1326](https://github.com/Moonofweisheng/wot-design-uni/issues/1326)) ([5657aa6](https://github.com/Moonofweisheng/wot-design-uni/commit/5657aa68a8357ca66c626b7e844c18aa95828c6d)), closes [#1323](https://github.com/Moonofweisheng/wot-design-uni/issues/1323)
|
||||||
|
* 🐛 修复 table 组件表头文字溢出样式异常的问题 ([#1297](https://github.com/Moonofweisheng/wot-design-uni/issues/1297)) ([5e186ea](https://github.com/Moonofweisheng/wot-design-uni/commit/5e186ea4b2f8fea09cb1913c6a63f1e60827ec4e)), closes [#1182](https://github.com/Moonofweisheng/wot-design-uni/issues/1182) [#1058](https://github.com/Moonofweisheng/wot-design-uni/issues/1058)
|
||||||
|
* 🐛 修复wd-drop-menu-item组件在popup数据较多在滚动区下拉时和页面onPullDownRefresh之间的冲突 ([#1113](https://github.com/Moonofweisheng/wot-design-uni/issues/1113)) ([73027c0](https://github.com/Moonofweisheng/wot-design-uni/commit/73027c0cefe980c27f46412c5648761c30a01bd0)), closes [#1107](https://github.com/Moonofweisheng/wot-design-uni/issues/1107)
|
||||||
|
|
||||||
|
### [1.12.4](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.12.3...v1.12.4) (2025-08-28)
|
||||||
|
|
||||||
|
|
||||||
|
### 🐛 Bug Fixes | Bug 修复
|
||||||
|
|
||||||
|
* 🐛 修复 Upload 设置 multiple 无效的问题 ([#1250](https://github.com/Moonofweisheng/wot-design-uni/issues/1250)) ([784aab4](https://github.com/Moonofweisheng/wot-design-uni/commit/784aab4aa156e2a440db7d1a0a10e36358851763))
|
||||||
|
|
||||||
|
### [1.12.3](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.12.2...v1.12.3) (2025-08-27)
|
||||||
|
|
||||||
|
|
||||||
|
### 🐛 Bug Fixes | Bug 修复
|
||||||
|
|
||||||
|
* 🐛 修复 Fab、Cell组件 Icon 垂直居中异常的问题 ([#1249](https://github.com/Moonofweisheng/wot-design-uni/issues/1249)) ([d7dac97](https://github.com/Moonofweisheng/wot-design-uni/commit/d7dac979982513c88363dd6224352ab099b7d0c3))
|
||||||
|
|
||||||
|
### [1.12.2](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.12.1...v1.12.2) (2025-08-26)
|
||||||
|
|
||||||
|
|
||||||
|
### ✨ Features | 新功能
|
||||||
|
|
||||||
|
* ✨ 调整 composables 的导出,新增 useCountDown 的导出 ([#1242](https://github.com/Moonofweisheng/wot-design-uni/issues/1242)) ([93fafa1](https://github.com/Moonofweisheng/wot-design-uni/commit/93fafa180fcfb3fa07deab0393449e822179d43b)), closes [#1239](https://github.com/Moonofweisheng/wot-design-uni/issues/1239)
|
||||||
|
* ✨ DroMenu 图标大小和位置样式逻辑调整为不缩放且不使用绝对定位 ([#1243](https://github.com/Moonofweisheng/wot-design-uni/issues/1243)) ([e59fd56](https://github.com/Moonofweisheng/wot-design-uni/commit/e59fd568be9284b7eb91575a3f59194cd681828c))
|
||||||
|
|
||||||
|
### [1.12.1](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.12.0...v1.12.1) (2025-08-25)
|
||||||
|
|
||||||
|
|
||||||
|
### 🐛 Bug Fixes | Bug 修复
|
||||||
|
|
||||||
|
* 🐛 修复 DropDown 图标垂直居中异常的问题 ([37042c7](https://github.com/Moonofweisheng/wot-design-uni/commit/37042c7766bfe366828f51201c6023aeb4cfaec6))
|
||||||
|
|
||||||
|
## [1.12.0](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.11.1...v1.12.0) (2025-08-24)
|
||||||
|
|
||||||
|
|
||||||
|
### ✨ Features | 新功能
|
||||||
|
|
||||||
|
* ✨ 为 Cell、Input、Textarea 等组件添加 marker-side 属性控制必填*位置 ([#1181](https://github.com/Moonofweisheng/wot-design-uni/issues/1181)) ([cade06f](https://github.com/Moonofweisheng/wot-design-uni/commit/cade06fe4a776e55a862a58f1eddc1fe0f055a88)), closes [#555](https://github.com/Moonofweisheng/wot-design-uni/issues/555)
|
||||||
|
* ✨ 新增维语本地化支持 ([b4e8605](https://github.com/Moonofweisheng/wot-design-uni/commit/b4e86053b4bb73ef89ae91330d50b6e68349ad20))
|
||||||
|
* ✨ Upload 上传组件调信小程序端使用chooseMedia替换掉chooseImage等 ([57d89f3](https://github.com/Moonofweisheng/wot-design-uni/commit/57d89f33d769362c198048d37b44f7d67ed384f4)), closes [#1193](https://github.com/Moonofweisheng/wot-design-uni/issues/1193)
|
||||||
|
|
||||||
|
|
||||||
|
### 🐛 Bug Fixes | Bug 修复
|
||||||
|
|
||||||
|
* 🐛 签字版组件设置exportScale < 1时在支付宝上导出图片不完整 ([#1129](https://github.com/Moonofweisheng/wot-design-uni/issues/1129)) ([555ae5f](https://github.com/Moonofweisheng/wot-design-uni/commit/555ae5f40049ffd958ec4e58e80ccd3ba4f524f3))
|
||||||
|
* 🐛 修复 grid-item 组件 custom-text 失效的问题 ([#1180](https://github.com/Moonofweisheng/wot-design-uni/issues/1180)) ([5abc3b5](https://github.com/Moonofweisheng/wot-design-uni/commit/5abc3b5344bd2f880ef94350e10c2ef9e9f9250f)), closes [#995](https://github.com/Moonofweisheng/wot-design-uni/issues/995)
|
||||||
|
* 🐛 修复 signature 组件设置background-color为透明色导致撤销无效 ([#1224](https://github.com/Moonofweisheng/wot-design-uni/issues/1224)) ([2e67adf](https://github.com/Moonofweisheng/wot-design-uni/commit/2e67adf2bae212a03f3cef3113326f4d942b0b55)), closes [#1223](https://github.com/Moonofweisheng/wot-design-uni/issues/1223)
|
||||||
|
* 🐛 修复 Upload 多选时配置为覆盖上传图片达到上限无法替换图片的问题 ([00ab76b](https://github.com/Moonofweisheng/wot-design-uni/commit/00ab76bd91e91a3d0fabdb8b80e00df764055519))
|
||||||
|
|
||||||
|
|
||||||
|
### ✏️ Documentation | 文档
|
||||||
|
|
||||||
|
* ✏️ 修复基础组件文档问题 - 阶段一完成 ([#1220](https://github.com/Moonofweisheng/wot-design-uni/issues/1220)) ([9132174](https://github.com/Moonofweisheng/wot-design-uni/commit/9132174b11c539d2ec5f8d0aec2044ac1affaaff))
|
||||||
|
* ✏️ 修正 drop-menu-item options 默认数据结构注释 ([#1087](https://github.com/Moonofweisheng/wot-design-uni/issues/1087)) ([7a2cd2d](https://github.com/Moonofweisheng/wot-design-uni/commit/7a2cd2da93746761b05e068083b171312c4af0e3))
|
||||||
|
* 修复 Button/Icon/ConfigProvider/Popup 组件文档不一致问题 ([#1190](https://github.com/Moonofweisheng/wot-design-uni/issues/1190)) ([04d0d11](https://github.com/Moonofweisheng/wot-design-uni/commit/04d0d1184957bb1ae5b1ee2ddfaa978a989427b3))
|
||||||
|
|
||||||
|
### [1.11.1](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.11.0...v1.11.1) (2025-07-25)
|
||||||
|
|
||||||
|
|
||||||
|
### 🐛 Bug Fixes | Bug 修复
|
||||||
|
|
||||||
|
* 🐛 修复 RootPortal 及 Picker 相关组件 type-check 错误的问题 ([1859294](https://github.com/Moonofweisheng/wot-design-uni/commit/185929461c56d596b6a9d0dabe117e229ceda601))
|
||||||
|
|
||||||
## [1.11.0](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.10.0...v1.11.0) (2025-07-20)
|
## [1.11.0](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.10.0...v1.11.0) (2025-07-20)
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -23,14 +23,14 @@ For more information, please refer to [create-uni](https://github.com/uni-helper
|
|||||||
|
|
||||||
There are many excellent templates that have chosen Wot UI as their base component library. We've selected 3 templates to introduce here, and you can compare and choose for yourself.
|
There are many excellent templates that have chosen Wot UI as their base component library. We've selected 3 templates to introduce here, and you can compare and choose for yourself.
|
||||||
|
|
||||||
### wot-demo
|
### wot-starter
|
||||||
|
|
||||||
🍀 [wot-demo](https://github.com/Moonofweisheng/wot-demo) is a `uni-app` quick-start project based on [vitesse-uni-app](https://github.com/uni-helper/vitesse-uni-app) with deep integration of the `Wot UI` component library. It's maintained by the `Wot UI` team, saying goodbye to `HBuilderX` and embracing modern frontend development toolchains. If you're a loyal user of `Wot UI`, this template is perfect for you.
|
🍀 [wot-starter](https://github.com/wot-ui/wot-starter) is a `uni-app` quick-start project based on [vitesse-uni-app](https://github.com/uni-helper/vitesse-uni-app) with deep integration of the `Wot UI` component library. It's maintained by the `Wot UI` team, saying goodbye to `HBuilderX` and embracing modern frontend development toolchains. If you're a loyal user of `Wot UI`, this template is perfect for you.
|
||||||
|
|
||||||
You can also combine it with the CLI section [create-uni](https://github.com/uni-helper/create-uni) to create a project. Open the terminal and use the following command:
|
You can also combine it with the CLI section [create-uni](https://github.com/uni-helper/create-uni) to create a project. Open the terminal and use the following command:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
pnpm create uni <project-name> -t wot-demo
|
pnpm create uni <project-name> -t wot-starter
|
||||||
```
|
```
|
||||||
|
|
||||||
Open the project folder in VS Code:
|
Open the project folder in VS Code:
|
||||||
@ -67,7 +67,7 @@ If you're developing a `uni-app` template integrated with `Wot UI`, you can send
|
|||||||
|
|
||||||
| Template | Stars | Description |
|
| Template | Stars | Description |
|
||||||
|----------|-------|-------------|
|
|----------|-------|-------------|
|
||||||
| [wot-demo](https://github.com/Moonofweisheng/wot-demo) |  | 🍀 A uni-app quick-start project based on vitesse-uni-app with deep integration of Wot UI component library, maintained by the `Wot UI` team, saying goodbye to `HBuilderX` and embracing modern frontend development toolchains. |
|
| [wot-starter](https://github.com/wot-ui/wot-starter) |  | 🍀 A uni-app quick-start project based on vitesse-uni-app with deep integration of Wot UI component library, maintained by the `Wot UI` team, saying goodbye to `HBuilderX` and embracing modern frontend development toolchains. |
|
||||||
| [vitesse-uni-app](https://github.com/uni-helper/vitesse-uni-app) |  | A cross-platform quick-start template powered by Vite & uni-app, backed by the Uni Helper team, saying goodbye to HBuilderX and embracing modern frontend development. |
|
| [vitesse-uni-app](https://github.com/uni-helper/vitesse-uni-app) |  | A cross-platform quick-start template powered by Vite & uni-app, backed by the Uni Helper team, saying goodbye to HBuilderX and embracing modern frontend development. |
|
||||||
| [unibest](https://github.com/unibest-tech/unibest) |  | Uses the latest frontend technology stack, doesn't need to rely on `HBuilderX`, runs through command line, with built-in extensive basic functionality and auxiliary features, giving you the `best` experience when writing `uniapp`. |
|
| [unibest](https://github.com/unibest-tech/unibest) |  | Uses the latest frontend technology stack, doesn't need to rely on `HBuilderX`, runs through command line, with built-in extensive basic functionality and auxiliary features, giving you the `best` experience when writing `uniapp`. |
|
||||||
| [vite-uniapp-template](https://github.com/viarotel-org/vite-uniapp-template) |  | A practical-first uni-app starter template. |
|
| [vite-uniapp-template](https://github.com/viarotel-org/vite-uniapp-template) |  | A practical-first uni-app starter template. |
|
||||||
|
|||||||
@ -6,6 +6,9 @@ This section introduces some **common problems** encountered during development
|
|||||||
|
|
||||||
Currently supports WeChat Mini Program, Alipay Mini Program, DingTalk Mini Program, H5, APP, and other platforms.
|
Currently supports WeChat Mini Program, Alipay Mini Program, DingTalk Mini Program, H5, APP, and other platforms.
|
||||||
|
|
||||||
|
## Are there any best practice sharing?
|
||||||
|
Yes, you can follow my WeChat public account "不如摸鱼去", or visit my blog [不如摸鱼去](https://blog.wot-ui.cn/), sharing countless dry goods, waiting for you to see.
|
||||||
|
|
||||||
## Does the component library provide components that can be imported individually?
|
## Does the component library provide components that can be imported individually?
|
||||||
|
|
||||||
Currently, no. First, the plugin market lacks CI/CD tools, making automated publishing impossible. Maintaining a set of individually importable components is time and effort-consuming. Secondly, the installation methods provided by the component library can already achieve on-demand importing, so there's no need to provide individually importable components.
|
Currently, no. First, the plugin market lacks CI/CD tools, making automated publishing impossible. Maintaining a set of individually importable components is time and effort-consuming. Secondly, the installation methods provided by the component library can already achieve on-demand importing, so there's no need to provide individually importable components.
|
||||||
@ -198,3 +201,10 @@ First, check if the usage is correct. The `uni-app` platform doesn't support glo
|
|||||||
```
|
```
|
||||||
|
|
||||||
The functional calls of `Message` and `Toast` are implemented based on `provide/inject`, so your calls must be made within `setup`.
|
The functional calls of `Message` and `Toast` are implemented based on `provide/inject`, so your calls must be made within `setup`.
|
||||||
|
|
||||||
|
## Why are multiple messageBoxes popping up?
|
||||||
|
Check if the page with multiple `messageBox` popups has multiple `<wd-message-box></wd-message-box>` tags with the same `selector` or no `selector` (including components used in the current page). The same applies to `toast`. When using components like `messageBox` in child components, you need to specify a `selector` and ensure the `selector` is unique.
|
||||||
|
|
||||||
|
## How to call Toast, Message, Loading globally?
|
||||||
|
|
||||||
|
For global calling solutions, see [wot-starter](https://starter.wot-ui.cn/guide/feedback.html), which supports globally callable feedback components for use in scenarios like route navigation guards and network request interceptors.
|
||||||
@ -60,8 +60,9 @@ After donation, your nickname and message will be displayed in the [donation lis
|
|||||||
| --- | --- |
|
| --- | --- |
|
||||||
| [awesome-uni-app](https://github.com/uni-helper/awesome-uni-app) | A collection of excellent development resources for the multi-platform unified development framework uni-app |
|
| [awesome-uni-app](https://github.com/uni-helper/awesome-uni-app) | A collection of excellent development resources for the multi-platform unified development framework uni-app |
|
||||||
| [create-uni](https://github.com/uni-helper/create-uni) | Quickly create uni-app projects |
|
| [create-uni](https://github.com/uni-helper/create-uni) | Quickly create uni-app projects |
|
||||||
| [wot-demo](https://github.com/Moonofweisheng/wot-demo) | A quick-start demo for wot-design-uni based on [vitesse-uni-app](https://github.com/uni-helper/vitesse-uni-app) |
|
| [wot-starter](https://github.com/wot-ui/wot-starter) | A quick-start demo for wot-design-uni based on [vitesse-uni-app](https://github.com/uni-helper/vitesse-uni-app) |
|
||||||
| [wot-starter-retail](https://github.com/Moonofweisheng/wot-starter-retail) | A uni-app retail industry template based on wot-design-uni |
|
| [wot-starter-retail](https://github.com/Moonofweisheng/wot-starter-retail) | A uni-app retail industry template based on wot-design-uni |
|
||||||
|
| [wot-ui-intellisense](https://github.com/wot-ui/wot-ui-intellisense) | wot-ui vscode code completion plugin |
|
||||||
| [Wot UI Snippets](https://marketplace.visualstudio.com/items?itemName=kiko.wot-design-uni-snippets) | Wot UI code snippets |
|
| [Wot UI Snippets](https://marketplace.visualstudio.com/items?itemName=kiko.wot-design-uni-snippets) | Wot UI code snippets |
|
||||||
| [uni-mini-ci](https://github.com/Moonofweisheng/uni-mini-ci) | A plugin that supports CI (Continuous Integration) for uni-app mini program after build |
|
| [uni-mini-ci](https://github.com/Moonofweisheng/uni-mini-ci) | A plugin that supports CI (Continuous Integration) for uni-app mini program after build |
|
||||||
| [uni-mini-router](https://github.com/Moonofweisheng/uni-mini-router) | A lightweight uni-app router library based on vue3 and Typescript |
|
| [uni-mini-router](https://github.com/Moonofweisheng/uni-mini-router) | A lightweight uni-app router library based on vue3 and Typescript |
|
||||||
@ -73,7 +74,7 @@ After donation, your nickname and message will be displayed in the [donation lis
|
|||||||
|
|
||||||
- [wot-design](https://github.com/jd-ftf/wot-design-mini) - Thanks to the wot-design team for their continuous maintenance over the years, allowing wot-design-uni to stand on the shoulders of giants.
|
- [wot-design](https://github.com/jd-ftf/wot-design-mini) - Thanks to the wot-design team for their continuous maintenance over the years, allowing wot-design-uni to stand on the shoulders of giants.
|
||||||
- [uni-helper](https://github.com/uni-helper) - Thanks to the uni-helper team for providing the uni-app tool library, making wot-design-uni easier to use.
|
- [uni-helper](https://github.com/uni-helper) - Thanks to the uni-helper team for providing the uni-app tool library, making wot-design-uni easier to use.
|
||||||
- [Donors](https://wot-design-uni.cn/reward/donor.html) - Thanks to all donors, your donations help wot-design-uni develop better.
|
- [Donors](https://wot-ui.cn/reward/donor.html) - Thanks to all donors, your donations help wot-design-uni develop better.
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user