mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 09:08:51 +08:00
Compare commits
34 Commits
35efdafeec
...
ec57b72224
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
ec57b72224 | ||
|
|
ae44bb4af1 | ||
|
|
5657aa68a8 | ||
|
|
c3c6eb1249 | ||
|
|
0e4cb76b27 | ||
|
|
a4d2550fef | ||
|
|
99581a30be | ||
|
|
b0bb46d3a7 | ||
|
|
8d84508165 | ||
|
|
8efad6d340 | ||
|
|
bea12e1813 | ||
|
|
00212b0e3e | ||
|
|
1a9c3e8f4d | ||
|
|
abc457147a | ||
|
|
c984cff247 | ||
|
|
73027c0cef | ||
|
|
9943011b4c | ||
|
|
84e4e2223f | ||
|
|
d06deda403 | ||
|
|
fc06faa5a6 | ||
|
|
552d4a7dd1 | ||
|
|
5515be118d | ||
|
|
99185310bc | ||
|
|
1333bdac4f | ||
|
|
41dd4177b6 | ||
|
|
046b135a14 | ||
|
|
7466c91c1a | ||
|
|
ed412b6726 | ||
|
|
9585db1150 | ||
|
|
5e186ea4b2 | ||
|
|
0dbdde9e23 | ||
|
|
1a9f626986 | ||
|
|
3ef9008d5b | ||
|
|
a90565510a |
43
CHANGELOG.md
43
CHANGELOG.md
@ -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)
|
||||
|
||||
|
||||
|
||||
13
README.md
13
README.md
@ -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 原有能力的根组件插件 |
|
||||
|
||||
## 贡献指南
|
||||
|
||||
16
README_en.md
16
README_en.md
@ -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.
|
||||
|
||||
@ -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/' },
|
||||
|
||||
@ -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/' },
|
||||
|
||||
@ -195,7 +195,7 @@ const expanded = ref(true)
|
||||
.content {
|
||||
order: 1;
|
||||
margin: 0;
|
||||
min-width: 640px;
|
||||
min-width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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 | - | - | - |
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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年 | - |
|
||||
|
||||
@ -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 | - | 完成 | - |
|
||||
|
||||
@ -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
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
## 基本使用
|
||||
|
||||
通过 `height` 属性设置标题 `background` 属性设置背景色。
|
||||
通过 `height` 属性设置高度 `background` 属性设置背景色。
|
||||
|
||||
|
||||
```html
|
||||
|
||||
@ -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 | - | - | - |
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -2,6 +2,10 @@
|
||||
|
||||
弹出对话框,常用于消息提示、消息确认等,支持函数调用。
|
||||
|
||||
:::tip 提示
|
||||
全局调用方案见 [wot-starter](https://starter.wot-ui.cn/guide/feedback.html),支持在路由导航守卫和网络请求拦截器等场景使用的可全局调用的反馈组件。
|
||||
:::
|
||||
|
||||
## Alert 弹框
|
||||
|
||||
alert 弹框只有确定按钮,用于强提醒。
|
||||
|
||||
@ -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 | - | - | - |
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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 |
|
||||
|
||||
|
||||
## 外部样式类
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
|
||||
## 脱敏
|
||||
|
||||
设置 `format` 属性,当 `mode` 为 ` phone``name `时生效。
|
||||
设置 `format` 属性,当 `mode` 为 `phone`或`name`时生效。
|
||||
|
||||
```html
|
||||
<wd-text text="李四" mode="name" :format="true"></wd-text>
|
||||
|
||||
@ -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),支持在路由导航守卫和网络请求拦截器等场景使用的可全局调用的反馈组件。
|
||||
:::
|
||||
|
||||
## 基本用法
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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 | - |
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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 | - |
|
||||
|
||||
@ -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 | - | - |
|
||||
|
||||
|
||||
@ -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 |
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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 | - | - | - |
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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 |
|
||||
@ -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.
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
|
||||
@ -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.
|
||||
@ -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 |
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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),支持在路由导航守卫和网络请求拦截器等场景使用的可全局调用的反馈组件。
|
||||
|
||||
|
||||
## 如何快速解决你的问题?
|
||||
|
||||
@ -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 路由库 |
|
||||
|
||||
@ -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
505
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -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",
|
||||
|
||||
@ -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日",
|
||||
|
||||
@ -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)))
|
||||
}
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
|
||||
@ -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)
|
||||
}
|
||||
|
||||
|
||||
@ -20,6 +20,7 @@ export type ButtonOpenType =
|
||||
| 'getUserInfo'
|
||||
| 'contact'
|
||||
| 'getPhoneNumber'
|
||||
| 'getRealtimePhoneNumber'
|
||||
| 'launchApp'
|
||||
| 'openSetting'
|
||||
| 'chooseAvatar'
|
||||
|
||||
@ -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)
|
||||
}
|
||||
|
||||
@ -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,
|
||||
/**
|
||||
* 描述信息
|
||||
*/
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -21,6 +21,10 @@ export const datetimePickerViewProps = {
|
||||
* picker内部滚筒高
|
||||
*/
|
||||
columnsHeight: makeNumberProp(217),
|
||||
/**
|
||||
* picker item的高度
|
||||
*/
|
||||
itemHeight: makeNumberProp(35),
|
||||
/**
|
||||
* 选项的key
|
||||
*/
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
v-model="pickerValue"
|
||||
:columns="columns"
|
||||
:columns-height="columnsHeight"
|
||||
:item-height="itemHeight"
|
||||
:columnChange="columnChange"
|
||||
:loading="loading"
|
||||
:loading-color="loadingColor"
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -72,6 +72,10 @@ export const dorpMenuItemProps = {
|
||||
* 自定义下拉菜单popup样式
|
||||
*/
|
||||
customPopupStyle: makeStringProp(''),
|
||||
/**
|
||||
* 弹出层高度 这里设置了 就取这里的
|
||||
*/
|
||||
popupHeight: makeStringProp(''),
|
||||
/**
|
||||
* 是否从页面中脱离出来,用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
|
||||
*/
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* #ifdef APP-PLUS */
|
||||
/* #ifdef APP-PLUS || H5 */
|
||||
@font-face {
|
||||
font-family: 'wd-icons';
|
||||
src:
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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)
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -30,6 +30,10 @@ export const pickerViewProps = {
|
||||
* picker内部滚筒高
|
||||
*/
|
||||
columnsHeight: makeNumberProp(217),
|
||||
/**
|
||||
* picker item的高度
|
||||
*/
|
||||
itemHeight: makeNumberProp(35),
|
||||
/**
|
||||
* 选项对象中,value对应的 key
|
||||
*/
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -92,5 +92,12 @@ export const rateProps = {
|
||||
* 类型: boolean
|
||||
* 默认值: false
|
||||
*/
|
||||
allowHalf: makeBooleanProp(false)
|
||||
allowHalf: makeBooleanProp(false),
|
||||
|
||||
/**
|
||||
* 当 clearable 属性设置为 true,再次点击相同的值时,可以将值重置为 0。
|
||||
* 类型: boolean
|
||||
* 默认值: false
|
||||
*/
|
||||
clearable: makeBooleanProp(false)
|
||||
}
|
||||
|
||||
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 })
|
||||
}
|
||||
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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> = {
|
||||
|
||||
@ -154,6 +154,7 @@
|
||||
}
|
||||
|
||||
@include e(value) {
|
||||
white-space: normal;
|
||||
@include when(ellipsis) {
|
||||
word-break: break-all;
|
||||
@include multiEllipsis(2);
|
||||
|
||||
@ -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>'
|
||||
}
|
||||
}
|
||||
|
||||
@ -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"}}
|
||||
@ -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 原有能力的根组件插件 |
|
||||
|
||||
|
||||
|
||||
@ -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 })
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user