Compare commits

...

34 Commits

Author SHA1 Message Date
不如摸鱼去
ec57b72224 build: compile 1.13.0 2025-09-28 19:25:19 +08:00
不如摸鱼去
ae44bb4af1 chore(release): 1.13.0 2025-09-28 19:25:10 +08:00
不如摸鱼去
5657aa68a8
fix: 🐛 修复 Segmented 选项点击时无论是否改变选中值都会触发 change 的问题 (#1326)
 Closes: #1323
2025-09-28 19:23:40 +08:00
不如摸鱼去
c3c6eb1249 docs: ✏️ 添加 vscode 代码提示插件 2025-09-27 21:10:36 +08:00
不如摸鱼去
0e4cb76b27
refactor: ♻️ 优化 keyboard 的示例代码 (#1322) 2025-09-27 20:53:07 +08:00
不如摸鱼去
a4d2550fef docs: ✏️ 添加关于全局反馈方案和最佳实践分享的文档 2025-09-27 19:17:51 +08:00
不如摸鱼去
99581a30be refactor: ♻️ 优化 Toast 图标的体积 2025-09-27 19:02:02 +08:00
不如摸鱼去
b0bb46d3a7 docs: ✏️ 补全一些缺失的文档 2025-09-27 17:08:29 +08:00
zjh
8d84508165
feat: wd-picker-view 添加 item-height 属性
Co-authored-by: zhujihui <zhujihui@primecare.group>
2025-09-27 17:01:52 +08:00
ywenhao
8efad6d340
refactor: ♻️ 完善视频、图片的判断逻辑 2025-09-27 16:53:48 +08:00
Song
bea12e1813
refactor: ♻️ 导出 Input 的 props 类型 2025-09-27 16:48:12 +08:00
xiaohe0601
00212b0e3e
docs: 修复 starter 地址错误 (#1316) 2025-09-26 22:28:37 +08:00
不如摸鱼去
1a9c3e8f4d
refactor: ♻️ Icon 组件支持 H5 端使用离线字体文件 (#1314)
 Closes: #1303
2025-09-24 21:34:55 +08:00
无风不起浪
abc457147a
docs: ✏️ 修正 Text 组件文档一些语言组织的错误 2025-09-24 21:13:32 +08:00
asins
c984cff247
feat: 优化 Toast 组件图标的体积 (#1034) 2025-09-24 21:12:05 +08:00
gogHeroDream
73027c0cef
fix: 🐛 修复wd-drop-menu-item组件在popup数据较多在滚动区下拉时和页面onPullDownRefresh之间的冲突 (#1113)
 Closes: #1107
2025-09-24 12:43:15 +08:00
TAYUN
9943011b4c
feat: 增加车牌键盘语言切换功能,支持受控和非受控模式 (#1294)
 Closes: #1275 #818
2025-09-24 12:37:19 +08:00
不如摸鱼去
84e4e2223f Merge branch 'release' 2025-09-23 13:03:05 +08:00
不如摸鱼去
d06deda403 Merge branch 'release' 2025-09-21 22:59:35 +08:00
不如摸鱼去
fc06faa5a6 Merge branch 'release' 2025-09-21 19:54:59 +08:00
不如摸鱼去
552d4a7dd1 Merge branch 'release' 2025-09-21 19:48:31 +08:00
不如摸鱼去
5515be118d Merge branch 'release' 2025-09-21 19:40:29 +08:00
不如摸鱼去
99185310bc Merge branch 'release' 2025-09-21 19:12:34 +08:00
不如摸鱼去
1333bdac4f feat: Rate 支持清空评分(#1302)
 Closes: #1293
2025-09-18 15:50:07 +08:00
不如摸鱼去
41dd4177b6
feat: 优化 Swiper 使用默认插槽时插槽内容的显示效果 (#1301) 2025-09-15 22:27:05 +08:00
Jts Al
046b135a14
feat: swiper新增default slot 用户可自定义swiper-item中的内容展示 (#1164)
* feat:  swiper新增default slot 用户可自定义swiper-item中的内容展示

* docs: ✏️ 补充swiper组件使用说明
2025-09-15 21:50:06 +08:00
不如摸鱼去
7466c91c1a docs: ✏️ 补充 Button 组件的 getRealtimePhoneNumber 仅支持微信小程序 2025-09-14 22:45:24 +08:00
湛蓝
ed412b6726
feat: button组件支持微信小程序的getrealtimephonenumber 事件 (#1097) 2025-09-14 22:36:41 +08:00
不如摸鱼去
9585db1150
feat: Cell 新增 icon-siz 属性用于指定左侧图标大小 (#1298)
 Closes: #1088
2025-09-14 13:23:50 +08:00
不如摸鱼去
5e186ea4b2
fix: 🐛 修复 table 组件表头文字溢出样式异常的问题 (#1297)
 Closes: #1182,#1058
2025-09-14 11:57:17 +08:00
不如摸鱼去
0dbdde9e23
docs: ✏️ 优化演示 Demo 在小屏幕上的显示效果 (#1296)
* docs: ✏️  优化演示 Demo 在小屏幕上的显示效果

* docs: ✏️  postMessage 的 targetOrigin 应为精确的 Origin(协议+域名+端口)
2025-09-14 11:56:53 +08:00
无风不起浪
1a9f626986
docs: ✏️ 调整 Gap 文档描述错误的问题 2025-09-14 11:08:07 +08:00
不如摸鱼去
3ef9008d5b Merge branch 'release' 2025-09-09 22:47:35 +08:00
RuSheng
a90565510a
feat: 为 Curtain 组件添加 show-menu-by-longpress 和 close-on-click 属性
 Closes: #1279
2025-09-09 12:46:47 +08:00
76 changed files with 1633 additions and 383 deletions

View File

@ -1,6 +1,49 @@
# 更新日志
## [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)

View File

@ -52,7 +52,7 @@
- 🌍 支持国际化,内置 15 种语言包.
- 📖 提供丰富的文档和组件示例.
- 🎨 支持修改 CSS 变量实现主题定制.
- 🍭 支持暗黑模式
- 🍭 支持暗黑模式.
## 📱 预览
@ -87,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 优秀开发资源汇总 |
| [create-uni](https://github.com/uni-helper/create-uni) | 快速创建 uni-app 项目 |
| [wot-starter](https://github.com/wot-ui/wot-starter) | 基于 [vitesse-uni-app](https://github.com/uni-helper/vitesse-uni-app) 的 wot-ui 快速起手项目 |
| [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-starter-retail](https://github.com/Moonofweisheng/wot-starter-retail) | 基于 wot-ui 的 uni-app 零售行业模板 |
| [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-router](https://github.com/Moonofweisheng/uni-mini-router) | 一个基于 vue3 和 Typescript 的轻量级 uni-app 路由库 |
| [unibest](https://github.com/unibest-tech/unibest) | 基于 wot-design-uni 的 uni-app 模板 |
| [wot-design-uni AI 助手](https://www.coze.cn/store/bot/7347916532258701363) | 一个能回答你关于 wot-design-uni 组件库问题的智能助手 |
| [unibest](https://github.com/unibest-tech/unibest) | 基于 wot-ui 的 uni-app 模板 |
| [wot-design-uni AI 助手](https://www.coze.cn/store/bot/7347916532258701363) | 一个能回答你关于 wot-ui 组件库问题的智能助手 |
| [uni-ku-root](https://github.com/uni-ku/root) | 一个模拟 App.vue 原有能力的根组件插件 |
## 贡献指南

View File

@ -82,6 +82,22 @@ 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).
## 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
Please read our [Contributing Guide](./.github/CONTRIBUTING.md) before making changes to the code.

View File

@ -84,7 +84,7 @@ export default defineConfig({
{ text: 'Blog', link: 'https://blog.wot-ui.cn/' },
{
text: 'Templates', items: [
{ text: 'Quick Start Template wot-starter', link: 'https://start.wot-ui.cn/' },
{ 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/' },
@ -92,7 +92,8 @@ export default defineConfig({
},
{
text: 'Resources', items: [
{ text: 'Quick Start Template', link: 'https://start.wot-ui.cn/' },
{ 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: 'Mini Program CI Tool', link: 'https://github.com/Moonofweisheng/uni-mini-ci' },
{ text: 'Uni Helper', link: 'https://uni-helper.js.org/' },

View File

@ -88,7 +88,7 @@ export default defineConfig({
{ text: '博客', link: 'https://blog.wot-ui.cn/' },
{
text: '模板', items: [
{ text: '快速上手模板 wot-starter', link: 'https://start.wot-ui.cn/' },
{ 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/' },
@ -96,7 +96,8 @@ export default defineConfig({
},
{
text: '资源', items: [
{ text: '快速上手模板', link: 'https://start.wot-ui.cn/' },
{ 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: '多平台小程序CI工具', link: 'https://github.com/Moonofweisheng/uni-mini-ci' },
{ text: 'Uni Helper', link: 'https://uni-helper.js.org/' },

View File

@ -195,7 +195,7 @@ const expanded = ref(true)
.content {
order: 1;
margin: 0;
min-width: 640px;
min-width: 600px;
}
}

View File

@ -1,6 +1,6 @@
<template>
<!-- 主容器根据展开状态和过渡状态添加对应类名 -->
<div v-if="href" class="demo-model" :class="{
<!-- 大屏幕原有的固定容器 -->
<div v-if="href && !isSmallScreen" class="demo-model" :class="{
'collapsed': !expanded,
'transition-end': transitionEnd
}" @transitionend="onTransitionEnd">
@ -18,12 +18,42 @@
<iframe v-if="expanded&&transitionEnd" ref="iframe" id="demo" class="iframe" scrolling="auto" frameborder="0" :src="href" />
</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>
<script setup lang="ts">
import { Expand, Fold } from '@element-plus/icons-vue'
import { ElDrawer, ElIcon } from 'element-plus'
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'
interface Props {
@ -38,7 +68,11 @@ const props = withDefaults(defineProps<Props>(), {
//
const baseUrl = ref('')
const iframe = ref<HTMLIFrameElement | null>(null)
const drawerIframe = ref<HTMLIFrameElement | null>(null)
const transitionEnd = ref(true)
const drawerVisible = ref(false)
const isSmallScreen = ref(false)
const isTinyScreen = ref(false)
const emit = defineEmits<{
'update:expanded': [boolean] //
@ -64,6 +98,19 @@ const qrcode = computed(() => {
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
function kebabToCamel(input: string): string {
return input.replace(/-([a-z])/g, (match, group) => group.toUpperCase())
@ -87,6 +134,26 @@ function toggleExpand() {
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() {
transitionEnd.value = true
@ -95,15 +162,19 @@ function onTransitionEnd() {
// iframe
function sendMessage() {
if (iframe.value?.contentWindow) {
iframe.value.contentWindow.postMessage(vitepressData.isDark.value, href.value)
const targetIframe = isSmallScreen.value ? drawerIframe.value : iframe.value
if (targetIframe?.contentWindow) {
const targetOrigin = new URL(href.value, location.origin).origin
targetIframe.contentWindow.postMessage(vitepressData.isDark.value, targetOrigin)
}
}
// iframe
function sendLanguageMessage() {
if (iframe.value?.contentWindow) {
iframe.value.contentWindow.postMessage(vitepressData.lang.value, href.value)
const targetIframe = isSmallScreen.value ? drawerIframe.value : iframe.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()}#/`
: 'http://localhost:5173/demo/#/'
//
checkScreenSize()
window.addEventListener('resize', handleResize)
// iframe
iframe.value?.addEventListener('load', () => {
sendMessage()
@ -119,6 +194,20 @@ onMounted(() => {
})
})
onUnmounted(() => {
window.removeEventListener('resize', handleResize)
})
// iframe
watch(drawerIframe, (newVal) => {
if (newVal) {
newVal.addEventListener('load', () => {
sendMessage()
sendLanguageMessage()
})
}
})
watch(
() => vitepressData.isDark.value,
sendMessage
@ -266,8 +355,102 @@ watch(
}
}
@media (max-width: 1439px) {
.demo-model {
/* 小屏幕触发按钮样式 */
.demo-trigger {
position: fixed;
z-index: 10;
right: 16px;
top: calc(var(--vp-nav-height) + 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;
}
}

View File

@ -1,7 +1,7 @@
/*
* @Author: weisheng
* @Date: 2024-10-12 22:09:33
* @LastEditTime: 2025-09-21 19:38:17
* @LastEditTime: 2025-09-21 19:40:24
* @LastEditors: weisheng
* @Description:
* @FilePath: /wot-design-uni/docs/.vitepress/theme/index.ts

View File

@ -155,6 +155,7 @@
| getUserInfo | 获取用户信息,可以从@getuserinfo 回调中获取到用户信息 |
| contact | 打开客服会话,如果用户在会话中点击消息卡片后返回应用,可以从 @contact 回调中获得具体信息 |
| getPhoneNumber | 获取用户手机号,可以从@getphonenumber 回调中获取到用户信息 |
| getRealtimePhoneNumber | 实时获取用户手机号,可以从@getrealtimephonenumber 回调中获取到用户信息,仅微信小程序 |
| launchApp | 小程序中打开 APP可以通过 app-parameter 属性设定向 APP 传的参数 |
| openSetting | 打开授权设置页 |
| chooseAvatar | 获取用户头像,可以从@chooseavatar 回调中获取到头像信息 |
@ -171,6 +172,7 @@
| getuserinfo | 获取用户信息 | `detail` | - |
| contact | 客服消息回调open-type="contact"时有效 | `detail` | - |
| getphonenumber | 获取用户手机号回调open-type=getPhoneNumber 时有效 | `detail` | - |
| getrealtimephonenumber | 实时获取用户手机号回调open-type=getRealtimePhoneNumber 时有效 | `detail` | 1.13.0 |
| error | 当使用开放能力时发生错误的回调open-type=launchApp 时有效 | `detail` | - |
| launchapp | 打开 APP 成功的回调open-type=launchApp 时有效 | `detail` | - |
| opensetting | 在打开授权设置页后回调open-type=openSetting 时有效 | `detail` | - |

View File

@ -251,6 +251,7 @@ function handleSwitchChange({ value }) {
| title | 标题 | string | - | - | - |
| value | 右侧内容 | string | - | - | - |
| icon | 图标类名 | string | - | - | - |
| icon-size | 图标大小 | string \| number | - | - | 1.13.0 |
| label | 描述信息 | string | - | - | - |
| is-link | 是否为跳转链接 | boolean | - | false | - |
| to | 跳转地址 | string | - | - | - |

View File

@ -96,6 +96,8 @@ function handleClick() {
| hide-when-close | 是否当关闭时将弹出层隐藏display: none | boolean | - | true | - |
| z-index | 设置层级 | number | - | 10 | 1.4.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

View File

@ -144,6 +144,7 @@ const filter = (type, values) => {
| loading | 加载中 | boolean | - | false | - |
| loading-color | 加载的颜色,只能使用十六进制的色值写法,且不能使用缩写 | string | - | #4D80F0 | - |
| columns-height | picker内部滚筒高 | number | - | 231 | - |
| item-height | picker item的高度 | number | - | 35 | 1.13.0 |
| formatter | 自定义弹出层选项文案的格式化函数,返回一个字符串 | function | - | - | - |
| filter | 自定义过滤选项的函数,返回列的选项数组 | function | - | - | - |
| minDate | 最小日期13 位的时间戳 | `timestamp` | - | 当前日期 - 10年 | - |

View File

@ -289,6 +289,7 @@ const displayFormatTabLabel = (items) => {
| loading | 加载中 | boolean | - | false | - |
| loading-color | 加载的颜色,只能使用十六进制的色值写法,且不能使用缩写 | string | - | #4D80F0 | - |
| columns-height | picker内部滚筒高 | number | - | 231 | - |
| item-height | picker item的高度 | number | - | 35 | - |
| title | 弹出层标题 | string | - | - | - |
| cancel-button-text | 取消按钮文案 | string | - | 取消 | - |
| confirm-button-text | 确认按钮文案 | string | - | 完成 | - |

View File

@ -209,6 +209,7 @@ const handleBeforeToggle: DropMenuItemBeforeToggle = ({ status, resolve }) => {
| value-key | 选项对象中value 对应的 key | string | - | value | - |
| label-key | 选项对象中,展示的文本对应的 key | string | - | label | - |
| tip-key | 选项对象中,选项说明对应的 key | string | - | tip | - |
| popup-height | popup弹出容器的高度不设置默认为80% | string | - | - | 1.13.0 |
| root-portal | 是否从页面中脱离出来,用于解决各种 fixed 失效问题 | boolean | - | false | 1.11.0 |
## DropdownItem Events

View File

@ -3,7 +3,7 @@
## 基本使用
通过 `height` 属性设置标题 `background` 属性设置背景色。
通过 `height` 属性设置高度 `background` 属性设置背景色。
```html

View File

@ -70,7 +70,7 @@
|-----|------|-----|-------|-------|---------|
| name | 图标名称或图片链接 | string | - | - | - |
| color | 图标的颜色 | string | - | inherit | - |
| size | 图标的字体大小 | string | - | inherit | - |
| size | 图标的字体大小 | string \| number | - | inherit | - |
| classPrefix | 类名前缀,用于使用自定义图标 | string | - | 'wd-icon' | 0.1.27 |
| custom-style | 根节点样式 | string | - | - | - |

View File

@ -1,6 +1,7 @@
---
version: 1.3.10
---
# Keyboard 虚拟键盘
虚拟数字键盘,用于输入数字、密码、身份证或车牌号等场景。
@ -93,6 +94,42 @@ const onInput = (value) => showToast(`${value}`)
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` 属性可以设置键盘标题。
@ -242,25 +279,27 @@ const onDelete = () => showToast('删除')
## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ------------------- | ------------------------ | --------------------- | -------------------------- | ---------- | ---------------- |
| v-model:visible | 是否展开 | `boolean` | - | `false` | 1.3.10 |
| v-model | 绑定的值 | `string` | - | - | 1.3.10 |
| title | 标题 | `string` | - | - | 1.3.10 |
| mode | 键盘模式 | `string` | `default`, `car`, `custom` | `default` | 1.3.10 |
| zIndex | 层级 | `number` | - | `100` | 1.3.10 |
| maxlength | 最大长度 | `number` | - | `Infinity` | 1.3.10 |
| showDeleteKey | 是否显示删除键 | `boolean` | - | `true` | 1.3.10 |
| randomKeyOrder | 是否随机键盘按键顺序 | `boolean` | - | `false` | 1.3.10 |
| closeText | 确认按钮文本 | `string` | - | - | 1.3.10 |
| deleteText | 删除按钮文本 | `string` | - | - | 1.3.10 |
| closeButtonLoading | 关闭按钮是否显示加载状态 | `boolean` | - | `false` | 1.3.10 |
| modal | 是否显示蒙层遮罩 | `boolean` | - | `false` | 1.3.10 |
| hideOnClickOutside | 是否在点击外部时收起键盘 | `boolean` | - | `true` | 1.3.10 |
| lockScroll | 是否锁定背景滚动,锁定时蒙层里的内容也将无法滚动 | `boolean` | - | `true` | 1.3.10 |
| safeAreaInsetBottom | 是否在底部安全区域内 | `boolean` | - | `true` | 1.3.10 |
| extraKey | 额外按键 | `string` / `string[]` | - | - | 1.3.10 |
| root-portal | 是否从页面中脱离出来,用于解决各种 fixed 失效问题 | `boolean` | - | `false` | 1.11.0 |
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ------------------- | -------------------------------------------------------------------- | --------------------- | -------------------------- | ---------- | -------- |
| v-model:visible | 是否展开 | `boolean` | - | `false` | 1.3.10 |
| v-model | 绑定的值 | `string` | - | - | 1.3.10 |
| title | 标题 | `string` | - | - | 1.3.10 |
| mode | 键盘模式 | `string` | `default`, `car`, `custom` | `default` | 1.3.10 |
| zIndex | 层级 | `number` | - | `100` | 1.3.10 |
| maxlength | 最大长度 | `number` | - | `Infinity` | 1.3.10 |
| showDeleteKey | 是否显示删除键 | `boolean` | - | `true` | 1.3.10 |
| randomKeyOrder | 是否随机键盘按键顺序 | `boolean` | - | `false` | 1.3.10 |
| closeText | 确认按钮文本 | `string` | - | - | 1.3.10 |
| deleteText | 删除按钮文本 | `string` | - | - | 1.3.10 |
| closeButtonLoading | 关闭按钮是否显示加载状态 | `boolean` | - | `false` | 1.3.10 |
| modal | 是否显示蒙层遮罩 | `boolean` | - | `false` | 1.3.10 |
| hideOnClickOutside | 是否在点击外部时收起键盘 | `boolean` | - | `true` | 1.3.10 |
| lockScroll | 是否锁定背景滚动,锁定时蒙层里的内容也将无法滚动 | `boolean` | - | `true` | 1.3.10 |
| safeAreaInsetBottom | 是否在底部安全区域内 | `boolean` | - | `true` | 1.3.10 |
| extraKey | 额外按键 | `string` / `string[]` | - | - | 1.3.10 |
| 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

View File

@ -2,6 +2,10 @@
弹出对话框,常用于消息提示、消息确认等,支持函数调用。
:::tip 提示
全局调用方案见 [wot-starter](https://starter.wot-ui.cn/guide/feedback.html),支持在路由导航守卫和网络请求拦截器等场景使用的可全局调用的反馈组件。
:::
## Alert 弹框
alert 弹框只有确定按钮,用于强提醒。

View File

@ -111,6 +111,7 @@ const onChangeDistrict = (pickerView, value, columnIndex, resolve) => {
| loading | 加载中 | boolean | - | false | - |
| loading-color | 加载的颜色,只能使用十六进制的色值写法,且不能使用缩写 | string | - | #4D80F0 | - |
| columns-height | picker内部滚筒高 | number | - | 231 | - |
| item-height | picker item的高度 | number | - | 35 | 1.13.0 |
| value-key | 选项对象中value对应的 key | string | - | value | - |
| label-key | 选项对象中,展示的文本对应的 key | string | - | label | - |
| column-change | 接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参,根据选中项和列下标进行判断,通过 pickerView 实例暴露出来的 `setColumnData` 方法修改其他列的数据源。 | function | - | - | - |

View File

@ -67,6 +67,14 @@ function changeValue({ value }) {
<wd-rate v-model="value" allow-half />
```
## 允许清空评分
设置 `clearable` 属性,当 clearable 属性设置为 true再次点击相同的值时可以将值重置为 0。
```html
<wd-rate v-model="value" clearable />
```
## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
@ -83,6 +91,7 @@ function changeValue({ value }) {
| disabled | 是否禁用 | boolean | - | false | - |
| 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 |
| clearable | 是否允许再次点击后清除 | boolean | - | false | 1.13.0 |
## Events

View File

@ -299,6 +299,27 @@ const current = ref <number>(0)
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
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
@ -383,7 +404,8 @@ const isLoop = ref(false)
| 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 |
## 外部样式类

View File

@ -61,7 +61,7 @@
## 脱敏
设置 `format` 属性,当 `mode`` phone``name `时生效。
设置 `format` 属性,当 `mode``phone``name`时生效。
```html
<wd-text text="李四" mode="name" :format="true"></wd-text>

View File

@ -4,6 +4,8 @@
:::tip 提示
`Toast` 自 1.7.0 版本起支持通过 `props` 属性控制组件样式,字段见[props](#props)需要注意的是函数式调用api的`options`优先级高于`props`
全局调用方案见 [wot-starter](https://starter.wot-ui.cn/guide/feedback.html),支持在路由导航守卫和网络请求拦截器等场景使用的可全局调用的反馈组件。
:::
## 基本用法

View File

@ -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 |
| 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 |
| 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 |
| openSetting | Open authorization settings page |
| chooseAvatar | Get user avatar, avatar information can be obtained from the @chooseavatar callback |
@ -173,6 +174,7 @@ WeChat Mini Program open capabilities, see [WeChat Mini Program Button](https://
| getuserinfo | Get user information | `detail` | - |
| contact | Customer service message callback, valid when open-type="contact" | `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` | - |
| 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` | - |

View File

@ -105,6 +105,7 @@ The `center` attribute sets whether the left and right content of the cell is ve
| title | Left title | string | - | - |
| value | Right content | 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' | - |
| label | Description below the title | string | - | - |
| is-link | Whether to show the right arrow and click effect | boolean | false | - |

View File

@ -96,6 +96,8 @@ function handleClick() {
| hide-when-close | Hide popup layer when closed (display: none) | boolean | - | true | - |
| 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 |
| 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

View File

@ -144,6 +144,7 @@ const filter = (type, values) => {
| loading | Loading state | boolean | - | false | - |
| 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 | - |
| item-height | Height of picker item | number | - | 35 | 1.13.0 |
| 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 | - | - | - |
| minDate | Minimum date, 13-digit timestamp | `timestamp` | - | Current date - 10 years | - |

View File

@ -54,7 +54,7 @@ Set the `name` attribute to an image URL to use image icons. The component autom
| ------------ | ------------------------ | ------ | ------- | ------- |
| name | Icon name or image URL | string | - | - |
| color | Icon color | string | - | - |
| size | Icon size | string | - | - |
| size | Icon size | string \| number | - | - |
| class-prefix | Custom icon class prefix | string | wd-icon | - |
| custom-style | Custom root node style | string | - | - |

View File

@ -1,6 +1,7 @@
---
version: 1.3.10
---
# Keyboard
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')
```
## 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
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>
```
```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
| Attribute | Description | Type | Default | Version |
|---------|-------------|------|---------|------|
| v-model:visible | Whether to display keyboard | boolean | false | - |
| v-model | Keyboard input value | string | - | - |
| maxlength | Maximum input length | number | - | - |
| title | Keyboard title | string | - | - |
| mode | Keyboard mode, can be set to `custom` or `car` | string | - | - |
| close-text | Text of close button | string | - | - |
| extra-key | Content of extra key | string / string[] | - | - |
| random-key-order | Whether to randomly arrange number keys | boolean | false | - |
| show-close-button | Whether to show close button | boolean | true | - |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | boolean | true | - |
| z-index | Keyboard z-index | number | 100 | - |
| root-portal | Whether to detach from the page, used to solve various fixed positioning issues | boolean | false | 1.11.0 |
| Parameter | Description | Type | Options | Default | Version |
| ------------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------- | -------------------------- | ---------- | ------- |
| v-model:visible | Whether to display | `boolean` | - | `false` | 1.3.10 |
| v-model | Bound value | `string` | - | - | 1.3.10 |
| title | Title | `string` | - | - | 1.3.10 |
| mode | Keyboard mode | `string` | `default`, `car`, `custom` | `default` | 1.3.10 |
| zIndex | Z-index | `number` | - | `100` | 1.3.10 |
| maxlength | Maximum length | `number` | - | `Infinity` | 1.3.10 |
| showDeleteKey | Whether to show delete key | `boolean` | - | `true` | 1.3.10 |
| randomKeyOrder | Whether to randomize keyboard key order | `boolean` | - | `false` | 1.3.10 |
| closeText | Confirm button text | `string` | - | - | 1.3.10 |
| deleteText | Delete button text | `string` | - | - | 1.3.10 |
| closeButtonLoading | Whether close button shows loading state | `boolean` | - | `false` | 1.3.10 |
| 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
| Event | Description | Parameters |
|-------|-------------|------------|
| input | Triggered when a key is pressed | key: The pressed key |
| delete | Triggered when delete key is pressed | - |
| close | Triggered when keyboard is closed | - |
| Event Name | Description | Parameters | Version |
| ---------- | ------------------------------------------------- | ----------- | ------- |
| input | Triggered when a key is pressed | key: string | - |
| delete | Triggered when delete key is pressed | - | - |
| close | Triggered when close button or outside is clicked | - | - |
## Slots
## External Style Classes
| Name | Description |
|------|-------------|
| title | Custom title content |
| Class Name | Description | Version |
| ------------ | --------------------- | ------- |
| custom-class | Root node style class | 1.3.10 |
| custom-style | Root node style | 1.3.10 |

View File

@ -2,6 +2,10 @@
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 only has a confirm button, used for strong reminders.

View File

@ -108,6 +108,7 @@ const onChangeDistrict = (pickerView, value, columnIndex, resolve) => {
| loading | Loading state | boolean | - | false | - |
| 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 | - |
| item-height | Height of picker item | number | - | 35 | 1.13.0 |
| value-key | Key for value in option object | string | - | value | - |
| 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 | - | - | - |

View File

@ -67,6 +67,14 @@ Set the `allowHalf` property.
<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
| Parameter | Description | Type | Options | Default | Version |
@ -83,6 +91,7 @@ Set the `allowHalf` property.
| 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%) | - |
| allow-half | Whether to allow half selection | boolean | - | false | 1.7.0 |
| clearable | Whether to allow clear rating | boolean | - | false | 1.13.0 |
## Events

View File

@ -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
| Attribute | Description | Type | Default | Version |
|-----------|-------------|------|---------|----------|
| list | List of images or videos to display | array | [] | - |
| v-model:current | Current slide index | number | 0 | - |
| autoplay | Whether to enable auto-play | boolean | false | - |
| interval | Auto-play interval (ms) | number | 3000 | - |
| duration | Slide animation duration (ms) | number | 500 | - |
| indicator | Indicator configuration object | object | { type: 'dots' } | - |
| indicator-position | Indicator position | string | 'bottom' | - |
| previous-margin | Previous slide margin | string | '0px' | - |
| next-margin | Next slide margin | string | '0px' | - |
| display-multiple-items | Number of slides to display simultaneously | number | 1 | - |
| autoplay-video | Whether to auto-play videos | boolean | true | - |
| stop-autoplay-when-video-play | Whether to stop carousel when playing video | boolean | false | - |
| loop | Whether to enable loop mode | boolean | true | - |
| custom-indicator-class | Custom indicator class | string | - | - |
| custom-image-class | Custom image class | string | - | - |
| custom-next-image-class | Custom next image class | string | - | - |
| custom-prev-image-class | Custom previous image class | string | - | - |
| Parameter | Description | Type | Optional Values | Default Value | Minimum Version |
| ------------------------- | ------------------------------------------------------------------ | --------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------- | ---------------- |
| autoplay | Whether to enable auto-play | `boolean` | - | true | 0.1.22 |
| v-model:current | Control which carousel item is currently displayed (index) | `number` | - | 0 | 0.1.22 |
| direction | Carousel sliding direction | `DirectionType` | `horizontal, vertical` | horizontal | 0.1.22 |
| displayMultipleItems | Number of slides displayed simultaneously | `number` | - | 1 | 0.1.22 |
| duration | Slide animation duration | `number` | - | 300 | 0.1.22 |
| easingFunction | Switching easing animation type (WeChat Mini Program, Kuaishou Mini Program, JD Mini Program) | `EasingType` | - | default | 0.1.22 |
| height | Height of the carousel | `string / number` | - | 192 | 0.1.22 |
| interval | Carousel interval time | `number` | - | 5000 | 0.1.22 |
| list | Image list | `string[] / SwiperList[]` | - | - | 0.1.22 |
| loop | Whether to enable loop playback | `boolean` | - | true | 0.1.22 |
| nextMargin | Next margin | `string / number` | - | 0 | 0.1.22 |
| indicatorPosition | Indicator display position | `IndicatorPositionType` | `left, top-left, top, top-right, bottom-left, bottom, bottom-right, right` | bottom | 0.1.22 |
| previousMargin | Previous margin | `string / number` | - | 0 | 0.1.22 |
| snapToEdge | Whether margins should apply to first and last elements | `boolean` | - | false | 0.1.22 |
| indicator | Complete indicator configuration | `SwiperIndicatorProps / boolean` | - | true | 0.1.22 |
| 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 |
| 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
| Event | Description | Parameters |
|-------|-------------|------------|
| click | Triggered when clicking a slide | event: Event |
| change | Triggered when current slide changes | index: number |
| Event Name | Description | Parameters | Minimum Version |
| ---------- | ------------------------ | ----------------------------------------------------------- | --------------- |
| click | Triggered when clicking carousel item | `(index: number, item: SwiperList \| string)` | 0.1.22 |
| 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 |

View File

@ -2,6 +2,12 @@
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
The Toast component is a functional component that can be used by calling the `$toast` method on the current instance.

View File

@ -1,6 +1,49 @@
# 更新日志
## [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)

View File

@ -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.
## 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?
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.
@ -197,4 +200,11 @@ First, check if the usage is correct. The `uni-app` platform doesn't support glo
<wd-toast></wd-toast>
```
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.

View File

@ -62,6 +62,7 @@ After donation, your nickname and message will be displayed in the [donation lis
| [create-uni](https://github.com/uni-helper/create-uni) | Quickly create uni-app projects |
| [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-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 |
| [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 |

View File

@ -1,6 +1,49 @@
# 更新日志
## [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)
@ -1082,7 +1125,7 @@
### ✏️ Documentation | 文档
* ✏️ 调整组件库基于vite配置自动引入组件的介绍 ([2d23607](https://github.com/Moonofweisheng/wot-design-uni/commit/2d2360706fbe2a5d4024ceebd82720014c6b1ea2))
* ✏️ 文档推荐用户从wot-ui.cn迁移至wot-design-uni.gitee.io ([72a567c](https://github.com/Moonofweisheng/wot-design-uni/commit/72a567c44867f049c1526f5d682e46155047516a))
* ✏️ 文档推荐用户从wot-design-uni.cn迁移至wot-design-uni.gitee.io ([72a567c](https://github.com/Moonofweisheng/wot-design-uni/commit/72a567c44867f049c1526f5d682e46155047516a))
* ✏️ 增加steps设置激活项的介绍 ([7c0d36c](https://github.com/Moonofweisheng/wot-design-uni/commit/7c0d36c36214517d959aa27e284aacf59d2b074b))
### [1.2.3](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.2...v1.2.3) (2024-03-20)

View File

@ -6,6 +6,9 @@
目前支持 微信小程序、支付宝小程序、钉钉小程序、H5、APP 等平台。
## 有没有最佳实践分享?
有,可以关注我的公众号「不如摸鱼去」,也可以访问我的博客[不如摸鱼去](https://blog.wot-ui.cn/),分享无数干货,等你来看。
## 组件库有没有提供可以单独引入的组件?
目前是没有的,首先在插件市场缺少`CI/CD`工具,无法实现自动化发布,维护一套单独引入的组件费时费力,其次组件库提供的安装方式均可以实现按需引入,所以是无需提供单独引入的组件的。
@ -313,6 +316,9 @@ function handleOpened() {
## 为何messageBox弹出了多个
检查一下弹出多个`messageBox`的页面是否存在多个相同`selector`或无`selector``<wd-message-box></wd-message-box>`标签(当前页面包括页面中使用的组件)。`toast`亦是同理,在子组件中使用`messageBox`等组件需要指定`selector`并确保`selector`唯一。
## Toast、Message、Loading 等如何全局调用?
全局调用方案见 [wot-starter](https://starter.wot-ui.cn/guide/feedback.html),支持在路由导航守卫和网络请求拦截器等场景使用的可全局调用的反馈组件。
## 如何快速解决你的问题?

View File

@ -63,6 +63,7 @@
| [create-uni](https://github.com/uni-helper/create-uni) | 快速创建 uni-app 项目 |
| [wot-starter](https://github.com/wot-ui/wot-starter) | 基于 [vitesse-uni-app](https://github.com/uni-helper/vitesse-uni-app) 的 wot-ui 快速起手项目 |
| [wot-starter-retail](https://github.com/Moonofweisheng/wot-starter-retail) | 基于 wot-design-uni 的 uni-app 零售行业模板 |
| [wot-ui-intellisense](https://github.com/wot-ui/wot-ui-intellisense) | wot-ui vscode 代码提示插件 |
| [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-router](https://github.com/Moonofweisheng/uni-mini-router) | 一个基于 vue3 和 Typescript 的轻量级 uni-app 路由库 |

View File

@ -1,6 +1,6 @@
{
"name": "wot-design-uni",
"version": "1.12.4",
"version": "1.13.0",
"license": "MIT",
"repository": {
"type": "git",
@ -84,7 +84,7 @@
"@dcloudio/uni-mp-weixin": "3.0.0-4050720250324001",
"@dcloudio/uni-mp-xhs": "3.0.0-4050720250324001",
"@dcloudio/uni-quickapp-webview": "3.0.0-4050720250324001",
"element-plus": "^2.3.9",
"element-plus": "^2.11.2",
"vite-plugin-compression": "^0.5.1",
"vitepress": "^1.6.3",
"vue": "^3.4.38",

505
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@ -234,7 +234,8 @@
"chao-hu": "Chaohu Lake",
"chao-zhou": "Chaozhou",
"che-hui": "withdraw",
"che-pai-hao-jian-pan": "License plate number keyboard",
"che-pai-hao-jian-pan-fei-shou-kong": "License plate keyboard (Uncontrolled)",
"che-pai-hao-jian-pan-shou-kong": "License plate keyboard (Controlled)",
"checkbox-fu-xuan-kuang": "Checkbox",
"checkbox-title": "Checkbox",
"chen-zhou": "Chenzhou",
@ -1451,6 +1452,7 @@
"yue-xiu-qu": "Yuexiu",
"yue-xuan-ze": "Monthly selection",
"yun-xu-ban-xuan": "Allow half selection",
"yun-xu-qing-kong-ping-fen": "Allow clear rating",
"yun-xu-kong-zhi-bing-she-zhi-placeholder": "Allow null values and set placeholder",
"yy-nian-mm-yue-dd-ri": "YY year MM month DD day",
"yy-nian-mm-yue-dd-ri-0": "YY year MM month DD day",

View File

@ -234,7 +234,8 @@
"chao-hu": "巢湖",
"chao-zhou": "潮州",
"che-hui": "撤回",
"che-pai-hao-jian-pan": "车牌号键盘",
"che-pai-hao-jian-pan-fei-shou-kong": "车牌号键盘(非受控)",
"che-pai-hao-jian-pan-shou-kong": "车牌号键盘(受控)",
"checkbox-fu-xuan-kuang": "Checkbox 复选框",
"checkbox-title": "Checkbox 复选框",
"chen-zhou": "郴州",
@ -1451,6 +1452,7 @@
"yue-xiu-qu": "越秀区",
"yue-xuan-ze": "月选择",
"yun-xu-ban-xuan": "允许半选",
"yun-xu-qing-kong-ping-fen": "允许清空评分",
"yun-xu-kong-zhi-bing-she-zhi-placeholder": "允许空值,并设置 placeholder",
"yy-nian-mm-yue-dd-ri": "YY年MM月DD日",
"yy-nian-mm-yue-dd-ri-0": "YY年MM月DD日",

View File

@ -11,7 +11,8 @@
<wd-cell :title="$t('slot-zi-ding-yi-biao-ti')" is-link @click="showKeyBoard(9)" />
<wd-cell :title="$t('duo-geewai-an-jian')" is-link @click="showKeyBoard(5)" />
<wd-cell :title="$t('sui-ji-shu-zi-jian-pan')" is-link @click="showKeyBoard(6)" />
<wd-cell :title="$t('che-pai-hao-jian-pan')" is-link @click="showKeyBoard(10)" />
<wd-cell :title="$t('che-pai-hao-jian-pan-fei-shou-kong')" :value="value10" is-link @click="showKeyBoard(10)" />
<wd-cell :title="$t('che-pai-hao-jian-pan-shou-kong')" :value="value11" is-link @click="showKeyBoard(11)" />
<wd-cell :title="$t('shuang-xiang-bang-ding')" clickable :value="value1" @click="showKeyBoard(7)" />
<wd-cell :title="$t('zhan-shi-meng-ceng')" clickable @click="showKeyBoard(8)" />
</wd-cell-group>
@ -65,7 +66,8 @@
<wd-keyboard :modal="true" v-model:visible="visible8" @input="onInput" @delete="onDelete" />
<wd-keyboard v-model:visible="visible10" mode="car" @input="onInput" @delete="onDelete" />
<wd-keyboard v-model="value10" v-model:visible="visible10" mode="car" auto-switch-lang @input="onInput" @delete="onDelete" />
<wd-keyboard v-model="value11" v-model:visible="visible11" v-model:car-lang="carLang" mode="car" @input="onInput" @delete="onDelete" />
</page-wraper>
</template>
<script lang="ts" setup>
@ -84,11 +86,14 @@ const visible7 = ref<boolean>(false)
const visible8 = ref<boolean>(false)
const visible9 = ref<boolean>(false)
const visible10 = ref<boolean>(false)
const visible11 = ref<boolean>(false)
const visibleArr = [visible1, visible2, visible3, visible4, visible5, visible6, visible7, visible8, visible9, visible10]
const visibleArr = [visible1, visible2, visible3, visible4, visible5, visible6, visible7, visible8, visible9, visible10, visible11]
const value1 = ref<string>('')
const value10 = ref<string>('')
const value11 = ref<string>('')
const carLang = ref<'zh' | 'en'>('zh')
function showKeyBoard(index: number) {
visibleArr.forEach((item, i) => (i === index - 1 ? (item.value = true) : (item.value = false)))
}

View File

@ -36,6 +36,15 @@
<demo-block :title="$t('yun-xu-ban-xuan')">
<wd-rate v-model="value8" allow-half />
</demo-block>
<demo-block :title="$t('yun-xu-qing-kong-ping-fen')">
<view style="margin-bottom: 24rpx">
<wd-rate v-model="value9" clearable />
</view>
<view>
<wd-rate v-model="value10" clearable allow-half />
</view>
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup>
@ -49,6 +58,8 @@ const value5 = ref<number>(4)
const value6 = ref<number>(3)
const value7 = ref<number>(5)
const value8 = ref<number>(2.5)
const value9 = ref<number>(3)
const value10 = ref<number>(3.5)
function changeValue1({ value }: any) {
console.log(value)

View File

@ -175,6 +175,14 @@
<wd-button type="success" @click="current8++">next</wd-button>
</view>
</demo-block>
<demo-block :title="$t('cha-cao-yong-fa')">
<wd-swiper :list="swiperList" autoplay v-model:current="current1" :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>
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup>

View File

@ -1,6 +1,49 @@
# 更新日志
## [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)

View File

@ -716,7 +716,7 @@ export const isDate = (val: unknown): val is Date => Object.prototype.toString.c
*/
export function isVideoUrl(url: string): boolean {
// 使用正则表达式匹配视频文件类型的URL
const videoRegex = /\.(mp4|mpg|mpeg|dat|asf|avi|rm|rmvb|mov|wmv|flv|mkv|video)/i
const videoRegex = /\.(ogm|webm|ogv|asx|m4v|mp4|mpg|mpeg|dat|asf|avi|rm|rmvb|mov|wmv|flv|mkv|video)(?=$|[?#])/i
return videoRegex.test(url)
}
@ -727,7 +727,7 @@ export function isVideoUrl(url: string): boolean {
*/
export function isImageUrl(url: string): boolean {
// 使用正则表达式匹配图片URL
const imageRegex = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg|image)/i
const imageRegex = /\.(xbm|tif|pjp|apng|svgz|jpeg|jpg|heif|ico|tiff|heic|pjpeg|avif|gif|png|svg|webp|jfif|bmp|dpg|image)(?=$|[?#])/i
return imageRegex.test(url)
}

View File

@ -20,6 +20,7 @@ export type ButtonOpenType =
| 'getUserInfo'
| 'contact'
| 'getPhoneNumber'
| 'getRealtimePhoneNumber'
| 'launchApp'
| 'openSetting'
| 'chooseAvatar'

View File

@ -32,6 +32,7 @@
@getuserinfo="handleGetuserinfo"
@contact="handleConcat"
@getphonenumber="handleGetphonenumber"
@getrealtimephonenumber="handleGetrealtimephonenumber"
@error="handleError"
@launchapp="handleLaunchapp"
@opensetting="handleOpensetting"
@ -81,6 +82,7 @@ const emit = defineEmits([
'getuserinfo',
'contact',
'getphonenumber',
'getrealtimephonenumber',
'error',
'launchapp',
'opensetting',
@ -134,6 +136,10 @@ function handleGetphonenumber(event: any) {
emit('getphonenumber', event.detail)
}
function handleGetrealtimephonenumber(event: any) {
emit('getrealtimephonenumber', event.detail)
}
function handleError(event: any) {
emit('error', event.detail)
}

View File

@ -1,5 +1,5 @@
import type { ExtractPropTypes } from 'vue'
import { baseProps, makeArrayProp, makeBooleanProp, makeStringProp, makeNumericProp } from '../common/props'
import { baseProps, makeArrayProp, makeBooleanProp, makeStringProp, makeNumericProp, numericProp } from '../common/props'
import { type FormItemRule } from '../wd-form/types'
@ -17,6 +17,10 @@ export const cellProps = {
*
*/
icon: String,
/**
*
*/
iconSize: numericProp,
/**
*
*/

View File

@ -11,7 +11,7 @@
<text v-if="isRequired && markerSide === 'before'" class="wd-cell__required wd-cell__required--left">*</text>
<!--左侧icon部位-->
<slot name="icon">
<wd-icon v-if="icon" :name="icon" :custom-class="`wd-cell__icon ${customIconClass}`"></wd-icon>
<wd-icon v-if="icon" :name="icon" :size="iconSize" :custom-class="`wd-cell__icon ${customIconClass}`"></wd-icon>
</slot>
<view class="wd-cell__title">

View File

@ -1,8 +1,8 @@
/*
* @Author: weisheng
* @Date: 2025-01-25 23:46:29
* @LastEditTime: 2025-02-13 13:16:45
* @LastEditors: weisheng
* @LastEditTime: 2025-09-09 10:00:00
* @LastEditors: rusheng
* @Description:
* @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-curtain/types.ts
*
@ -68,7 +68,15 @@ export const curtainProps = {
/**
* fixed (H5: teleport, APP: renderjs, 小程序: root-portal)
*/
rootPortal: makeBooleanProp(false)
rootPortal: makeBooleanProp(false),
/**
*
*/
showMenuByLongpress: makeBooleanProp(false),
/**
* true
*/
closeOnClick: makeBooleanProp(true)
}
export type CurtainProps = ExtractPropTypes<typeof curtainProps>

View File

@ -20,7 +20,15 @@
:custom-style="customStyle"
>
<view class="wd-curtain__content">
<image :src="src" class="wd-curtain__content-img" :style="imgStyle" @click="clickImage" @error="imgErr" @load="imgLoad"></image>
<image
:src="src"
class="wd-curtain__content-img"
:style="imgStyle"
:show-menu-by-longpress="showMenuByLongpress"
@click="clickImage"
@error="imgErr"
@load="imgLoad"
></image>
<slot name="close">
<wd-icon
name="close-outline"
@ -153,7 +161,9 @@ function clickImage() {
})
}
emit('click')
close()
if (props.closeOnClick) {
close()
}
}
</script>

View File

@ -21,6 +21,10 @@ export const datetimePickerViewProps = {
* picker内部滚筒高
*/
columnsHeight: makeNumberProp(217),
/**
* picker item的高度
*/
itemHeight: makeNumberProp(35),
/**
* key
*/

View File

@ -7,6 +7,7 @@
v-model="pickerValue"
:columns="columns"
:columns-height="columnsHeight"
:item-height="itemHeight"
:columnChange="columnChange"
:loading="loading"
:loading-color="loadingColor"

View File

@ -167,6 +167,7 @@ export default {
import wdPopup from '../wd-popup/wd-popup.vue'
import wdDatetimePickerView from '../wd-datetime-picker-view/wd-datetime-picker-view.vue'
import wdCell from '../wd-cell/wd-cell.vue'
import wdIcon from '../wd-icon/wd-icon.vue'
import { computed, getCurrentInstance, nextTick, onBeforeMount, onMounted, ref, watch } from 'vue'
import { deepClone, isArray, isDef, isEqual, isFunction, padZero } from '../common/util'
import { type DatetimePickerViewInstance, type DatetimePickerViewColumnType, type DatetimePickerViewExpose } from '../wd-datetime-picker-view/types'

View File

@ -72,6 +72,10 @@ export const dorpMenuItemProps = {
* popup样式
*/
customPopupStyle: makeStringProp(''),
/**
*
*/
popupHeight: makeStringProp(''),
/**
* fixed (H5: teleport, APP: renderjs, 小程序: root-portal)
*/

View File

@ -9,7 +9,7 @@
:z-index="zIndex"
:duration="duration"
:position="position"
:custom-style="`position: absolute; pointer-events: auto; max-height: 80%;${customPopupStyle}`"
:custom-style="`position: absolute; pointer-events: auto; max-height: ${popupHeight ? popupHeight : '80%'}; ${customPopupStyle}`"
:custom-class="customPopupClass"
:modal="false"
:close-on-click-modal="false"
@ -19,7 +19,7 @@
@before-leave="beforeLeave"
@after-leave="afterLeave"
>
<view v-if="options.length">
<scroll-view v-if="options.length" :style="popupHeight ? { height: popupHeight } : ''" scroll-y scroll-with-animation :show-scrollbar="true">
<view
v-for="(item, index) in options"
:key="index"
@ -36,7 +36,7 @@
:custom-class="`wd-drop-item__icon ${customIcon}`"
/>
</view>
</view>
</scroll-view>
<slot v-else />
</wd-popup>
</view>

View File

@ -10,7 +10,7 @@
font-style: normal;
}
/* #ifdef APP-PLUS */
/* #ifdef APP-PLUS || H5 */
@font-face {
font-family: 'wd-icons';
src:

View File

@ -1,4 +1,4 @@
import type { PropType } from 'vue'
import type { ExtractPropTypes, PropType } from 'vue'
import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
import type { FormItemRule } from '../wd-form/types'
@ -185,3 +185,5 @@ export const inputProps = {
*/
markerSide: makeStringProp<'before' | 'after'>('before')
}
export type InputProps = ExtractPropTypes<typeof inputProps>

View File

@ -3,6 +3,7 @@ import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../c
export type KeyboardMode = 'default' | 'custom' | 'car'
export type KeyType = '' | 'delete' | 'extra' | 'close'
export type CarKeyboardLang = 'zh' | 'en'
export interface Key {
text?: number | string // key文本
@ -79,5 +80,13 @@ export const keyboardProps = {
/**
* fixed (H5: teleport, APP: renderjs, 小程序: root-portal)
*/
rootPortal: makeBooleanProp(false)
rootPortal: makeBooleanProp(false),
/**
* mode=car时生效
*/
carLang: String as PropType<CarKeyboardLang>,
/**
* mode=car且carLang是非受控状态时生效
*/
autoSwitchLang: makeBooleanProp(false)
}

View File

@ -55,12 +55,12 @@ export default {
import { computed, ref, watch, useSlots } from 'vue'
import wdPopup from '../wd-popup/wd-popup.vue'
import WdKey from './key/index.vue'
import { keyboardProps, type Key } from './types'
import { keyboardProps, type Key, type CarKeyboardLang } from './types'
import type { NumberKeyType } from './key/types'
import { CAR_KEYBOARD_AREAS, CAR_KEYBOARD_KEYS } from './constants'
const props = defineProps(keyboardProps)
const emit = defineEmits(['update:visible', 'input', 'close', 'delete', 'update:modelValue'])
const emit = defineEmits(['update:visible', 'input', 'close', 'delete', 'update:modelValue', 'update:carLang'])
const slots = useSlots()
const show = ref(props.visible)
@ -71,7 +71,14 @@ watch(
}
)
const carKeyboardLang = ref('zh')
const carLang = ref<CarKeyboardLang>('zh')
const carKeyboardLang = computed({
get: () => (props.carLang ? props.carLang : carLang.value),
set: (value: CarKeyboardLang) => {
carLang.value = value
}
})
const keys = computed(() => (props.mode !== 'car' ? (props.mode === 'custom' ? genCustomKeys() : genDefaultKeys()) : genCarKeys()))
const showClose = computed(() => {
@ -141,7 +148,7 @@ function genCarKeys(): Array<Key> {
const [keys, remainKeys] = splitCarKeys()
return [
...keys,
{ text: carKeyboardLang.value === 'zh' ? 'ABC' : '返回', type: 'extra', wider: true },
{ text: carKeyboardLang.value === 'zh' ? 'ABC' : '省份', type: 'extra', wider: true },
...remainKeys,
{ text: props.deleteText, type: 'delete', wider: true }
]
@ -161,8 +168,13 @@ const handlePress = (text: string, type: NumberKeyType) => {
if (type === 'extra') {
if (text === '') {
return handleClose()
} else if (text === 'ABC' || text === '返回') {
carKeyboardLang.value = carKeyboardLang.value === 'zh' ? 'en' : 'zh'
} else if (text === 'ABC' || text === '省份') {
const newLang = carKeyboardLang.value === 'zh' ? 'en' : 'zh'
if (props.carLang) {
emit('update:carLang', newLang)
} else {
carKeyboardLang.value = newLang
}
return
}
}
@ -170,12 +182,21 @@ const handlePress = (text: string, type: NumberKeyType) => {
const value = props.modelValue
if (type === 'delete') {
emit('delete')
emit('update:modelValue', value.slice(0, value.length - 1))
const newValue = value.slice(0, value.length - 1)
emit('update:modelValue', newValue)
if (props.mode === 'car' && newValue.length === 0 && props.autoSwitchLang) {
carKeyboardLang.value = 'zh'
}
} else if (type === 'close') {
handleClose()
} else if (value.length < +props.maxlength) {
emit('input', text)
emit('update:modelValue', value + text)
const newValue = value + text
emit('update:modelValue', newValue)
if (props.mode === 'car' && newValue.length === 1 && props.autoSwitchLang) {
//
carKeyboardLang.value = 'en'
}
}
}
</script>

View File

@ -30,6 +30,10 @@ export const pickerViewProps = {
* picker内部滚筒高
*/
columnsHeight: makeNumberProp(217),
/**
* picker item的高度
*/
itemHeight: makeNumberProp(35),
/**
* value对应的 key
*/

View File

@ -52,7 +52,6 @@ const props = defineProps(pickerViewProps)
const emit = defineEmits(['change', 'pickstart', 'pickend', 'update:modelValue'])
const formatColumns = ref<ColumnItem[][]>([]) //
const itemHeight = ref<number>(35)
const selectedIndex = ref<Array<number>>([]) //
watch(

View File

@ -92,5 +92,12 @@ export const rateProps = {
* 类型: boolean
* 默认值: false
*/
allowHalf: makeBooleanProp(false)
allowHalf: makeBooleanProp(false),
/**
* clearable true 0
* 类型: boolean
* 默认值: false
*/
clearable: makeBooleanProp(false)
}

View File

@ -12,9 +12,9 @@
:name="isActive(rate) ? activeIcon : icon"
:size="size"
:custom-style="rate === '100%' ? iconActiveStyle : iconStyle"
@click="changeRate(index, false)"
@click="handleClick(index, false)"
/>
<view v-if="props.allowHalf" class="wd-rate__item-half" @click.stop="changeRate(index, true)">
<view v-if="props.allowHalf" class="wd-rate__item-half" @click.stop="handleClick(index, true)">
<wd-icon
custom-class="wd-rate__item-star"
:name="isActive(rate) ? activeIcon : icon"
@ -125,12 +125,30 @@ function computeActiveValue() {
}
activeValue.value = tempActiveValue
}
/**
* @description 点击icon触发组件的change事件
* @description 处理点击事件
* @param index 点击的索引
* @param isHalf 是否为半星
*/
function changeRate(index: number, isHalf: boolean) {
if (props.readonly || props.disabled) return
const value = isHalf ? index + 0.5 : index + 1
function handleClick(index: number, isHalf: boolean) {
const { readonly, disabled, clearable, allowHalf, modelValue } = props
if (readonly || disabled) return
let value = isHalf ? index + 0.5 : index + 1
// modelValue
if (clearable) {
const minValue = allowHalf ? 0.5 : 1
if (value === modelValue && value === minValue) {
value = 0
}
}
updateValue(value)
}
/**
* @description 设置评分值并触发事件
*/
function updateValue(value: number) {
emit('update:modelValue', value)
emit('change', {
value
@ -149,7 +167,8 @@ async function onTouchMove(event: TouchEvent) {
const isHalf = props.allowHalf && clientX - target.left! < itemWidth / 2
const value = isHalf ? targetIndex + 0.5 : targetIndex + 1
if (value >= 0.5) {
changeRate(targetIndex, isHalf)
const value = isHalf ? targetIndex + 0.5 : targetIndex + 1
updateValue(value)
}
}
}

View File

@ -32,7 +32,7 @@ export default {
<script setup lang="ts">
import { computed, getCurrentInstance, onMounted, reactive, watch } from 'vue'
import { getRect, isObj, objToStyle, addUnit, pause } from '../common/util'
import { getRect, isObj, objToStyle, addUnit, pause, isEqual } from '../common/util'
import type { CSSProperties } from 'vue'
import { segmentedProps, type SegmentedExpose, type SegmentedOption } from './types'
const $item = '.wd-segmented__item'
@ -94,20 +94,29 @@ function updateActiveStyle(animation: boolean = true) {
})
}
/**
* 更新值
*/
function updateValue(newValue: string | number, option: string | number | SegmentedOption) {
if (!isEqual(newValue, props.value)) {
emit('update:value', newValue)
emit('change', isObj(option) ? option : { value: newValue })
}
}
/**
* 更新当前下标
*/
function updateCurrentIndex() {
const index = props.options.findIndex((option: string | number | SegmentedOption) => {
const value = isObj(option) ? option.value : option
return value == props.value
return isEqual(value, props.value)
})
if (index >= 0) {
state.activeIndex = index
} else {
const value = isObj(props.options[0]) ? props.options[0].value : props.options[0]
emit('update:value', value)
emit('change', isObj(props.options[0]) ? props.options[0] : { value })
updateValue(value, props.options[0])
}
}
@ -117,10 +126,10 @@ function handleClick(option: string | number | SegmentedOption, index: number) {
return
}
const value = isObj(option) ? option.value : option
state.activeIndex = index
updateActiveStyle()
emit('update:value', value)
emit('change', isObj(option) ? option : { value })
updateValue(value, option)
emit('click', isObj(option) ? option : { value })
}

View File

@ -15,6 +15,26 @@
align-items: center;
box-sizing: border-box;
padding: $-swiper-item-padding;
@include m(slot) {
// 问题来自 https://github.com/dcloudio/uni-app/issues/4629支付宝小程序不支持属性选择器
/* #ifdef MP */
:deep() {
/* #ifdef MP-WEIXIN */
view:not([class]) {
width: 100%;
height: 100%;
}
/* #endif */
/* #ifndef MP-WEIXIN */
view {
width: 100%;
height: 100%;
}
/* #endif */
}
/* #endif */
}
}
@include e(image, video) {

View File

@ -22,33 +22,36 @@
@change="handleChange"
@animationfinish="handleAnimationfinish"
>
<swiper-item v-for="(item, index) in list" :key="index" class="wd-swiper__item">
<video
v-if="isVideo(item)"
:id="`video-${index}-${uid}`"
:style="{ height: addUnit(height) }"
:src="isObj(item) ? item[valueKey] : item"
:poster="isObj(item) ? item.poster : ''"
:class="`wd-swiper__video ${customItemClass} ${getCustomItemClass(currentValue, index, list)}`"
@play="handleVideoPaly"
@pause="handleVideoPause"
:enable-progress-gesture="false"
:loop="videoLoop"
:muted="muted"
:autoplay="autoplayVideo"
objectFit="cover"
@click="handleClick(index, item)"
/>
<image
v-else
:src="isObj(item) ? item[valueKey] : item"
:class="`wd-swiper__image ${customImageClass} ${customItemClass} ${getCustomItemClass(currentValue, index, list)}`"
:style="{ height: addUnit(height) }"
:mode="imageMode"
@click="handleClick(index, item)"
/>
<text v-if="isObj(item) && item[textKey]" :class="`wd-swiper__text ${customTextClass}`" :style="customTextStyle">{{ item[textKey] }}</text>
<swiper-item v-for="(item, index) in list" :key="index" :class="swiperItemClass">
<slot :item="item" :index="index">
<video
v-if="isVideo(item)"
:id="`video-${index}-${uid}`"
:style="{ height: addUnit(height) }"
:src="isObj(item) ? item[valueKey] : item"
:poster="isObj(item) ? item.poster : ''"
:class="`wd-swiper__video ${customItemClass} ${getCustomItemClass(currentValue, index, list)}`"
@play="handleVideoPaly"
@pause="handleVideoPause"
:enable-progress-gesture="false"
:loop="videoLoop"
:muted="muted"
:autoplay="autoplayVideo"
objectFit="cover"
@click="handleClick(index, item)"
/>
<image
v-else
:src="isObj(item) ? item[valueKey] : item"
:class="`wd-swiper__image ${customImageClass} ${customItemClass} ${getCustomItemClass(currentValue, index, list)}`"
:style="{ height: addUnit(height) }"
:mode="imageMode"
@click="handleClick(index, item)"
/>
<text v-if="isObj(item) && item[textKey]" :class="`wd-swiper__text ${customTextClass}`" :style="customTextStyle">
{{ item[textKey] }}
</text>
</slot>
</swiper-item>
</swiper>
<!-- #ifdef MP-WEIXIN -->
@ -85,10 +88,11 @@ export default {
<script lang="ts" setup>
import wdSwiperNav from '../wd-swiper-nav/wd-swiper-nav.vue'
import { computed, watch, ref, getCurrentInstance } from 'vue'
import { computed, watch, ref, getCurrentInstance, useSlots } from 'vue'
import { addUnit, isObj, isImageUrl, isVideoUrl, uuid, isDef } from '../common/util'
import { swiperProps, type SwiperList } from './types'
import type { SwiperNavProps } from '../wd-swiper-nav/types'
const slots = useSlots()
const props = defineProps(swiperProps)
const emit = defineEmits(['click', 'change', 'animationfinish', 'update:current'])
@ -127,6 +131,10 @@ watch(
}
)
const swiperItemClass = computed(() => {
return `wd-swiper__item ${slots.default ? 'wd-swiper__item--slot' : ''}`
})
const swiperIndicator = computed(() => {
const { list, direction, indicatorPosition, indicator } = props
const swiperIndicator: Partial<SwiperNavProps> = {

View File

@ -154,6 +154,7 @@
}
@include e(value) {
white-space: normal;
@include when(ellipsis) {
word-break: break-all;
@include multiEllipsis(2);

View File

@ -78,15 +78,15 @@ export const getToastOptionKey = (selector: string) => {
export const toastIcon = {
success() {
return '<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>成功</title><desc>Created with Sketch.</desc><defs><filter x="-63.2%" y="-80.0%" width="226.3%" height="260.0%" filterUnits="objectBoundingBox" id="filter-1"><feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0.122733141 0 0 0 0 0.710852582 0 0 0 0 0.514812768 0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter><rect id="path-2" x="3.4176226" y="5.81442199" width="3" height="8.5" rx="1.5"></rect><linearGradient x1="50%" y1="0.126649064%" x2="50%" y2="100%" id="linearGradient-4"><stop stop-color="#ACFFBD" stop-opacity="0.208123907" offset="0%"></stop><stop stop-color="#10B87C" offset="100%"></stop></linearGradient></defs><g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="反馈-轻提示" transform="translate(-388.000000, -538.000000)"><g id="成功" transform="translate(388.000000, 538.000000)"><circle id="Oval" fill="#34D19D" opacity="0.400000006" cx="21" cy="21" r="20"></circle><circle id="Oval" fill="#34D19D" cx="21" cy="21" r="16"></circle><g id="Group-6" filter="url(#filter-1)" transform="translate(11.500000, 14.000000)"><mask id="mask-3" fill="white"><use xlink:href="#path-2"></use></mask><use id="Rectangle-Copy-24" fill="#C4FFEB" transform="translate(4.917623, 10.064422) rotate(-45.000000) translate(-4.917623, -10.064422) " xlink:href="#path-2"></use><rect id="Rectangle" fill="url(#linearGradient-4)" mask="url(#mask-3)" transform="translate(6.215869, 11.372277) rotate(-45.000000) translate(-6.215869, -11.372277) " x="4.71586891" y="9.52269089" width="3" height="3.69917136"></rect><rect id="Rectangle" fill="#FFFFFF" transform="translate(11.636236, 7.232744) scale(1, -1) rotate(-45.000000) translate(-11.636236, -7.232744) " x="10.1362361" y="-1.02185365" width="3" height="16.5091951" rx="1.5"></rect></g></g></g></g></svg>'
return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 44 44" width="48" height="48"><circle cx="24" cy="26" r="22" fill="#000" opacity=".1"/><circle cx="24" cy="24" r="20" fill="#34D19D" opacity=".4"/><circle cx="24" cy="24" r="16" fill="#34D19D"/><path d="M19 24l4 4 8-8" stroke="#FFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>'
},
warning() {
return '<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>警告</title><desc>Created with Sketch.</desc> <defs> <filter x="-240.0%" y="-60.0%" width="580.0%" height="220.0%" filterUnits="objectBoundingBox" id="filter-1"><feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0.824756567 0 0 0 0 0.450356612 0 0 0 0 0.168550194 0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs><g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="反馈-轻提示" transform="translate(-580.000000, -538.000000)"> <g id="警告" transform="translate(580.000000, 538.000000)"><circle id="Oval" fill="#F0883A" opacity="0.400000006" cx="21" cy="21" r="20"></circle><circle id="Oval" fill="#F0883A" cx="21" cy="21" r="16"></circle><g id="Group-6" filter="url(#filter-1)" transform="translate(18.500000, 10.800000)"><rect id="Rectangle" fill="#FFFFFF" transform="translate(2.492935, 7.171583) scale(1, -1) rotate(-360.000000) translate(-2.492935, -7.171583) " x="0.992934699" y="0.955464537" width="3" height="12.4322365" rx="1.5"></rect><rect id="Rectangle-Copy-25" fill="#FFDEC5" transform="translate(2.508751, 17.202636) scale(1, -1) rotate(-360.000000) translate(-2.508751, -17.202636) " x="1.00875134" y="15.200563" width="3" height="4.00414639" rx="1.5"></rect></g></g></g></g></svg>'
return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 44 44" width="48" height="48"><circle cx="24" cy="26" r="22" fill="#000" opacity=".1"/><circle cx="24" cy="24" r="20" fill="#F0883A" opacity=".4"/><circle cx="24" cy="24" r="16" fill="#F0883A"/><rect x="22.5" y="14" width="3" height="12" fill="#FFF" rx="1.5"/><circle cx="24" cy="30" r="2" fill="#FFF"/></svg>'
},
info() {
return '<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>常规</title><desc>Created with Sketch.</desc><defs><filter x="-300.0%" y="-57.1%" width="700.0%" height="214.3%" filterUnits="objectBoundingBox" id="filter-1"><feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0.362700096 0 0 0 0 0.409035039 0 0 0 0 0.520238904 0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs><g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="反馈-轻提示" transform="translate(-772.000000, -538.000000)"><g id="常规" transform="translate(772.000000, 538.000000)"><circle id="Oval" fill="#909CB7" opacity="0.4" cx="21" cy="21" r="20"></circle><circle id="Oval" fill="#909CB7" cx="21" cy="21" r="16"></circle><g id="Group-6" filter="url(#filter-1)" transform="translate(18.500000, 9.800000)"><g id="编组-2" transform="translate(2.492935, 10.204709) rotate(-180.000000) translate(-2.492935, -10.204709) translate(0.992935, 0.204709)"><rect id="Rectangle" fill="#FFFFFF" transform="translate(1.500000, 7.000000) scale(1, -1) rotate(-360.000000) translate(-1.500000, -7.000000) " x="0" y="0" width="3" height="14" rx="1.5"></rect><rect id="Rectangle-Copy-25" fill="#EEEEEE" transform="translate(1.500000, 18.000000) scale(1, -1) rotate(-360.000000) translate(-1.500000, -18.000000) " x="0" y="16" width="3" height="4" rx="1.5"></rect></g></g></g></g></g></svg>'
return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 44 44" width="48" height="48"><circle cx="24" cy="26" r="22" fill="#000" opacity=".1"/><circle cx="24" cy="24" r="20" fill="#909CB7" opacity=".4"/><circle cx="24" cy="24" r="16" fill="#909CB7"/><circle cx="24" cy="18" r="2" fill="#FFF"/><rect x="22.5" y="22" width="3" height="12" fill="#FFF" rx="1.5"/></svg>'
},
error() {
return '<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>toast</title><desc>Created with Sketch.</desc><defs><linearGradient x1="99.6229896%" y1="50.3770104%" x2="0.377010363%" y2="50.3770104%" id="linearGradient-1"><stop stop-color="#FFDFDF" offset="0%"></stop><stop stop-color="#F9BEBE" offset="100%"></stop></linearGradient><linearGradient x1="0.377010363%" y1="50.3770104%" x2="99.6229896%" y2="50.3770104%" id="linearGradient-2"><stop stop-color="#FFDFDF" offset="0%"></stop><stop stop-color="#F9BEBE" offset="100%"></stop></linearGradient></defs><g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="反馈-轻提示" transform="translate(-196.000000, -538.000000)"> <g id="toast" transform="translate(196.000000, 538.000000)"><circle id="Oval" fill="#FA4350" opacity="0.400000006" cx="21" cy="21" r="20"></circle><circle id="Oval" fill="#FA4350" opacity="0.900000036" cx="21" cy="21" r="16"></circle><rect id="矩形" fill="#FFDFDF" transform="translate(21.071068, 21.071068) rotate(-225.000000) translate(-21.071068, -21.071068) " x="12.5710678" y="19.5710678" width="17" height="3" rx="1.5"></rect><rect id="矩形" fill="url(#linearGradient-1)" transform="translate(19.303301, 22.838835) rotate(-225.000000) translate(-19.303301, -22.838835) " x="17.3033009" y="21.3388348" width="4" height="3"></rect><rect id="矩形" fill="url(#linearGradient-2)" transform="translate(22.838835, 19.303301) rotate(-225.000000) translate(-22.838835, -19.303301) " x="20.8388348" y="17.8033009" width="4" height="3"></rect><rect id="矩形" fill="#FFFFFF" transform="translate(21.071068, 21.071068) rotate(-315.000000) translate(-21.071068, -21.071068) " x="12.5710678" y="19.5710678" width="17" height="3" rx="1.5"></rect></g></g></g></svg>'
return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 44 44" width="48" height="48"><circle cx="24" cy="26" r="22" fill="#000" opacity=".1"/><circle cx="24" cy="24" r="20" fill="#fa4350" opacity=".4"/><circle cx="24" cy="24" r="16" fill="#fa4350"/><path d="M18 18l12 12M30 18L18 30" stroke="#FFF" stroke-width="2.5" stroke-linecap="round"/></svg>'
}
}

View File

@ -1 +1 @@
{"id":"wot-design-uni","name":"wot-design-uni","displayName":"wot-design-uni 基于vue3+Typescript的高颜值组件库","version":"1.12.4","license":"MIT","description":"一个基于Vue3+TS开发的uni-app组件库提供70+高质量组件,支持暗黑模式、国际化和自定义主题。","keywords":["wot-design-uni","国际化","组件库","vue3","暗黑模式"],"main":"index.ts","repository":{"type":"git","url":"https://github.com/Moonofweisheng/wot-design-uni.git"},"engines":{"HBuilderX":"^3.8.7"},"dcloudext":{"type":"component-vue","sale":{"regular":{"price":"0.00"},"sourcecode":{"price":"0.00"}},"contact":{"qq":""},"declaration":{"ads":"无","data":"插件不采集任何数据","permissions":"无"},"npmurl":"https://www.npmjs.com/package/wot-design-uni"},"vetur":{"tags":"tags.json","attributes":"attributes.json"},"web-types":"web-types.json","uni_modules":{"dependencies":[],"encrypt":[],"platforms":{"cloud":{"tcb":"y","aliyun":"y","alipay":"n"},"client":{"Vue":{"vue2":"n","vue3":"y"},"App":{"app-vue":"y","app-nvue":"n","app-uvue":"n"},"H5-mobile":{"Safari":"y","Android Browser":"y","微信浏览器(Android)":"y","QQ浏览器(Android)":"y"},"H5-pc":{"Chrome":"y","IE":"u","Edge":"y","Firefox":"y","Safari":"y"},"小程序":{"微信":"y","阿里":"y","百度":"u","字节跳动":"u","QQ":"y","钉钉":"y","快手":"u","飞书":"u","京东":"u"},"快应用":{"华为":"u","联盟":"u"}}}},"peerDependencies":{"vue":">=3.2.47"}}
{"id":"wot-design-uni","name":"wot-design-uni","displayName":"wot-design-uni 基于vue3+Typescript的高颜值组件库","version":"1.13.0","license":"MIT","description":"一个基于Vue3+TS开发的uni-app组件库提供70+高质量组件,支持暗黑模式、国际化和自定义主题。","keywords":["wot-design-uni","国际化","组件库","vue3","暗黑模式"],"main":"index.ts","repository":{"type":"git","url":"https://github.com/Moonofweisheng/wot-design-uni.git"},"engines":{"HBuilderX":"^3.8.7"},"dcloudext":{"type":"component-vue","sale":{"regular":{"price":"0.00"},"sourcecode":{"price":"0.00"}},"contact":{"qq":""},"declaration":{"ads":"无","data":"插件不采集任何数据","permissions":"无"},"npmurl":"https://www.npmjs.com/package/wot-design-uni"},"vetur":{"tags":"tags.json","attributes":"attributes.json"},"web-types":"web-types.json","uni_modules":{"dependencies":[],"encrypt":[],"platforms":{"cloud":{"tcb":"y","aliyun":"y","alipay":"n"},"client":{"Vue":{"vue2":"n","vue3":"y"},"App":{"app-vue":"y","app-nvue":"n","app-uvue":"n"},"H5-mobile":{"Safari":"y","Android Browser":"y","微信浏览器(Android)":"y","QQ浏览器(Android)":"y"},"H5-pc":{"Chrome":"y","IE":"u","Edge":"y","Firefox":"y","Safari":"y"},"小程序":{"微信":"y","阿里":"y","百度":"u","字节跳动":"u","QQ":"y","钉钉":"y","快手":"u","飞书":"u","京东":"u"},"快应用":{"华为":"u","联盟":"u"}}}},"peerDependencies":{"vue":">=3.2.47"}}

View File

@ -84,15 +84,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 优秀开发资源汇总 |
| [create-uni](https://github.com/uni-helper/create-uni) | 快速创建 uni-app 项目 |
| [wot-starter](https://github.com/wot-ui/wot-starter) | 基于 [vitesse-uni-app](https://github.com/uni-helper/vitesse-uni-app) 的 wot-ui 快速起手项目 |
| [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-starter-retail](https://github.com/Moonofweisheng/wot-starter-retail) | 基于 wot-ui 的 uni-app 零售行业模板 |
| [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-router](https://github.com/Moonofweisheng/uni-mini-router) | 一个基于 vue3 和 Typescript 的轻量级 uni-app 路由库 |
| [unibest](https://github.com/unibest-tech/unibest) | 基于 wot-design-uni 的 uni-app 模板 |
| [wot-design-uni AI 助手](https://www.coze.cn/store/bot/7347916532258701363) | 一个能回答你关于 wot-design-uni 组件库问题的智能助手 |
| [unibest](https://github.com/unibest-tech/unibest) | 基于 wot-ui 的 uni-app 模板 |
| [wot-design-uni AI 助手](https://www.coze.cn/store/bot/7347916532258701363) | 一个能回答你关于 wot-ui 组件库问题的智能助手 |
| [uni-ku-root](https://github.com/uni-ku/root) | 一个模拟 App.vue 原有能力的根组件插件 |

View File

@ -302,9 +302,9 @@ describe('评分组件', () => {
await nextTick()
// 直接调用组件的 changeRate 方法,模拟点击第一个星星
// 直接调用组件的 handleClick 方法,模拟点击第一个星星
// 这比模拟触摸事件更可靠,因为触摸事件依赖于 DOM 元素的位置
await (wrapper.vm as any).changeRate(0, false)
await (wrapper.vm as any).handleClick(0, false)
// 验证事件
const emitted = wrapper.emitted() as Record<string, any[]>
@ -326,9 +326,9 @@ describe('评分组件', () => {
await nextTick()
// 直接调用组件的 changeRate 方法,模拟点击第一个半星
// 直接调用组件的 handleClick 方法,模拟点击第一个半星
// 这比模拟触摸事件更可靠,因为触摸事件依赖于 DOM 元素的位置
await (wrapper.vm as any).changeRate(0, true)
await (wrapper.vm as any).handleClick(0, true)
// 验证事件
const emitted = wrapper.emitted() as Record<string, any[]>
@ -413,4 +413,208 @@ describe('评分组件', () => {
expect(wrapper.attributes('style')).toBe(customStyle)
})
// 测试清空功能
describe('clearable 功能测试', () => {
// 测试基本清空功能
test('clearable 为 true 时,点击相同的最小值可以清空', async () => {
const wrapper = mount(WdRate, {
props: {
modelValue: 1,
clearable: true
}
})
await nextTick()
// 调用 handleClick 方法模拟点击第一个星星当前值为1最小值为1
await (wrapper.vm as any).handleClick(0, false)
// 验证清空事件
const emitted = wrapper.emitted() as Record<string, any[]>
expect(emitted['update:modelValue']).toBeTruthy()
expect(emitted['update:modelValue'][0][0]).toBe(0)
expect(emitted['change']).toBeTruthy()
expect(emitted['change'][0][0]).toEqual({ value: 0 })
})
test('clearable 为 false 时,点击相同值不会清空', async () => {
const wrapper = mount(WdRate, {
props: {
modelValue: 1,
clearable: false
}
})
await nextTick()
// 调用 handleClick 方法,模拟点击第一个星星
await (wrapper.vm as any).handleClick(0, false)
// 验证不会清空而是设置为1
const emitted = wrapper.emitted() as Record<string, any[]>
expect(emitted['update:modelValue']).toBeTruthy()
expect(emitted['update:modelValue'][0][0]).toBe(1)
expect(emitted['change']).toBeTruthy()
expect(emitted['change'][0][0]).toEqual({ value: 1 })
})
// 测试半星模式下的清空
test('clearable + allowHalf 组合下,点击 0.5 可以清空', async () => {
const wrapper = mount(WdRate, {
props: {
modelValue: 0.5,
clearable: true,
allowHalf: true
}
})
await nextTick()
// 调用 handleClick 方法模拟点击第一个半星当前值为0.5最小值为0.5
await (wrapper.vm as any).handleClick(0, true)
// 验证清空事件
const emitted = wrapper.emitted() as Record<string, any[]>
expect(emitted['update:modelValue']).toBeTruthy()
expect(emitted['update:modelValue'][0][0]).toBe(0)
expect(emitted['change']).toBeTruthy()
expect(emitted['change'][0][0]).toEqual({ value: 0 })
})
test('非最小值时点击不会清空', async () => {
const wrapper = mount(WdRate, {
props: {
modelValue: 2,
clearable: true
}
})
await nextTick()
// 调用 handleClick 方法模拟点击第一个星星当前值为2点击值为1不等于当前值
await (wrapper.vm as any).handleClick(0, false)
// 验证不会清空而是设置为1
const emitted = wrapper.emitted() as Record<string, any[]>
expect(emitted['update:modelValue']).toBeTruthy()
expect(emitted['update:modelValue'][0][0]).toBe(1)
expect(emitted['change']).toBeTruthy()
expect(emitted['change'][0][0]).toEqual({ value: 1 })
})
// 测试边界情况
test('当前值为 0 时点击不会触发清空', async () => {
const wrapper = mount(WdRate, {
props: {
modelValue: 0,
clearable: true
}
})
await nextTick()
// 调用 handleClick 方法,模拟点击第一个星星
await (wrapper.vm as any).handleClick(0, false)
// 验证设置为1而不是保持0
const emitted = wrapper.emitted() as Record<string, any[]>
expect(emitted['update:modelValue']).toBeTruthy()
expect(emitted['update:modelValue'][0][0]).toBe(1)
expect(emitted['change']).toBeTruthy()
expect(emitted['change'][0][0]).toEqual({ value: 1 })
})
test('点击非最小值时不会清空', async () => {
const wrapper = mount(WdRate, {
props: {
modelValue: 3,
clearable: true
}
})
await nextTick()
// 调用 handleClick 方法模拟点击第三个星星当前值为3点击值为3但不是最小值
await (wrapper.vm as any).handleClick(2, false)
// 验证不会清空而是保持为3
const emitted = wrapper.emitted() as Record<string, any[]>
expect(emitted['update:modelValue']).toBeTruthy()
expect(emitted['update:modelValue'][0][0]).toBe(3)
expect(emitted['change']).toBeTruthy()
expect(emitted['change'][0][0]).toEqual({ value: 3 })
})
// 测试与其他状态的组合
test('readonly + clearable 时不会清空', async () => {
const wrapper = mount(WdRate, {
props: {
modelValue: 1,
clearable: true,
readonly: true
}
})
await nextTick()
// 调用 handleClick 方法,模拟点击第一个星星
await (wrapper.vm as any).handleClick(0, false)
// 验证在只读状态下不会触发任何事件
const emitted = wrapper.emitted() as Record<string, any[]>
expect(emitted['update:modelValue']).toBeFalsy()
expect(emitted['change']).toBeFalsy()
})
test('disabled + clearable 时不会清空', async () => {
const wrapper = mount(WdRate, {
props: {
modelValue: 1,
clearable: true,
disabled: true
}
})
await nextTick()
// 调用 handleClick 方法,模拟点击第一个星星
await (wrapper.vm as any).handleClick(0, false)
// 验证在禁用状态下不会触发任何事件
const emitted = wrapper.emitted() as Record<string, any[]>
expect(emitted['update:modelValue']).toBeFalsy()
expect(emitted['change']).toBeFalsy()
})
// 测试半星模式下非最小值不会清空
test('半星模式下点击非最小值不会清空', async () => {
const wrapper = mount(WdRate, {
props: {
modelValue: 1.5,
clearable: true,
allowHalf: true
}
})
await nextTick()
// 调用 handleClick 方法模拟点击第二个半星当前值为1.5点击值为1.5但不是最小值0.5
await (wrapper.vm as any).handleClick(1, true)
// 验证不会清空而是保持为1.5
const emitted = wrapper.emitted() as Record<string, any[]>
expect(emitted['update:modelValue']).toBeTruthy()
expect(emitted['update:modelValue'][0][0]).toBe(1.5)
expect(emitted['change']).toBeTruthy()
expect(emitted['change'][0][0]).toEqual({ value: 1.5 })
})
})
})