admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 17:18:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1 from Moonofweisheng/develop

Browse Source 
优化组件的易用性
This commit is contained in:
weisheng 2023-08-23 13:08:08 +08:00 committed by GitHub
commit b809bd5e27
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
70 changed files with 878 additions and 731 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
README.md
View File

@ -6,44 +6,56 @@
<p align="center">📱 一个参照<a href="https://ftf.jd.com/wot-design/">Wot-design</a>，基于 Vue3 打造的uni-app组件库</p> <p align="center">📱 一个参照<a href="https://ftf.jd.com/wot-design/">Wot-design</a>，基于 Vue3 打造的uni-app组件库</p>
<p align="center"> <p align="center">
<a href="https://app.netlify.com/sites/wot-design-uni/deploys" target="_blank" referrerpolicy="no-referrer">
<img src="https://api.netlify.com/api/v1/badges/0991d8a9-0fb0-483b-8961-5bde066bbd50/deploy-status" alt="deploy-status" /> <a href="https://github.com/Moonofweisheng/wot-design-uni">
</a> <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/Moonofweisheng/wot-design-uni?logo=github&color=%234d80f0&link=https%3A%2F%2Fgithub.com%2FMoonofweisheng%2Fwot-design-uni">
</a>
<a href="https://www.npmjs.com/package/wot-design-uni">
<img alt="npm" src="https://img.shields.io/npm/v/wot-design-uni?logo=npm&color=%234d80f0&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fwot-design-uni">
</a>
<a href="https://www.npmjs.com/package/wot-design-uni">
<img alt="npm" src="https://img.shields.io/npm/dw/wot-design-uni?logo=npm&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fwot-design-uni">
</a>
<a href="https://www.npmjs.com/package/wot-design-uni">
<img src="https://img.shields.io/npm/dt/wot-design-uni?style=flat-square">
</a>
<a href="https://github.com/Moonofweisheng/wot-design-uni">
<img alt="GitHub" src="https://img.shields.io/github/license/Moonofweisheng/wot-design-uni?logo=github">
</a>
<a href="https://app.netlify.com/sites/wot-design-uni/deploys" target="_blank" referrerpolicy="no-referrer">
<img src="https://api.netlify.com/api/v1/badges/0991d8a9-0fb0-483b-8961-5bde066bbd50/deploy-status" alt="deploy-status" />
</a>
</p> </p>
<p align="center"> <p align="center">
🔥 <a href="https://wot-design-uni.netlify.app/">文档网站 (Netlify)</a> 🔥 <a href="https://wot-design-uni.netlify.app/">文档网站 (Netlify)</a>
</p> </p>
## ✨ 特性 ## ✨ 特性
- 🚀 支持 APP、H5、微信小程序、支付宝小程序、钉钉小程序 等平台. - 🚀 支持 APP、H5、微信小程序 等平台.
- 🚀 50+ 个高质量组件，覆盖移动端主流场景. - 🚀 50+ 个高质量组件，覆盖移动端主流场景.
- 💪 使用 Typescript 构建，提供良好的组件类型系统. - 💪 使用 Typescript 构建，提供良好的组件类型系统.
- 💪 采用 Vue3 最新特性，提升组件性能. - 💪 采用 Vue3 最新特性，提升组件性能.
- 📖 提供丰富的文档和组件示例. - 📖 提供丰富的文档和组件示例.
- 🎨 支持主题定制，可以定制scss变量以及组件的样式自定义. - 🎨 支持主题定制，可以定制 scss 变量以及组件的样式自定义.
- 🍭 支持暗黑模式 - 🍭 支持暗黑模式
## 📱 预览 ## 📱 预览
手机扫描上的二维码访问演示： 扫描二维码访问演示：
<p> <p>
<img src="https://wot-design-uni.netlify.app/wx.jpg" width="200" height="200" style="margin-right:30px"/> <img src="https://wot-design-uni.netlify.app/wx.jpg" width="200" height="200" style="margin-right:30px"/>
<img src="https://wot-design-uni.netlify.app/alipay.png" width="200" height="200" /> <img src="https://wot-design-uni.netlify.app/alipay.png" width="200" height="200" />
</p> </p>
## 安装
```bash
yarn add wot-design-uni
```
## 快速上手 ## 快速上手
详细说明见 [快速上手](https://wot-design-uni.netlify.app/guide/quickUse.html) 详细说明见 [快速上手](https://wot-design-uni.netlify.app/guide/quickUse.html)
@ -51,5 +63,3 @@ yarn add wot-design-uni
## LICENSE ## LICENSE
[MIT](https://github.com/Moonofweisheng/wot-design-uni/blob/develop/LICENSE) [MIT](https://github.com/Moonofweisheng/wot-design-uni/blob/develop/LICENSE)

474
docs/.vitepress/config.ts
View File

@ -1,7 +1,7 @@
/* /*
* @Author: weisheng * @Author: weisheng
* @Date: 2023-07-27 10:26:09 * @Date: 2023-07-27 10:26:09
* @LastEditTime: 2023-08-01 17:31:40 * @LastEditTime: 2023-08-22 19:02:54
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: \wot-design-uni\docs\.vitepress\config.ts * @FilePath: \wot-design-uni\docs\.vitepress\config.ts
@ -26,8 +26,8 @@ export default defineConfig({
], ],
themeConfig: { themeConfig: {
logo: '/wot-design.png', logo: '/wot-design.png',
lastUpdated:{ lastUpdated: {
text:'最后更新' text: '最后更新'
}, },
editLink: { editLink: {
pattern: 'https://github.com/Moonofweisheng/wot-design-uni/edit/master/docs/:path', pattern: 'https://github.com/Moonofweisheng/wot-design-uni/edit/master/docs/:path',
@ -35,6 +35,7 @@ export default defineConfig({
}, },
socialLinks: [ socialLinks: [
{ icon: 'github', link: 'https://github.com/Moonofweisheng/wot-design-uni' }, { icon: 'github', link: 'https://github.com/Moonofweisheng/wot-design-uni' },
{ icon: { svg: '<svg t="1692699544299" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4184" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#6D6D72" p-id="4185"></path></svg>' }, link: "https://gitee.com/fant-mini/wot-design-uni", ariaLabel: 'Gitee' }
], ],
search: { search: {
provider: 'algolia', provider: 'algolia',
@ -45,33 +46,13 @@ export default defineConfig({
}, },
}, },
// carbonAds: {
// code: 'CEBIEK3N',
// placement: 'vitejsdev',
// },
footer: { footer: {
message: `Released under the MIT License.`, message: `Released under the MIT License.`,
copyright: 'Copyright © 2023-present weisheng', copyright: 'Copyright © 2023-present weisheng',
}, },
nav: [ nav: [
{ text: '指南', link: '/guide/quickUse', activeMatch: '/guide/' },
{ text: '组件', link: '/component/button', activeMatch: '/component/' },
{ text: '捐赠作者', link: '/reward/reward', activeMatch: '/reward/' },
{ {
text: '相关链接', text: '指南', activeMatch: '/guide/', items: [
items: [
{ text: 'uni-mini-router', link: 'https://gitee.com/fant-mini/uni-mini-router' },
{ text: 'uni-mini-ci', link: 'https://gitee.com/fant-mini/uni-mini-ci' },
{ text: 'fant-mini-plus', link: 'https://fant-mini-plus.top/fant-mini-plus/' },
{ text:'wot-design', link:'https://ftf.jd.com/wot-design/' },
{ text:'wot-design-mini', link:'https://ftf.jd.com/wot-design-mini/' }
],
},
],
sidebar:{
'/guide/': [
{ {
text: '介绍', text: '介绍',
link: '/guide/introduction', link: '/guide/introduction',
@ -96,198 +77,261 @@ export default defineConfig({
text: '常见问题', text: '常见问题',
link: '/guide/commonProblems', link: '/guide/commonProblems',
} }
],
'/reward/': [
{
text: '捐赠作者',
link: '/reward/reward',
},
{
text: '榜上有名',
link: '/reward/donor',
},
],
'/component/': [
{
text: '基础',
items: [
{
link: "/component/button",
text: "Button 按钮"
}, {
link: "/component/icon",
text: "Icon 图标"
}, {
link: "/component/layout",
text: "Layout 布局"
}, {
link: "/component/configProvider",
text: "ConfigProvider 全局配置"
},{
link: "/component/popup",
text: "Popup 弹出层"
}, {
link: "/component/resize",
text: "Resize 监听元素尺寸变化"
}, {
link: "/component/transition",
text: "Transition 动画"
}
]
},
{
text: "导航",
items: [{
link: "/component/pagination",
text: "Pagination 分页"
}, {
link: "/component/popover",
text: "Popover 气泡"
}, {
link: "/component/tabs",
text: "Tabs 标签页"
}]
}, {
text: "数据输入",
items: [{
link: "/component/calendar",
text: "Calendar 日历选择器"
}, {
link: "/component/calendarView",
text: "CalendarView 日历面板"
}, {
link: "/component/checkbox",
text: "Checkbox 复选框"
}, {
link: "/component/colPicker",
text: "ColPicker 多列选择器"
}, {
link: "/component/datetimePicker",
text: "DatetimePicker 时间选择器"
}, {
link: "/component/datetimePickerView",
text: "DatetimePickerView 时间选择器视图"
}, {
link: "/component/form",
text: "Form 表单组合"
}, {
link: "/component/input",
text: "Input 输入框"
}, {
link: "/component/inputNumber",
text: "InputNumber 计数器"
}, {
link: "/component/picker",
text: "Picker 选择器"
}, {
link: "/component/pickerView",
text: "PickerView 选择器视图"
}, {
link: "/component/radio",
text: "Radio 单选框"
}, {
link: "/component/rate",
text: "Rate 评分"
}, {
link: "/component/search",
text: "Search 搜索框"
}, {
link: "/component/selectPicker",
text: "SelectPicker 单复选选择器"
}, {
link: "/component/slider",
text: "Slider 滑块"
}, {
link: "/component/switch",
text: "Switch 开关"
}, {
link: "/component/upload",
text: "Upload 上传"
}]
}, {
text: "反馈",
items: [{
link: "/component/actionSheet",
text: "ActionSheet 动作面板"
}, {
link: "/component/dropMenu",
text: "DropMenu 下拉菜单"
}, {
link: "/component/loading",
text: "Loading 加载"
}, {
link: "/component/messageBox",
text: "MessageBox 弹框"
}, {
link: "/component/noticeBar",
text: "NoticeBar 通知栏"
}, {
link: "/component/progress",
text: "Progress 进度条"
}, {
link: "/component/sortButton",
text: "SortButton 排序按钮"
}, {
link: "/component/statusTip",
text: "StatusTip 缺省提示"
}, {
link: "/component/swipeAction",
text: "SwipeAction 滑动操作"
}, {
link: "/component/toast",
text: "Toast 轻提示"
}, {
link: "/component/tooltip",
text: "Tooltip 文字提示"
}]
}, {
text: "数据展示",
items: [{
link: "/component/badge",
text: "Badge 角标"
}, {
link: "/component/card",
text: "Card 卡片"
}, {
link: "/component/cell",
text: "Cell 单元格"
}, {
link: "/component/collapse",
text: "Collapse 折叠面板"
}, {
link: "/component/curtain",
text: "Curtain 幕帘"
}, {
link: "/component/divider",
text: "Divider 分割线"
}, {
link: "/component/img",
text: "Img 图片"
}, {
link: "/component/imgCropper",
text: "ImgCropper 图片裁剪"
}, {
link: "/component/grid",
text: "Grid 宫格"
}, {
link: "/component/loadmore",
text: "Loadmore 加载更多"
}, {
link: "/component/steps",
text: "Steps 步骤条"
}, {
link: "/component/sticky",
text: "Sticky 粘性布局"
}, {
link: "/component/tag",
text: "Tag 标签"
}]
}
] ]
},
{
text: '组件', activeMatch: '/component/', items: [
{
text: '基础组件',
link: "/component/button",
},
{
text: "导航组件",
link: "/component/pagination"
}, {
text: "数据输入",
link: "/component/calendar",
}, {
text: "反馈组件",
link: "/component/actionSheet",
}, {
text: "数据展示",
link: "/component/badge",
}
]
},
{ text: '捐赠作者', link: '/reward/reward', activeMatch: '/reward/' },
{
text: '相关链接',
items: [
{ text: 'uni-mini-router', link: 'https://gitee.com/fant-mini/uni-mini-router' },
{ text: 'uni-mini-ci', link: 'https://gitee.com/fant-mini/uni-mini-ci' },
{ text: 'fant-mini-plus', link: 'https://fant-mini-plus.top/fant-mini-plus/' },
{ text: 'wot-design', link: 'https://ftf.jd.com/wot-design/' },
{ text: 'wot-design-mini', link: 'https://ftf.jd.com/wot-design-mini/' }
],
},
],
sidebar: {
'/guide/': [
{
text: '介绍',
link: '/guide/introduction',
},
{
text: '快速上手',
link: '/guide/quickUse',
},
{
text: '定制主题',
link: '/guide/customTheme',
},
{
text: '字体',
link: '/guide/typography',
},
{
text: '更新日志',
link: '/guide/changelog',
},
{
text: '常见问题',
link: '/guide/commonProblems',
}
],
'/reward/': [
{
text: '捐赠作者',
link: '/reward/reward',
},
{
text: '榜上有名',
link: '/reward/donor',
},
],
'/component/': [
{
text: '基础',
items: [
{
link: "/component/button",
text: "Button 按钮"
}, {
link: "/component/icon",
text: "Icon 图标"
}, {
link: "/component/layout",
text: "Layout 布局"
}, {
link: "/component/configProvider",
text: "ConfigProvider 全局配置"
}, {
link: "/component/popup",
text: "Popup 弹出层"
}, {
link: "/component/resize",
text: "Resize 监听元素尺寸变化"
}, {
link: "/component/transition",
text: "Transition 动画"
}
]
},
{
text: "导航",
items: [{
link: "/component/pagination",
text: "Pagination 分页"
}, {
link: "/component/popover",
text: "Popover 气泡"
}, {
link: "/component/tabs",
text: "Tabs 标签页"
}]
}, {
text: "数据输入",
items: [{
link: "/component/calendar",
text: "Calendar 日历选择器"
}, {
link: "/component/calendarView",
text: "CalendarView 日历面板"
}, {
link: "/component/checkbox",
text: "Checkbox 复选框"
}, {
link: "/component/colPicker",
text: "ColPicker 多列选择器"
}, {
link: "/component/datetimePicker",
text: "DatetimePicker 时间选择器"
}, {
link: "/component/datetimePickerView",
text: "DatetimePickerView 时间选择器视图"
}, {
link: "/component/form",
text: "Form 表单组合"
}, {
link: "/component/input",
text: "Input 输入框"
}, {
link: "/component/inputNumber",
text: "InputNumber 计数器"
}, {
link: "/component/picker",
text: "Picker 选择器"
}, {
link: "/component/pickerView",
text: "PickerView 选择器视图"
}, {
link: "/component/radio",
text: "Radio 单选框"
}, {
link: "/component/rate",
text: "Rate 评分"
}, {
link: "/component/search",
text: "Search 搜索框"
}, {
link: "/component/selectPicker",
text: "SelectPicker 单复选选择器"
}, {
link: "/component/slider",
text: "Slider 滑块"
}, {
link: "/component/switch",
text: "Switch 开关"
}, {
link: "/component/upload",
text: "Upload 上传"
}]
}, {
text: "反馈",
items: [{
link: "/component/actionSheet",
text: "ActionSheet 动作面板"
}, {
link: "/component/dropMenu",
text: "DropMenu 下拉菜单"
}, {
link: "/component/loading",
text: "Loading 加载"
}, {
link: "/component/messageBox",
text: "MessageBox 弹框"
}, {
link: "/component/noticeBar",
text: "NoticeBar 通知栏"
}, {
link: "/component/progress",
text: "Progress 进度条"
}, {
link: "/component/sortButton",
text: "SortButton 排序按钮"
}, {
link: "/component/statusTip",
text: "StatusTip 缺省提示"
}, {
link: "/component/swipeAction",
text: "SwipeAction 滑动操作"
}, {
link: "/component/toast",
text: "Toast 轻提示"
}, {
link: "/component/tooltip",
text: "Tooltip 文字提示"
}]
}, {
text: "数据展示",
items: [{
link: "/component/badge",
text: "Badge 角标"
}, {
link: "/component/card",
text: "Card 卡片"
}, {
link: "/component/cell",
text: "Cell 单元格"
}, {
link: "/component/collapse",
text: "Collapse 折叠面板"
}, {
link: "/component/curtain",
text: "Curtain 幕帘"
}, {
link: "/component/divider",
text: "Divider 分割线"
}, {
link: "/component/img",
text: "Img 图片"
}, {
link: "/component/imgCropper",
text: "ImgCropper 图片裁剪"
}, {
link: "/component/grid",
text: "Grid 宫格"
}, {
link: "/component/loadmore",
text: "Loadmore 加载更多"
}, {
link: "/component/steps",
text: "Steps 步骤条"
}, {
link: "/component/sticky",
text: "Sticky 粘性布局"
}, {
link: "/component/tag",
text: "Tag 标签"
}]
}
]
} }
}, },

14
docs/guide/introduction.md
View File

@ -1,6 +1,6 @@
# 介绍 # 介绍
该组件库基于`uni-app`+`vue3`构建，根据`wot desing mini`的设计规范进行开发，旨在给开发者提供统一的UI交互，同时提高研发的开发效率。 `wot-design-uni`组件库基于`vue3`+`Typescript`构建，参照`wot desing`的设计规范进行开发，旨在给开发者提供统一的UI交互，同时提高研发的开发效率。
## 快速上手 ## 快速上手
@ -18,11 +18,15 @@
<div style="text-align: center;">支付宝扫码</div> <div style="text-align: center;">支付宝扫码</div>
</div> </div>
## 特性 ## ✨ 特性
* 50+ 组件 - 🚀 支持 APP、H5、微信小程序 等平台.
* Vue3 + TypeScript 开发 - 🚀 50+ 个高质量组件，覆盖移动端主流场景.
* 支持 APP、H5、微信小程序、支付宝小程序、钉钉小程序 等平台 - 💪 使用 Typescript 构建，提供良好的组件类型系统.
- 💪 采用 Vue3 最新特性，提升组件性能.
- 📖 提供丰富的文档和组件示例.
- 🎨 支持主题定制，可以定制scss变量以及组件的样式自定义.
- 🍭 支持暗黑模式
> 使用Vue3最新特性开发，持续优化体验 > 使用Vue3最新特性开发，持续优化体验

79
docs/guide/quickUse.md
View File

@ -1,12 +1,18 @@
# 快速上手 # 快速上手
本节介绍如何在`uni-app`项目中使用 `Wot Design Uni` 本节介绍如何在`uni-app`项目中安装、配置并使用 `Wot Design Uni`。
## 安装 :::warning 关于安装
`Wot Design Uni`提供了`uni_modules`和`npm`两种安装方式，按需选择。
- 使用`uni_modules`安装无需额外配置，即插即用，但是每次更新组件库需要处理代码差异（一般直接覆盖就可以）。
- 使用`npm`安装需要配置`easycom`，更新组件库时无需处理代码差异。
:::
`Wot Design Uni` 支持 uni_modules 规范，已经上架到 uni-app 的插件市场，故我们推荐使用 uni_modules 的方式引入，方便更新。 ## uni_modules 安装
在`uni-app插件市场`选择使用`HBuildX`导入，或者选择手动在src目录下创建uni_modules文件夹并将Wot Design Uni解压到uni_modules中，结构如下: `Wot Design Uni` 支持 [uni_modules](https://uniapp.dcloud.net.cn/plugin/uni_modules.html#uni-modules) 规范，已经上架到 uni-app 的插件市场，故我们推荐使用 uni_modules 的方式引入，方便更新。
在`uni-app插件市场`选择使用`HBuildX`导入，或者选择手动在src目录下创建uni_modules文件夹并将`Wot Design Uni`解压到uni_modules中，结构如下:
``` ```
- uni_modules - uni_modules
- - - wot-design-uni - - - wot-design-uni
@ -15,8 +21,71 @@
下载地址：<a href="https://ext.dcloud.net.cn/plugin?id=13889"><span >wot-design-uni</span></a> 下载地址：<a href="https://ext.dcloud.net.cn/plugin?id=13889"><span >wot-design-uni</span></a>
## npm 安装
::: code-group
```bash [npm]
npm i wot-design-uni
```
```bash [yarn]
yarn add wot-design-uni
```
```bash [pnpm]
pnpm add wot-design-uni
```
:::
### 配置easycom
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。`easycom`将其精简为一步。
只要组件路径符合规范（具体见[easycom](https://uniapp.dcloud.net.cn/collocation/pages.html#easycom)），就可以不用引用、注册，直接在页面中使用。
:::tip 温馨提醒
- uni-app 考虑到编译速度，直接在`pages.json`内修改`easycom`不会触发重新编译，需要改动页面内容触发。
- 请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。
:::
```JSON
// pages.json
{
"easycom": {
"autoscan": true,
"custom": {
"^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue"
}
},
// 此为本身已有的内容
"pages": [
// ......
]
}
```
## Volar 支持
如果您使用 `Volar`，请在 `tsconfig.json` 中通过 `compilerOptions.type` 指定全局组件类型。
:::tip
cli项目使用`uni_modules`安装无需配置，对`Volar`的支持自动生效，`HbuildX`项目不支持此配置，故此步骤仅在`cli`项目使用`npm`安装时需要配置。
:::
```json
// tsconfig.json
{
"compilerOptions": {
"types": ["wot-design-uni/global.d.ts"]
}
}
```
## 使用 ## 使用
`Wot Design Uni`的组件支持easycom规范，故可以直接在.vue中使用，无需在页面内import，也不需要在components内声明，即可在任意页面使用。值得注意的是，uni-app平台不支持全局挂载组件，所以```Message```、```Toast```等组件仍需在SFC中显式使用，例如: `Wot Design Uni`安装完成之后，支持easycom规范，故可以直接在SFC中使用，无需在页面内import，也不需要在components内声明，即可在任意页面使用。值得注意的是，`uni-app`平台不支持全局挂载组件，所以```Message```、```Toast```等组件仍需在SFC中显式使用，例如:
``` html ``` html
<wd-toast></wd-toast> <wd-toast></wd-toast>
``` ```
:::tip 温馨提醒
使用uni_modules 安装时`Wot Design Uni`的组件天然支持`easycom`规范，无需额外配置，而使用npm安装需要自行配置`easycom`。
:::

2
docs/index.md
View File

@ -25,7 +25,7 @@ hero:
features: features:
- icon: 🚀 - icon: 🚀
title: 多平台覆盖 title: 多平台覆盖
details: 支持 APP、H5、微信小程序、支付宝小程序、钉钉小程序 等平台。 details: 支持 APP、H5、微信小程序 等平台。
- icon: 🚀 - icon: 🚀
title: 50+ 组件 title: 50+ 组件
details: 超过50个高质量组件，覆盖移动端主流场景。 details: 超过50个高质量组件，覆盖移动端主流场景。

1
index.html
View File

@ -22,7 +22,6 @@
<title></title> <title></title>
<!--preload-links--> <!--preload-links-->
<!--app-context--> <!--app-context-->
<script src="https://cdn.jsdelivr.net/npm/@vant/touch-emulator"></script>
</head> </head>
<body> <body>
<div id="app"><!--app-html--></div> <div id="app"><!--app-html--></div>

1
package.json
View File

@ -82,6 +82,7 @@
"@typescript-eslint/eslint-plugin": "^5.55.0", "@typescript-eslint/eslint-plugin": "^5.55.0",
"@typescript-eslint/parser": "^5.55.0", "@typescript-eslint/parser": "^5.55.0",
"@vant/area-data": "^1.4.1", "@vant/area-data": "^1.4.1",
"@vant/touch-emulator": "^1.4.0",
"@vue/tsconfig": "^0.1.3", "@vue/tsconfig": "^0.1.3",
"eslint": "^8.36.0", "eslint": "^8.36.0",
"eslint-config-prettier": "^8.7.0", "eslint-config-prettier": "^8.7.0",

12
src/components/demo-block/demo-block.vue
View File

@ -29,16 +29,18 @@ import { ref, watch } from 'vue'
interface Props { interface Props {
customClass?: string customClass?: string
title: string title?: string
ver: number ver?: number
hor: number hor?: number
transparent: boolean transparent?: boolean
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
title: '',
customClass: '', customClass: '',
ver: 10, ver: 10,
hor: 15 hor: 15,
transparent: false
}) })
const style = ref<string>('') const style = ref<string>('')

8
src/main.ts
View File

@ -1,7 +1,7 @@
/* /*
* @Author: weisheng * @Author: weisheng
* @Date: 2023-03-09 19:23:03 * @Date: 2023-03-09 19:23:03
* @LastEditTime: 2023-06-10 23:01:56 * @LastEditTime: 2023-08-22 23:02:46
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: \wot-design-uni\src\main.ts * @FilePath: \wot-design-uni\src\main.ts
@ -9,9 +9,13 @@
*/ */
import { createSSRApp } from 'vue' import { createSSRApp } from 'vue'
import App from './App.vue' import App from './App.vue'
// #ifdef H5
import '@vant/touch-emulator'
// #endif
export function createApp() { export function createApp() {
const app = createSSRApp(App) const app = createSSRApp(App)
app.config.warnHandler = () => null // app.config.warnHandler = () => null
return { return {
app app
} }

3
src/pages/messageBox/Index.vue
View File

@ -1,7 +1,6 @@
<template> <template>
<page-wraper> <page-wraper>
<wd-message-box></wd-message-box> <wd-message-box></wd-message-box>
<wd-toast></wd-toast>
<wd-message-box selector="wd-message-box-slot" use-slot> <wd-message-box selector="wd-message-box-slot" use-slot>
<wd-rate custom-class="custom-rate-class" v-model="value" /> <wd-rate custom-class="custom-rate-class" v-model="value" />
</wd-message-box> </wd-message-box>
@ -31,7 +30,7 @@
</page-wraper> </page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useMessage } from '@/uni_modules/wot-design-uni/components/wd-message-box' import { useMessage } from '@/uni_modules/wot-design-uni'
import { ref } from 'vue' import { ref } from 'vue'
const value = ref<number>(1) const value = ref<number>(1)
const value1 = ref<string>('') const value1 = ref<string>('')

4
src/pages/search/Index.vue
View File

@ -44,7 +44,9 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'
import { clickOut } from '@/uni_modules/wot-design-uni' import { clickOut, useToast } from '@/uni_modules/wot-design-uni'
const toast = useToast()
function clickoutside() { function clickoutside() {
clickOut.closeOutside() clickOut.closeOutside()

4
src/uni_modules/wot-design-uni/components/mixins/useCell.ts
View File

@ -2,8 +2,8 @@ import { getCurrentInstance, inject, nextTick, onBeforeMount, onMounted, ref, wa
export function useCell() { export function useCell() {
const border = ref<boolean>(false) // 是否展示边框 const border = ref<boolean>(false) // 是否展示边框
const cellGroup: any = inject('cell-group') || {} const cellGroup: any = inject('cell-group', null) || {}
const cellList: any = inject('cell-list') || ref<any[]>([]) const cellList: any = inject('cell-list', null) || ref<any[]>([])
const { proxy } = getCurrentInstance() as any const { proxy } = getCurrentInstance() as any
watch( watch(

16
src/uni_modules/wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue
View File

@ -94,16 +94,16 @@ interface Props {
customClass?: string customClass?: string
customHeaderClass?: string customHeaderClass?: string
show: boolean show: boolean
actions: Array<Action> actions?: Array<Action>
panels: Array<Panel> panels?: Array<Panel>
title?: string title?: string
cancelText?: string cancelText?: string
closeOnClickAction: boolean closeOnClickAction?: boolean
closeOnClickModal: boolean closeOnClickModal?: boolean
duration: number duration?: number
zIndex: number zIndex?: number
lazyRender: boolean lazyRender?: boolean
safeAreaInsetBottom: boolean safeAreaInsetBottom?: boolean
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

6
src/uni_modules/wot-design-uni/components/wd-badge/wd-badge.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: weisheng * @Author: weisheng
* @Date: 2023-06-12 18:40:59 * @Date: 2023-06-12 18:40:59
* @LastEditTime: 2023-08-15 15:47:51 * @LastEditTime: 2023-08-22 23:23:37
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-badge\wd-badge.vue * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-badge\wd-badge.vue
@ -33,7 +33,7 @@ export default {
import { computed, ref, watch } from 'vue' import { computed, ref, watch } from 'vue'
type BadgeType = 'primary' | 'success' | 'warning' | 'danger' | 'info' type BadgeType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
interface Props { interface Props {
modelValue: number | string | null modelValue?: number | string | null
bgColor?: string bgColor?: string
max?: number max?: number
isDot?: boolean isDot?: boolean
@ -41,7 +41,7 @@ interface Props {
type?: BadgeType type?: BadgeType
top?: number top?: number
right?: number right?: number
customClass: string customClass?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
customClass: '', customClass: '',

20
src/uni_modules/wot-design-uni/components/wd-button/wd-button.vue
View File

@ -71,15 +71,15 @@ type ButtonType = 'primary' | 'success' | 'info' | 'warning' | 'error' | 'defaul
type ButtonSize = 'small' | 'medium' | 'large' type ButtonSize = 'small' | 'medium' | 'large'
interface Props { interface Props {
plain: boolean plain?: boolean
disabled: boolean disabled?: boolean
round: boolean round?: boolean
suck: boolean suck?: boolean
block: boolean block?: boolean
type: ButtonType type?: ButtonType
size: ButtonSize size?: ButtonSize
icon?: string icon?: string
loading: boolean loading?: boolean
loadingColor?: string loadingColor?: string
openType?: string openType?: string
formType?: string formType?: string
@ -91,8 +91,8 @@ interface Props {
sendMessageImg?: string sendMessageImg?: string
appParameter?: string appParameter?: string
showMessageCard?: boolean showMessageCard?: boolean
customClass: string customClass?: string
customStyle: string customStyle?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
type: 'primary', type: 'primary',

38
src/uni_modules/wot-design-uni/components/wd-calendar-view/month/month.vue
View File

@ -1,22 +1,24 @@
<template> <template>
<wd-toast selector="wd-month" /> <view>
<view class="month" :data-date="date"> <wd-toast selector="wd-month" />
<view class="wd-month"> <view class="month">
<view class="wd-month__title">{{ monthTitle(date) }}</view> <view class="wd-month">
<view class="wd-month__days"> <view class="wd-month__title">{{ monthTitle(date) }}</view>
<view <view class="wd-month__days">
v-for="(item, index) in days" <view
:key="index" v-for="(item, index) in days"
:class="`wd-month__day ${item.disabled ? 'is-disabled' : ''} ${item.type ? itemClass(item.type, value, type) : ''}`" :key="index"
:style="firstDayStyle(index, item.date, firstDayOfWeek)" :class="`wd-month__day ${item.disabled ? 'is-disabled' : ''} ${item.type ? itemClass(item.type, value, type) : ''}`"
@click="handleDateClick(index)" :style="firstDayStyle(index, item.date, firstDayOfWeek)"
> @click="handleDateClick(index)"
<view class="wd-month__day-container"> >
<view class="wd-month__day-top">{{ item.topInfo }}</view> <view class="wd-month__day-container">
<view class="wd-month__day-text"> <view class="wd-month__day-top">{{ item.topInfo }}</view>
{{ item.text }} <view class="wd-month__day-text">
{{ item.text }}
</view>
<view class="wd-month__day-bottom">{{ item.bottomInfo }}</view>
</view> </view>
<view class="wd-month__day-bottom">{{ item.bottomInfo }}</view>
</view> </view>
</view> </view>
</view> </view>
@ -61,7 +63,7 @@ interface Props {
formatter?: Function formatter?: Function
maxRange?: number maxRange?: number
rangePrompt?: string rangePrompt?: string
allowSameDay: boolean allowSameDay?: boolean
defaultTime: Array<number> defaultTime: Array<number>
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

6
src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue
View File

@ -78,13 +78,13 @@ interface Props {
formatter?: Function formatter?: Function
maxRange?: number maxRange?: number
rangePrompt?: string rangePrompt?: string
allowSameDay: boolean allowSameDay?: boolean
showPanelTitle: boolean showPanelTitle?: boolean
defaultTime: Array<number> defaultTime: Array<number>
panelHeight: number panelHeight: number
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
timeFilter?: Function timeFilter?: Function
hideSecond: boolean hideSecond?: boolean
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
allowSameDay: false, allowSameDay: false,

18
src/uni_modules/wot-design-uni/components/wd-calendar-view/wd-calendar-view.vue
View File

@ -63,13 +63,13 @@ interface Props {
// 选中值，为 13 位时间戳或时间戳数组 // 选中值，为 13 位时间戳或时间戳数组
modelValue: number | Array<number> | null modelValue: number | Array<number> | null
// 日期类型 // 日期类型
type: CalendarType type?: CalendarType
// 最小日期，为 13 位时间戳 // 最小日期，为 13 位时间戳
minDate: number minDate?: number
// 最大日期，为 13 位时间戳 // 最大日期，为 13 位时间戳
maxDate: number maxDate?: number
// 周起始天 // 周起始天
firstDayOfWeek: number firstDayOfWeek?: number
// 日期格式化函数 // 日期格式化函数
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
formatter?: Function formatter?: Function
@ -78,18 +78,18 @@ interface Props {
// type 为范围选择时有效，选择超出最大日期范围时的错误提示文案 // type 为范围选择时有效，选择超出最大日期范围时的错误提示文案
rangePrompt?: string rangePrompt?: string
// type 为范围选择时有效，是否允许选择同一天 // type 为范围选择时有效，是否允许选择同一天
allowSameDay: boolean allowSameDay?: boolean
// 是否展示面板标题，自动计算当前滚动的日期月份 // 是否展示面板标题，自动计算当前滚动的日期月份
showPanelTitle: boolean showPanelTitle?: boolean
// 选中日期所使用的当日内具体时刻 // 选中日期所使用的当日内具体时刻
defaultTime: string | Array<string> defaultTime?: string | Array<string>
// 可滚动面板的高度 // 可滚动面板的高度
panelHeight: number panelHeight?: number
// type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据 // type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
timeFilter?: Function timeFilter?: Function
// type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改 // type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改
hideSecond: boolean hideSecond?: boolean
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
customClass: '', customClass: '',

2
src/uni_modules/wot-design-uni/components/wd-calendar-view/year/year.vue
View File

@ -43,7 +43,7 @@ interface Props {
formatter?: Function formatter?: Function
maxRange?: number maxRange?: number
rangePrompt?: string rangePrompt?: string
allowSameDay: boolean allowSameDay?: boolean
defaultTime: Array<number> defaultTime: Array<number>
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

9
src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue
View File

@ -48,8 +48,8 @@ interface Props {
formatter?: Function formatter?: Function
maxRange?: number maxRange?: number
rangePrompt?: string rangePrompt?: string
allowSameDay: boolean allowSameDay?: boolean
showPanelTitle: boolean showPanelTitle?: boolean
defaultTime: Array<number> defaultTime: Array<number>
panelHeight: number panelHeight: number
} }
@ -61,11 +61,6 @@ const props = withDefaults(defineProps<Props>(), {
const title = ref<string>('') const title = ref<string>('')
const scrollTop = ref<number>(0) // 滚动位置 const scrollTop = ref<number>(0) // 滚动位置
const scrollIntoViewValue = ref<string>('')
let contentObserver: null | UniApp.IntersectionObserver = null
const instance = getCurrentInstance() as any
// 滚动区域的高度 // 滚动区域的高度
const scrollHeight = computed(() => { const scrollHeight = computed(() => {
const scrollHeight: number = (props.panelHeight || 378) + (props.showPanelTitle ? 26 : 16) const scrollHeight: number = (props.panelHeight || 378) + (props.showPanelTitle ? 26 : 16)

4
src/uni_modules/wot-design-uni/components/wd-cell-group/wd-cell-group.vue
View File

@ -45,8 +45,8 @@ interface Props {
customClass?: string customClass?: string
title?: string title?: string
value?: string value?: string
useSlot: boolean useSlot?: boolean
border: boolean border?: boolean
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
useSlot: false, useSlot: false,

13
src/uni_modules/wot-design-uni/components/wd-cell/wd-cell.vue
View File

@ -64,15 +64,15 @@ interface Props {
value?: string value?: string
icon?: string icon?: string
label?: string label?: string
isLink: boolean isLink?: boolean
to?: string to?: string
replace: boolean replace?: boolean
clickable: boolean clickable?: boolean
size?: string size?: string
titleWidth?: string titleWidth?: string
center: boolean center?: boolean
required: boolean required?: boolean
vertical: boolean vertical?: boolean
customClass?: string customClass?: string
customIconClass?: string customIconClass?: string
customLabelClass?: string customLabelClass?: string
@ -81,6 +81,7 @@ interface Props {
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
customClass: '',
customIconClass: '', customIconClass: '',
customLabelClass: '', customLabelClass: '',
customValueClass: '', customValueClass: '',

14
src/uni_modules/wot-design-uni/components/wd-checkbox-group/wd-checkbox-group.vue
View File

@ -22,13 +22,13 @@ type checkShape = 'circle' | 'square' | 'button'
interface Props { interface Props {
customClass?: string customClass?: string
modelValue: Array<string | number | boolean> modelValue: Array<string | number | boolean>
cell: boolean cell?: boolean
shape: checkShape shape?: checkShape
checkedColor: string checkedColor?: string
disabled: boolean disabled?: boolean
min: number min?: number
max: number max?: number
inline: boolean inline?: boolean
size?: string size?: string
name?: string name?: string
} }

10
src/uni_modules/wot-design-uni/components/wd-checkbox/wd-checkbox.vue
View File

@ -50,11 +50,11 @@ interface Props {
customShapeClass?: string customShapeClass?: string
customClass?: string customClass?: string
modelValue: string | number | boolean modelValue: string | number | boolean
shape: checkShape shape?: checkShape
checkedColor?: string checkedColor?: string
disabled: boolean | null disabled?: boolean | null
trueValue: string | number | boolean trueValue?: string | number | boolean
falseValue: string | number | boolean falseValue?: string | number | boolean
size?: string size?: string
maxWidth?: string maxWidth?: string
} }
@ -75,7 +75,7 @@ const inited = ref<boolean>(false)
// 相同组件的伪类选择器无效，这里配合类名手动模拟 last-child、first-child // 相同组件的伪类选择器无效，这里配合类名手动模拟 last-child、first-child
const isFirst = ref<boolean>(false) const isFirst = ref<boolean>(false)
const isLast = ref<boolean>(false) const isLast = ref<boolean>(false)
const parent = inject<any>('checkGroup') const parent = inject<any>('checkGroup', null)
const { proxy } = getCurrentInstance() as any const { proxy } = getCurrentInstance() as any
watch( watch(

36
src/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue
View File

@ -104,12 +104,12 @@ interface Props {
modelValue: Array<Record<string, any>> modelValue: Array<Record<string, any>>
columns: Array<Array<Record<string, any>>> columns: Array<Array<Record<string, any>>>
label?: string label?: string
labelWidth: string labelWidth?: string
useLabelSlot: boolean useLabelSlot?: boolean
useDefaultSlot: boolean useDefaultSlot?: boolean
disabled: boolean disabled?: boolean
readonly: boolean readonly?: boolean
placeholder: string placeholder?: string
title?: string title?: string
// 接收当前列的选中项 item、当前列下标、当前列选中项下标下一列数据处理函数 resolve、结束选择 finish // 接收当前列的选中项 item、当前列下标、当前列选中项下标下一列数据处理函数 resolve、结束选择 finish
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
@ -119,19 +119,19 @@ interface Props {
displayFormat?: Function displayFormat?: Function
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
beforeConfirm?: Function beforeConfirm?: Function
alignRight: boolean alignRight?: boolean
error: boolean error?: boolean
required: boolean required?: boolean
size?: string size?: string
valueKey: string valueKey?: string
labelKey: string labelKey?: string
tipKey: string tipKey?: string
loadingColor: string loadingColor?: string
closeOnClickModal: boolean closeOnClickModal?: boolean
autoComplete: boolean autoComplete?: boolean
zIndex: number zIndex?: number
safeAreaInsetBottom: boolean safeAreaInsetBottom?: boolean
ellipsis: boolean ellipsis?: boolean
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

5
src/uni_modules/wot-design-uni/components/wd-col/wd-col.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: weisheng * @Author: weisheng
* @Date: 2023-06-13 11:34:35 * @Date: 2023-06-13 11:34:35
* @LastEditTime: 2023-08-15 13:06:34 * @LastEditTime: 2023-08-22 22:26:37
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-col\wd-col.vue * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-col\wd-col.vue
@ -35,7 +35,8 @@ interface Props {
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
span: 24, span: 24,
offset: 0 offset: 0,
customClass: ''
}) })
const style = ref<string>('') const style = ref<string>('')

4
src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: weisheng * @Author: weisheng
* @Date: 2023-08-01 11:12:05 * @Date: 2023-08-01 11:12:05
* @LastEditTime: 2023-08-15 16:30:17 * @LastEditTime: 2023-08-22 22:28:28
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-collapse-item\wd-collapse-item.vue * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-collapse-item\wd-collapse-item.vue
@ -41,7 +41,7 @@ const $body = '.wd-collapse-item__body'
interface Props { interface Props {
customClass?: string customClass?: string
title?: string title?: string
disabled: boolean disabled?: boolean
name: string name: string
// 打开前的回调函数，返回 false 可以阻止打开，支持返回 Promise // 打开前的回调函数，返回 false 可以阻止打开，支持返回 Promise
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types

10
src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: weisheng * @Author: weisheng
* @Date: 2023-08-01 11:12:05 * @Date: 2023-08-01 11:12:05
* @LastEditTime: 2023-08-04 13:34:15 * @LastEditTime: 2023-08-22 22:28:17
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-collapse\wd-collapse.vue * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-collapse\wd-collapse.vue
@ -58,10 +58,10 @@ interface Props {
customClass?: string customClass?: string
customMoreSlotClass?: string customMoreSlotClass?: string
modelValue: string | Array<string> | boolean modelValue: string | Array<string> | boolean
accordion: boolean accordion?: boolean
viewmore: boolean viewmore?: boolean
useMoreSlot: boolean useMoreSlot?: boolean
lineNum: number lineNum?: number
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

4
src/uni_modules/wot-design-uni/components/wd-config-provider/wd-config-provider.vue
View File

@ -28,8 +28,8 @@ export default {
import { computed } from 'vue' import { computed } from 'vue'
type ConfigProviderTheme = 'light' | 'dark' type ConfigProviderTheme = 'light' | 'dark'
interface Props { interface Props {
theme: ConfigProviderTheme theme?: ConfigProviderTheme
themeVars: Record<string, any> themeVars?: Record<string, any>
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

20
src/uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue
View File

@ -6,14 +6,13 @@
position="center" position="center"
:close-on-click-modal="closeOnClickModal" :close-on-click-modal="closeOnClickModal"
:hide-when-close="hideWhenClose" :hide-when-close="hideWhenClose"
@beforeenter="beforeenter" @before-enter="beforeenter"
@enter="enter" @enter="enter"
@afterenter="afterenter" @after-enter="afterenter"
@beforeleave="beforeleave" @before-leave="beforeleave"
@leave="leave" @leave="leave"
@afterleave="afterleave" @after-leave="afterleave"
@close="close" @close="close"
@closed="closed"
@clickmodal="clickModal" @clickmodal="clickModal"
:custom-class="`wd-curtain ${customClass}`" :custom-class="`wd-curtain ${customClass}`"
> >
@ -42,12 +41,12 @@ type ClosePosition = 'inset' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bo
interface Props { interface Props {
customClass?: string customClass?: string
value: boolean value: boolean
closePosition: ClosePosition closePosition?: ClosePosition
src?: string src?: string
to?: string to?: string
width?: number width?: number
closeOnClickModal: boolean closeOnClickModal?: boolean
hideWhenClose: boolean hideWhenClose?: boolean
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
@ -139,6 +138,7 @@ function leave() {
function afterleave() { function afterleave() {
emit('afterleave') emit('afterleave')
emit('closed')
} }
function close() { function close() {
@ -146,10 +146,6 @@ function close() {
emit('close') emit('close')
} }
function closed() {
emit('closed')
}
function clickModal() { function clickModal() {
emit('clickmodal') emit('clickmodal')
} }

26
src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/wd-datetime-picker-view.vue
View File

@ -63,17 +63,17 @@ interface Props {
modelValue: string | number | Date modelValue: string | number | Date
// PickerView的Props 开始 // PickerView的Props 开始
// 加载中 // 加载中
loading: boolean loading?: boolean
loadingColor: string loadingColor?: string
// 选项总高度 // 选项总高度
columnsHeight: number columnsHeight?: number
// 选项对象中，value对应的 key // 选项对象中，value对应的 key
valueKey: string valueKey?: string
// 选项对象中，展示的文本对应的 key // 选项对象中，展示的文本对应的 key
labelKey: string labelKey?: string
// PickerView的Props 结束 // PickerView的Props 结束
// 时间选择器的类型 // 时间选择器的类型
type: DateTimeType type?: DateTimeType
// 自定义过滤选项的函数，返回列的选项数组 // 自定义过滤选项的函数，返回列的选项数组
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
filter?: Function filter?: Function
@ -84,18 +84,18 @@ interface Props {
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
columnFormatter?: Function columnFormatter?: Function
// 最小日期 20(x-10)年1月1日 // 最小日期 20(x-10)年1月1日
minDate: number minDate?: number
// 最大日期 20(x+10)年1月1日 // 最大日期 20(x+10)年1月1日
maxDate: number maxDate?: number
// 最小小时 // 最小小时
minHour: number minHour?: number
// 最大小时 // 最大小时
maxHour: number maxHour?: number
// 最小分钟 // 最小分钟
minMinute: number minMinute?: number
// 最大分钟 // 最大分钟
maxMinute: number maxMinute?: number
startSymbol: boolean startSymbol?: boolean
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

62
src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue
View File

@ -138,60 +138,60 @@ import { deepClone, getType, isArray, isDef, isEqual, padZero } from '../common/
import { useCell } from '../mixins/useCell' import { useCell } from '../mixins/useCell'
import { DateTimeType, getPickerValue } from '../wd-datetime-picker-view/type' import { DateTimeType, getPickerValue } from '../wd-datetime-picker-view/type'
interface Props { interface Props {
customClass: string customClass?: string
customViewClass: string customViewClass?: string
customLabelClass: string customLabelClass?: string
customValueClass: string customValueClass?: string
// 选择器左侧文案 // 选择器左侧文案
label?: string label?: string
// 选择器占位符 // 选择器占位符
placeholder: string placeholder?: string
// 禁用 // 禁用
disabled: boolean disabled?: boolean
// 只读 // 只读
readonly: boolean readonly?: boolean
loading: boolean loading?: boolean
loadingColor: string loadingColor?: string
/* popup */ /* popup */
// 弹出层标题 // 弹出层标题
title?: string title?: string
// 取消按钮文案 // 取消按钮文案
cancelButtonText: string cancelButtonText?: string
// 确认按钮文案 // 确认按钮文案
confirmButtonText: string confirmButtonText?: string
// 是否必填 // 是否必填
required: boolean required?: boolean
size?: string size?: string
labelWidth: string labelWidth?: string
useDefaultSlot: boolean useDefaultSlot?: boolean
useLabelSlot: boolean useLabelSlot?: boolean
error: boolean error?: boolean
alignRight: boolean alignRight?: boolean
closeOnClickModal: boolean closeOnClickModal?: boolean
safeAreaInsetBottom: boolean safeAreaInsetBottom?: boolean
ellipsis: boolean ellipsis?: boolean
// 选项总高度 // 选项总高度
columnsHeight: number columnsHeight?: number
// 选项对象中，value对应的 key // 选项对象中，value对应的 key
valueKey: string valueKey?: string
// 选项对象中，展示的文本对应的 key // 选项对象中，展示的文本对应的 key
labelKey: string labelKey?: string
// 选中项，当 type 为 time 时，类型为字符串，否则为 时间戳 // 选中项，当 type 为 time 时，类型为字符串，否则为 时间戳
modelValue: string | number | Date | Array<string | number | Date> modelValue: string | number | Date | Array<string | number | Date>
// 时间选择器的类型 // 时间选择器的类型
type: DateTimeType type?: DateTimeType
// 最小日期 20(x-10)年1月1日 // 最小日期 20(x-10)年1月1日
minDate: number minDate?: number
// 最大日期 20(x+10)年1月1日 // 最大日期 20(x+10)年1月1日
maxDate: number maxDate?: number
// 最小小时 // 最小小时
minHour: number minHour?: number
// 最大小时 // 最大小时
maxHour: number maxHour?: number
// 最小分钟 // 最小分钟
minMinute: number minMinute?: number
// 最大分钟 // 最大分钟
maxMinute: number maxMinute?: number
// 自定义过滤选项的函数，返回列的选项数组 // 自定义过滤选项的函数，返回列的选项数组
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
filter?: Function filter?: Function
@ -208,7 +208,7 @@ interface Props {
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
displayFormatTabLabel?: Function displayFormatTabLabel?: Function
defaultValue?: string | number | Date | Array<string | number | Date> defaultValue?: string | number | Date | Array<string | number | Date>
zIndex: number zIndex?: number
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

2
src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue
View File

@ -21,7 +21,7 @@ export default {
<script lang="ts" setup> <script lang="ts" setup>
interface Props { interface Props {
customClass?: string customClass?: string
color: string color?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

14
src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue
View File

@ -61,14 +61,14 @@ interface Props {
// 当前选中的value // 当前选中的value
modelValue?: string | number modelValue?: string | number
// 可能是 array || String // 可能是 array || String
options: Array<Record<string, any>> options?: Array<Record<string, any>>
useDropItemSlot: boolean useDropItemSlot?: boolean
disabled: boolean disabled?: boolean
iconName: string iconName?: string
title?: string title?: string
valueKey: string valueKey?: string
labelKey: string labelKey?: string
tipKey: string tipKey?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

14
src/uni_modules/wot-design-uni/components/wd-drop-menu/wd-drop-menu.vue
View File

@ -34,13 +34,13 @@ import { getRect } from '../common/util'
type DropDirction = 'up' | 'down' type DropDirction = 'up' | 'down'
interface Props { interface Props {
customClass: string customClass?: string
customStyle: string customStyle?: string
zIndex: number zIndex?: number
direction: DropDirction direction?: DropDirction
modal: boolean modal?: boolean
closeOnClickModal: boolean closeOnClickModal?: boolean
duration: number duration?: number
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

14
src/uni_modules/wot-design-uni/components/wd-grid-item/wd-grid-item.vue
View File

@ -37,16 +37,16 @@ interface Props {
customText?: string customText?: string
customIcon?: string customIcon?: string
customClass?: string customClass?: string
icon: string icon?: string
iconSize: string iconSize?: string
text?: string text?: string
url?: string url?: string
linkType: LinkType linkType?: LinkType
useSlot: boolean useSlot?: boolean
useIconSlot: boolean useIconSlot?: boolean
useTextSlot: boolean useTextSlot?: boolean
// badge属性 // badge属性
isDot: boolean isDot?: boolean
type?: BadgeType type?: BadgeType
value?: number value?: number
max?: number max?: number

8
src/uni_modules/wot-design-uni/components/wd-grid/wd-grid.vue
View File

@ -22,11 +22,11 @@ const nextTick = () => new Promise((resolve) => setTimeout(resolve, 20))
interface Props { interface Props {
customClass?: string customClass?: string
clickable: boolean clickable?: boolean
square: boolean square?: boolean
column?: number column?: number
border: boolean border?: boolean
bgColor: string bgColor?: string
gutter?: number gutter?: number
} }

22
src/uni_modules/wot-design-uni/components/wd-img-cropper/wd-img-cropper.vue
View File

@ -96,26 +96,26 @@ const TOP_PERCENT = 0.85
interface Props { interface Props {
customClass?: string customClass?: string
modelValue: boolean modelValue: boolean
cancelButtonText: string cancelButtonText?: string
confirmButtonText: string confirmButtonText?: string
// 是否禁用旋转 // 是否禁用旋转
disabledRotate: boolean disabledRotate?: boolean
/** canvas绘图参数 start **/ /** canvas绘图参数 start **/
// canvasToTempFilePath —— fileType // canvasToTempFilePath —— fileType
fileType: string fileType?: string
// canvasToTempFilePath —— quality // canvasToTempFilePath —— quality
quality: number quality?: number
// 设置导出图片尺寸 // 设置导出图片尺寸
exportScale: number exportScale?: number
/** canvas绘图参数 end **/ /** canvas绘图参数 end **/
// 图片源路径 // 图片源路径
imgSrc: string imgSrc?: string
// 图片宽 // 图片宽
imgWidth: string | number imgWidth?: string | number
// 图片高 // 图片高
imgHeight: string | number imgHeight?: string | number
// 最大缩放 // 最大缩放
maxScale: number maxScale?: number
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
@ -646,7 +646,7 @@ defineExpose({
}) })
</script> </script>
<!-- #ifdef MP-WEIXIN || MP-QQ --> <!-- #ifdef MP-WEIXIN || MP-QQ || H5 -->
<script module="animation" lang="wxs"> <script module="animation" lang="wxs">
function setAnimation(newValue, oldValue, ownerInstance){ function setAnimation(newValue, oldValue, ownerInstance){

8
src/uni_modules/wot-design-uni/components/wd-img/wd-img.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: weisheng * @Author: weisheng
* @Date: 2023-06-12 10:04:19 * @Date: 2023-06-12 10:04:19
* @LastEditTime: 2023-08-15 13:11:35 * @LastEditTime: 2023-08-22 22:37:02
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-img\wd-img.vue * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-img\wd-img.vue
@ -32,9 +32,9 @@ interface Props {
customStyle?: string customStyle?: string
customImage?: string customImage?: string
src: string src: string
round: boolean round?: boolean
mode: string mode?: string
lazyLoad: boolean lazyLoad?: boolean
width?: string | number width?: string | number
height?: string | number height?: string | number
} }

22
src/uni_modules/wot-design-uni/components/wd-input-number/wd-input-number.vue
View File

@ -41,17 +41,17 @@ import { debounce, getType } from '../common/util'
interface Props { interface Props {
customClass?: string customClass?: string
modelValue: number | string modelValue: number | string
min: number min?: number
max: number max?: number
step: number step?: number
stepStrictly: boolean stepStrictly?: boolean
precision: number precision?: number
disabled: boolean disabled?: boolean
withoutInput: boolean withoutInput?: boolean
inputWidth: string | number inputWidth?: string | number
allowNull: boolean allowNull?: boolean
placeholder: string placeholder?: string
name: string name?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

76
src/uni_modules/wot-design-uni/components/wd-input/wd-input.vue
View File

@ -141,55 +141,55 @@ import { objToStyle, requestAnimationFrame } from '../common/util'
import { useCell } from '../mixins/useCell' import { useCell } from '../mixins/useCell'
interface Props { interface Props {
customTextareaContainerClass: string customTextareaContainerClass?: string
customTextareaClass: string customTextareaClass?: string
customInputClass: string customInputClass?: string
customLabelClass: string customLabelClass?: string
customClass: string customClass?: string
customStyle: string customStyle?: string
// 原生属性 // 原生属性
placeholder: string placeholder?: string
placeholderStyle?: string placeholderStyle?: string
placeholderClass: string placeholderClass?: string
autoHeight: boolean autoHeight?: boolean
fixed: boolean fixed?: boolean
cursorSpacing: number cursorSpacing?: number
cursor: number cursor?: number
showConfirmBar: boolean showConfirmBar?: boolean
selectionStart: number selectionStart?: number
selectionEnd: number selectionEnd?: number
adjustPosition: boolean adjustPosition?: boolean
holdKeyboard: boolean holdKeyboard?: boolean
confirmType: string confirmType?: string
confirmHold: boolean confirmHold?: boolean
focus: boolean focus?: boolean
type: string type?: string
maxlength: number maxlength?: number
disabled: boolean disabled?: boolean
alignRight: boolean alignRight?: boolean
// 原生属性结束 // 原生属性结束
modelValue: string | number modelValue: string | number
minlength?: number minlength?: number
showPassword: boolean showPassword?: boolean
clearable: boolean clearable?: boolean
showClear: boolean showClear?: boolean
readonly: boolean readonly?: boolean
useSuffixSlot: boolean useSuffixSlot?: boolean
usePrefixSlot: boolean usePrefixSlot?: boolean
prefixIcon?: string prefixIcon?: string
suffixIcon?: string suffixIcon?: string
showWordLimit: boolean showWordLimit?: boolean
showWordCount: boolean showWordCount?: boolean
suffix?: string suffix?: string
suffixCount?: number suffixCount?: number
label?: string label?: string
labelWidth: string labelWidth?: string
useLabelSlot: boolean useLabelSlot?: boolean
size?: string size?: string
error: boolean error?: boolean
center: boolean center?: boolean
noBorder: boolean noBorder?: boolean
required: boolean required?: boolean
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

7
src/uni_modules/wot-design-uni/components/wd-modal/wd-modal.vue
View File

@ -23,15 +23,16 @@ export default {
<script lang="ts" setup> <script lang="ts" setup>
interface Props { interface Props {
show: boolean show: boolean
duration: Record<string, number> | number | boolean duration?: Record<string, number> | number | boolean
zIndex: number zIndex?: number
customStyle?: string customStyle?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
show: false, show: false,
duration: 300, duration: 300,
zIndex: 10 zIndex: 10,
customStyle: ''
}) })
const emit = defineEmits(['click']) const emit = defineEmits(['click'])

12
src/uni_modules/wot-design-uni/components/wd-notice-bar/wd-notice-bar.vue
View File

@ -36,12 +36,12 @@ type NoticeBarType = 'warning' | 'info' | 'danger' | ''
interface Props { interface Props {
customClass?: string customClass?: string
text?: string text?: string
type: NoticeBarType type?: NoticeBarType
scrollable: boolean scrollable?: boolean
delay: number delay?: number
speed: number speed?: number
closable: boolean closable?: boolean
wrapable: boolean wrapable?: boolean
prefix?: string prefix?: string
color?: string color?: string
backgroundColor?: string backgroundColor?: string

16
src/uni_modules/wot-design-uni/components/wd-pagination/wd-pagination.vue
View File

@ -57,14 +57,14 @@ import { ref, watch } from 'vue'
interface Props { interface Props {
customClass?: string customClass?: string
modelValue: number // 当前页 modelValue: number // 当前页
totalPage: number totalPage?: number
showIcon: boolean // 是否展示分页为Icon图标 showIcon?: boolean // 是否展示分页为Icon图标
showMessage: boolean showMessage?: boolean
total: number total?: number
pageSize: number pageSize?: number
prevText: string prevText?: string
nextText: string nextText?: string
hideIfOnePage: boolean hideIfOnePage?: boolean
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

10
src/uni_modules/wot-design-uni/components/wd-picker-view/wd-picker-view.vue
View File

@ -49,14 +49,14 @@ import { ColumnItem, formatArray } from './type'
interface Props { interface Props {
customClass?: string customClass?: string
// 加载中 // 加载中
loading: boolean loading?: boolean
loadingColor: string loadingColor?: string
// 选项总高度 // 选项总高度
columnsHeight: number columnsHeight?: number
// 选项对象中，value对应的 key // 选项对象中，value对应的 key
valueKey: string valueKey?: string
// 选项对象中，展示的文本对应的 key // 选项对象中，展示的文本对应的 key
labelKey: string labelKey?: string
// 初始值 // 初始值
modelValue: string | number | boolean | Array<string | number | boolean> modelValue: string | number | boolean | Array<string | number | boolean>
// 选择器数据 // 选择器数据

44
src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue
View File

@ -91,44 +91,44 @@ interface Props {
// 选择器左侧文案 // 选择器左侧文案
label?: string label?: string
// 选择器占位符 // 选择器占位符
placeholder: string placeholder?: string
// 禁用 // 禁用
disabled: boolean disabled?: boolean
// 只读 // 只读
readonly: boolean readonly?: boolean
loading: boolean loading?: boolean
loadingColor: string loadingColor?: string
/* popup */ /* popup */
// 弹出层标题 // 弹出层标题
title?: string title?: string
// 取消按钮文案 // 取消按钮文案
cancelButtonText: string cancelButtonText?: string
// 确认按钮文案 // 确认按钮文案
confirmButtonText: string confirmButtonText?: string
// 是否必填 // 是否必填
required: boolean required?: boolean
size?: string size?: string
labelWidth?: string labelWidth?: string
useDefaultSlot: boolean useDefaultSlot?: boolean
useLabelSlot: boolean useLabelSlot?: boolean
error: boolean error?: boolean
alignRight: boolean alignRight?: boolean
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
beforeConfirm?: Function beforeConfirm?: Function
closeOnClickModal: boolean closeOnClickModal?: boolean
safeAreaInsetBottom: boolean safeAreaInsetBottom?: boolean
ellipsis: boolean ellipsis?: boolean
// 选项总高度 // 选项总高度
columnsHeight: number columnsHeight?: number
// 选项对象中，value对应的 key // 选项对象中，value对应的 key
valueKey: string valueKey?: string
// 选项对象中，展示的文本对应的 key // 选项对象中，展示的文本对应的 key
labelKey: string labelKey?: string
// 初始值 // 初始值
modelValue: string | number | Array<string | number> modelValue?: string | number | Array<string | number>
// 选择器数据 // 选择器数据
columns: Array<string | number | ColumnItem | Array<string | number | ColumnItem>> columns?: Array<string | number | ColumnItem | Array<string | number | ColumnItem>>
// 多级联动 // 多级联动
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
columnChange?: Function columnChange?: Function
@ -136,13 +136,15 @@ interface Props {
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
displayFormat?: Function displayFormat?: Function
// 自定义层级 // 自定义层级
zIndex: number zIndex?: number
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
modelValue: '', modelValue: '',
customClass: '', customClass: '',
customViewClass: '', customViewClass: '',
customLabelClass: '',
customValueClass: '',
// 选择器占位符 // 选择器占位符
placeholder: '请选择', placeholder: '请选择',
// 禁用 // 禁用

14
src/uni_modules/wot-design-uni/components/wd-popover/wd-popover.vue
View File

@ -88,16 +88,16 @@ interface Props {
customPop?: string customPop?: string
customClass?: string customClass?: string
// 是否显示 popover 箭头 // 是否显示 popover 箭头
visibleArrow: boolean visibleArrow?: boolean
// 显示内容 // 显示内容
content: string | Record<string, any>[] content: string | Record<string, any>[]
placement: PlacementType placement?: PlacementType
offset: number offset?: number
useContentSlot: boolean useContentSlot?: boolean
disabled: boolean disabled?: boolean
showClose: boolean showClose?: boolean
modelValue: boolean modelValue: boolean
mode: PopoverMode mode?: PopoverMode
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
customClass: '', customClass: '',

24
src/uni_modules/wot-design-uni/components/wd-popup/wd-popup.vue
View File

@ -31,19 +31,19 @@ import { isObj, requestAnimationFrame } from '../common/util'
interface Props { interface Props {
transition?: string transition?: string
closable: boolean closable?: boolean
position: string position?: string
closeOnClickModal: boolean closeOnClickModal?: boolean
duration: number | boolean duration?: number | boolean
modal: boolean modal?: boolean
zIndex: number zIndex?: number
hideWhenClose: boolean hideWhenClose?: boolean
modalStyle: string modalStyle?: string
safeAreaInsetBottom: boolean safeAreaInsetBottom?: boolean
modelValue: boolean modelValue: boolean
customStyle: string customStyle?: string
lazyRender: boolean lazyRender?: boolean
customClass: string customClass?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

4
src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue
View File

@ -34,10 +34,10 @@ type ProgressStatus = 'success' | 'danger' // 状态类型
interface Props { interface Props {
customClass?: string customClass?: string
percentage: number percentage?: number
hideText?: boolean hideText?: boolean
color?: string | string[] | Record<string, any>[] color?: string | string[] | Record<string, any>[]
duration: number duration?: number
status?: ProgressStatus status?: ProgressStatus
} }

12
src/uni_modules/wot-design-uni/components/wd-radio-group/wd-radio-group.vue
View File

@ -21,12 +21,12 @@ type RadioShape = 'dot' | 'button' | 'check'
interface Props { interface Props {
customClass?: string customClass?: string
modelValue: string | number | boolean modelValue: string | number | boolean
shape: RadioShape shape?: RadioShape
checkedColor: string checkedColor?: string
disabled: boolean disabled?: boolean
cell: boolean cell?: boolean
size: string size?: string
inline: boolean inline?: boolean
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

6
src/uni_modules/wot-design-uni/components/wd-radio/wd-radio.vue
View File

@ -39,10 +39,10 @@ interface Props {
value?: string | number | boolean value?: string | number | boolean
shape?: RadioShape shape?: RadioShape
checkedColor?: string checkedColor?: string
disabled: boolean | null disabled?: boolean | null
cell: boolean | null cell?: boolean | null
size?: string size?: string
inline: boolean | null inline?: boolean | null
maxWidth?: string maxWidth?: string
} }

20
src/uni_modules/wot-design-uni/components/wd-rate/wd-rate.vue
View File

@ -33,17 +33,17 @@ import { computed, ref, watch } from 'vue'
interface Props { interface Props {
customClass?: string customClass?: string
num: number num?: number
modelValue: string | number | null modelValue: string | number | null
readonly: boolean readonly?: boolean
size: string size?: string
space: string space?: string
color: string color?: string
activeColor: string | Array<string> activeColor?: string | Array<string>
icon: string icon?: string
activeIcon: string activeIcon?: string
disabled: boolean disabled?: boolean
disabledColor: string disabledColor?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

24
src/uni_modules/wot-design-uni/components/wd-search/wd-search.vue
View File

@ -63,18 +63,18 @@ import { computed, ref, watch } from 'vue'
import { requestAnimationFrame } from '../common/util' import { requestAnimationFrame } from '../common/util'
interface Props { interface Props {
useActionSlot: boolean useActionSlot?: boolean
useLabelSlot: boolean useLabelSlot?: boolean
userSuffixSlot: boolean userSuffixSlot?: boolean
placeholder: string placeholder?: string
cancelTxt: string cancelTxt?: string
light: boolean light?: boolean
hideCancel: boolean hideCancel?: boolean
disabled: boolean disabled?: boolean
maxlength: number | string maxlength?: number | string
modelValue: string modelValue?: string
placeholderLeft: boolean placeholderLeft?: boolean
customClass: string customClass?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

48
src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue
View File

@ -110,40 +110,40 @@ interface Props {
customLabelClass?: string customLabelClass?: string
customValueClass?: string customValueClass?: string
label?: string label?: string
labelWidth: string labelWidth?: string
disabled: boolean disabled?: boolean
readonly: boolean readonly?: boolean
placeholder: string placeholder?: string
title?: string title?: string
alignRight: boolean alignRight?: boolean
error: boolean error?: boolean
required: boolean required?: boolean
useLabelSlot: boolean useLabelSlot?: boolean
useDefaultSlot: boolean useDefaultSlot?: boolean
size?: string size?: string
checkedColor: string checkedColor?: string
min: number min?: number
max: number max?: number
selectSize?: string selectSize?: string
loading: boolean loading?: boolean
loadingColor: string loadingColor?: string
closeOnClickModal: boolean closeOnClickModal?: boolean
modelValue: Array<number | boolean | string> | number | boolean | string modelValue: Array<number | boolean | string> | number | boolean | string
columns: Array<Record<string, any>> columns: Array<Record<string, any>>
type: SelectPickerType type?: SelectPickerType
valueKey: string valueKey?: string
labelKey: string labelKey?: string
confirmButtonText: string confirmButtonText?: string
// 外部展示格式化函数 // 外部展示格式化函数
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
displayFormat?: Function displayFormat?: Function
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
beforeConfirm?: Function beforeConfirm?: Function
zIndex: number zIndex?: number
safeAreaInsetBottom: boolean safeAreaInsetBottom?: boolean
filterable: boolean filterable?: boolean
filterPlaceholder: string filterPlaceholder?: string
ellipsis: boolean ellipsis?: boolean
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

16
src/uni_modules/wot-design-uni/components/wd-slider/wd-slider.vue
View File

@ -62,14 +62,14 @@ interface Props {
customMinClass?: string customMinClass?: string
customMaxClass?: string customMaxClass?: string
customClass?: string customClass?: string
hideMinMax: boolean hideMinMax?: boolean
hideLabel: boolean hideLabel?: boolean
disabled: boolean disabled?: boolean
inactiveColor: string inactiveColor?: string
activeColor: string activeColor?: string
max: number max?: number
min: number min?: number
step: number step?: number
modelValue: number | number[] modelValue: number | number[]
} }

8
src/uni_modules/wot-design-uni/components/wd-sort-button/wd-sort-button.vue
View File

@ -26,11 +26,11 @@ export default {
<script lang="ts" setup> <script lang="ts" setup>
interface Props { interface Props {
customClass?: string customClass?: string
title: string title?: string
modelValue: number modelValue: number
allowReset: boolean allowReset?: boolean
descFirst: boolean descFirst?: boolean
line: boolean line?: boolean
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

8
src/uni_modules/wot-design-uni/components/wd-status-tip/wd-status-tip.vue
View File

@ -31,10 +31,10 @@ import { ref, watch } from 'vue'
type StatusTipType = 'search' | 'network' | 'content' | 'collect' | 'comment' | 'halo' | 'message' type StatusTipType = 'search' | 'network' | 'content' | 'collect' | 'comment' | 'halo' | 'message'
interface Props { interface Props {
customClass: string customClass?: string
customStyle: string customStyle?: string
type: StatusTipType type?: StatusTipType
tip: string tip?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

6
src/uni_modules/wot-design-uni/components/wd-step/wd-step.vue
View File

@ -53,9 +53,9 @@ interface Props {
description?: string description?: string
icon?: string icon?: string
status?: StepStatus status?: StepStatus
iconSlot: boolean iconSlot?: boolean
titleSlot: boolean titleSlot?: boolean
descriptionSlot: boolean descriptionSlot?: boolean
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

8
src/uni_modules/wot-design-uni/components/wd-steps/wd-steps.vue
View File

@ -27,11 +27,11 @@ import { getCurrentInstance, provide, watch } from 'vue'
interface Props { interface Props {
customClass?: string customClass?: string
active: number active?: number
vertical: boolean vertical?: boolean
dot: boolean dot?: boolean
space?: string space?: string
alignCenter: boolean alignCenter?: boolean
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

8
src/uni_modules/wot-design-uni/components/wd-sticky/wd-sticky.vue
View File

@ -33,8 +33,8 @@ import { addUnit, getRect, objToStyle } from '../common/util'
interface Props { interface Props {
customStyle?: string customStyle?: string
customClass?: string customClass?: string
zIndex: number zIndex?: number
offsetTop: number offsetTop?: number
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
@ -52,9 +52,9 @@ const width = ref<number>(0)
const observerList = ref<UniApp.IntersectionObserver[]>([]) const observerList = ref<UniApp.IntersectionObserver[]>([])
const state = ref<string>('') const state = ref<string>('')
const boxHeight: Ref<number> = inject('box-height') || ref(0) const boxHeight: Ref<number> = inject('box-height', null) || ref(0)
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
const observerForChild: Function | null = inject('observerForChild') || null const observerForChild: Function | null = inject('observerForChild', null)
const { proxy } = getCurrentInstance() as any const { proxy } = getCurrentInstance() as any
const instance = getCurrentInstance() as any const instance = getCurrentInstance() as any

6
src/uni_modules/wot-design-uni/components/wd-swipe-action/wd-swipe-action.vue
View File

@ -35,7 +35,7 @@ export default {
} }
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { getCurrentInstance, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue' import { getCurrentInstance, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { closeOther, pushToQueue, removeFromQueue } from '../common/clickoutside' import { closeOther, pushToQueue, removeFromQueue } from '../common/clickoutside'
import { useTouch } from '../mixins/useTouch' import { useTouch } from '../mixins/useTouch'
import { getRect } from '../common/util' import { getRect } from '../common/util'
@ -44,8 +44,8 @@ interface Props {
customClass?: string customClass?: string
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
beforeClose?: Function beforeClose?: Function
disabled: boolean disabled?: boolean
modelValue: string modelValue?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

10
src/uni_modules/wot-design-uni/components/wd-switch/wd-switch.vue
View File

@ -20,15 +20,15 @@ import { getType, objToStyle } from '../common/util'
interface Props { interface Props {
modelValue: boolean | string | number modelValue: boolean | string | number
disabled: boolean disabled?: boolean
activeValue: boolean | string | number activeValue?: boolean | string | number
inactiveValue: boolean | string | number inactiveValue?: boolean | string | number
activeColor?: string activeColor?: string
inactiveColor?: string inactiveColor?: string
size: string size?: string
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
beforeChange?: Function beforeChange?: Function
customClass: string customClass?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

2
src/uni_modules/wot-design-uni/components/wd-tab/wd-tab.vue
View File

@ -27,7 +27,7 @@ interface Props {
// tab的label // tab的label
title?: string title?: string
// tab禁用，无法点击 // tab禁用，无法点击
disabled: boolean disabled?: boolean
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

14
src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue
View File

@ -143,19 +143,19 @@ interface Props {
// 绑定值 // 绑定值
modelValue: number modelValue: number
// 标签数超过阈值可滑动 // 标签数超过阈值可滑动
slidableNum: number slidableNum?: number
// 标签数超过阈值显示导航地图 // 标签数超过阈值显示导航地图
mapNum: number mapNum?: number
// 粘性布局 // 粘性布局
sticky: boolean sticky?: boolean
// 粘性布局吸顶位置 // 粘性布局吸顶位置
offsetTop: number offsetTop?: number
// 开启手势滑动 // 开启手势滑动
swipeable: boolean swipeable?: boolean
// 底部条宽度，单位像素 // 底部条宽度，单位像素
lineWidth: number lineWidth?: number
// 底部条高度，单位像素 // 底部条高度，单位像素
lineHeight: number lineHeight?: number
color?: string color?: string
inactiveColor?: string inactiveColor?: string
} }

14
src/uni_modules/wot-design-uni/components/wd-tag/wd-tag.vue
View File

@ -40,17 +40,17 @@ import { objToStyle } from '../common/util'
import { computed, ref, watch } from 'vue' import { computed, ref, watch } from 'vue'
interface Props { interface Props {
useIconSlot: boolean useIconSlot?: boolean
type?: string type?: string
icon?: string icon?: string
closable: boolean closable?: boolean
plain: boolean plain?: boolean
dynamic: boolean dynamic?: boolean
color?: string color?: string
bgColor?: string bgColor?: string
round: boolean round?: boolean
mark: boolean mark?: boolean
customClass: string customClass?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

20
src/uni_modules/wot-design-uni/components/wd-tooltip/wd-tooltip.vue
View File

@ -55,19 +55,19 @@ type PlacementType =
| 'right-end' | 'right-end'
interface Props { interface Props {
customStyle: string customStyle?: string
customArrow: string customArrow?: string
customPop: string customPop?: string
customClass: string customClass?: string
// 是否显示 popover 箭头 // 是否显示 popover 箭头
visibleArrow: boolean visibleArrow?: boolean
// 显示内容 // 显示内容
content?: Record<string, any>[] | string content?: Record<string, any>[] | string
placement: PlacementType placement?: PlacementType
offset: number offset?: number
useContentSlot: boolean useContentSlot?: boolean
disabled: boolean disabled?: boolean
showClose: boolean showClose?: boolean
modelValue: boolean modelValue: boolean
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

8
src/uni_modules/wot-design-uni/components/wd-transition/wd-transition.vue
View File

@ -51,11 +51,11 @@ type TransitionName =
| 'zoom-out' | 'zoom-out'
interface Props { interface Props {
show: boolean show?: boolean
duration?: Record<string, number> | number | boolean duration?: Record<string, number> | number | boolean
name: TransitionName | '' name?: TransitionName | ''
customStyle: string customStyle?: string
lazyRender: boolean lazyRender?: boolean
customClass?: string customClass?: string
// 定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 // 定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
enterClass?: string enterClass?: string

38
src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue
View File

@ -56,31 +56,31 @@ import { context, getType, isDef, isEqual } from '../common/util'
import { chooseFile } from './utils' import { chooseFile } from './utils'
interface Props { interface Props {
customClass: string customClass?: string
customEvokeClass: string customEvokeClass?: string
customPreviewClass: string customPreviewClass?: string
// 多选 // 多选
multiple: boolean multiple?: boolean
// 接受类型 暂定接受类型为图片，视频后续添加 // 接受类型 暂定接受类型为图片，视频后续添加
accept: string accept?: string
sizeType: Array<string> sizeType?: Array<string>
sourceType: Array<string> sourceType?: Array<string>
header: Record<string, any> header?: Record<string, any>
name: string name?: string
formData: Record<string, any> formData?: Record<string, any>
// 上传相关 // 上传相关
action: string action: string
fileList: Record<string, any>[] fileList?: Record<string, any>[]
statusKey: string statusKey?: string
maxSize: number maxSize?: number
limit?: number limit?: number
showLimitMum: boolean showLimitMum?: boolean
disabled: boolean disabled?: boolean
useDefaultSlot: boolean useDefaultSlot?: boolean
// loading 相关 // loading 相关
loadingType: string loadingType?: string
loadingColor: string loadingColor?: string
loadingSize: string loadingSize?: string
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
beforePreview?: Function beforePreview?: Function
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types

46
src/uni_modules/wot-design-uni/readme.md
View File

@ -6,44 +6,56 @@
<p align="center">📱 一个参照<a href="https://ftf.jd.com/wot-design/">Wot-design</a>，基于 Vue3 打造的uni-app组件库</p> <p align="center">📱 一个参照<a href="https://ftf.jd.com/wot-design/">Wot-design</a>，基于 Vue3 打造的uni-app组件库</p>
<p align="center"> <p align="center">
<a href="https://app.netlify.com/sites/wot-design-uni/deploys" target="_blank" referrerpolicy="no-referrer">
<img src="https://api.netlify.com/api/v1/badges/0991d8a9-0fb0-483b-8961-5bde066bbd50/deploy-status" alt="deploy-status" /> <a href="https://github.com/Moonofweisheng/wot-design-uni">
</a> <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/Moonofweisheng/wot-design-uni?logo=github&color=%234d80f0&link=https%3A%2F%2Fgithub.com%2FMoonofweisheng%2Fwot-design-uni">
</a>
<a href="https://www.npmjs.com/package/wot-design-uni">
<img alt="npm" src="https://img.shields.io/npm/v/wot-design-uni?logo=npm&color=%234d80f0&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fwot-design-uni">
</a>
<a href="https://www.npmjs.com/package/wot-design-uni">
<img alt="npm" src="https://img.shields.io/npm/dw/wot-design-uni?logo=npm&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fwot-design-uni">
</a>
<a href="https://www.npmjs.com/package/wot-design-uni">
<img src="https://img.shields.io/npm/dt/wot-design-uni?style=flat-square">
</a>
<a href="https://github.com/Moonofweisheng/wot-design-uni">
<img alt="GitHub" src="https://img.shields.io/github/license/Moonofweisheng/wot-design-uni?logo=github">
</a>
<a href="https://app.netlify.com/sites/wot-design-uni/deploys" target="_blank" referrerpolicy="no-referrer">
<img src="https://api.netlify.com/api/v1/badges/0991d8a9-0fb0-483b-8961-5bde066bbd50/deploy-status" alt="deploy-status" />
</a>
</p> </p>
<p align="center"> <p align="center">
🔥 <a href="https://wot-design-uni.netlify.app/">文档网站 (Netlify)</a> 🔥 <a href="https://wot-design-uni.netlify.app/">文档网站 (Netlify)</a>
</p> </p>
## ✨ 特性 ## ✨ 特性
- 🚀 支持 APP、H5、微信小程序、支付宝小程序、钉钉小程序 等平台. - 🚀 支持 APP、H5、微信小程序 等平台.
- 🚀 50+ 个高质量组件，覆盖移动端主流场景. - 🚀 50+ 个高质量组件，覆盖移动端主流场景.
- 💪 使用 Typescript 构建，提供良好的组件类型系统. - 💪 使用 Typescript 构建，提供良好的组件类型系统.
- 💪 采用 Vue3 最新特性，提升组件性能. - 💪 采用 Vue3 最新特性，提升组件性能.
- 📖 提供丰富的文档和组件示例. - 📖 提供丰富的文档和组件示例.
- 🎨 支持主题定制，可以定制scss变量以及组件的样式自定义. - 🎨 支持主题定制，可以定制 scss 变量以及组件的样式自定义.
- 🍭 支持暗黑模式 - 🍭 支持暗黑模式
## 📱 预览 ## 📱 预览
手机扫描上的二维码访问演示： 扫描二维码访问演示：
<p> <p>
<img src="https://wot-design-uni.netlify.app/wx.jpg" width="200" height="200" style="margin-right:30px"/> <img src="https://wot-design-uni.netlify.app/wx.jpg" width="200" height="200" style="margin-right:30px"/>
<img src="https://wot-design-uni.netlify.app/alipay.png" width="200" height="200" /> <img src="https://wot-design-uni.netlify.app/alipay.png" width="200" height="200" />
</p> </p>
## 安装
```bash
yarn add wot-design-uni
```
## 快速上手 ## 快速上手
详细说明见 [快速上手](https://wot-design-uni.netlify.app/guide/quickUse.html) 详细说明见 [快速上手](https://wot-design-uni.netlify.app/guide/quickUse.html)
@ -51,5 +63,3 @@ yarn add wot-design-uni
## LICENSE ## LICENSE
[MIT](https://github.com/Moonofweisheng/wot-design-uni/blob/develop/LICENSE) [MIT](https://github.com/Moonofweisheng/wot-design-uni/blob/develop/LICENSE)

5
yarn.lock
View File

@ -3084,6 +3084,11 @@
resolved "https://registry.npmmirror.com/@vant/area-data/-/area-data-1.4.1.tgz#b4f1bce05dbb147dc08fd2ed9b2a0f63d3329b29" resolved "https://registry.npmmirror.com/@vant/area-data/-/area-data-1.4.1.tgz#b4f1bce05dbb147dc08fd2ed9b2a0f63d3329b29"
integrity sha512-D8zI/rfxREhnIKGoYzsEJZ73fte4JARhFeFftLIH7ynu1sPrCBEgPkLEbwPyvw3VC4JdSIuzaK5uOhu+BcoPXw== integrity sha512-D8zI/rfxREhnIKGoYzsEJZ73fte4JARhFeFftLIH7ynu1sPrCBEgPkLEbwPyvw3VC4JdSIuzaK5uOhu+BcoPXw==
"@vant/touch-emulator@^1.4.0":
version "1.4.0"
resolved "https://registry.yarnpkg.com/@vant/touch-emulator/-/touch-emulator-1.4.0.tgz#02420ca5f312a7eb6c36c349cbb8e80e6f29ff2f"
integrity sha512-Zt+zISV0+wpOew2S1siOJ3G22y+hapHAKmXM+FhpvWzsRc4qahaYXatCAITuuXt0EcDp7WvEeTO4F7p9AtX/pw==
"@vitejs/plugin-legacy@^4.0.3": "@vitejs/plugin-legacy@^4.0.3":
version "4.1.1" version "4.1.1"
resolved "https://registry.yarnpkg.com/@vitejs/plugin-legacy/-/plugin-legacy-4.1.1.tgz#27aad7ab082d2d554cf48a8e4f1c0ae9f3eca522" resolved "https://registry.yarnpkg.com/@vitejs/plugin-legacy/-/plugin-legacy-4.1.1.tgz#27aad7ab082d2d554cf48a8e4f1c0ae9f3eca522"