mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 09:08:51 +08:00
weisheng
GitHub
commit
b809bd5e27
46
README.md
46
README.md
@ -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://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>
|
||||
|
||||
<a href="https://github.com/Moonofweisheng/wot-design-uni">
|
||||
<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 align="center">
|
||||
🔥 <a href="https://wot-design-uni.netlify.app/">文档网站 (Netlify)</a>
|
||||
</p>
|
||||
|
||||
|
||||
## ✨ 特性
|
||||
|
||||
- 🚀 支持 APP、H5、微信小程序、支付宝小程序、钉钉小程序 等平台.
|
||||
- 🚀 支持 APP、H5、微信小程序 等平台.
|
||||
- 🚀 50+ 个高质量组件，覆盖移动端主流场景.
|
||||
- 💪 使用 Typescript 构建，提供良好的组件类型系统.
|
||||
- 💪 采用 Vue3 最新特性，提升组件性能.
|
||||
- 📖 提供丰富的文档和组件示例.
|
||||
- 🎨 支持主题定制，可以定制scss变量以及组件的样式自定义.
|
||||
- 🎨 支持主题定制，可以定制 scss 变量以及组件的样式自定义.
|
||||
- 🍭 支持暗黑模式
|
||||
|
||||
## 📱 预览
|
||||
|
||||
手机扫描上的二维码访问演示：
|
||||
|
||||
|
||||
扫描二维码访问演示：
|
||||
|
||||
<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/alipay.png" width="200" height="200" />
|
||||
</p>
|
||||
|
||||
|
||||
## 安装
|
||||
|
||||
```bash
|
||||
yarn add wot-design-uni
|
||||
```
|
||||
|
||||
## 快速上手
|
||||
|
||||
详细说明见 [快速上手](https://wot-design-uni.netlify.app/guide/quickUse.html)
|
||||
@ -51,5 +63,3 @@ yarn add wot-design-uni
|
||||
## LICENSE
|
||||
|
||||
[MIT](https://github.com/Moonofweisheng/wot-design-uni/blob/develop/LICENSE)
|
||||
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: weisheng
|
||||
* @Date: 2023-07-27 10:26:09
|
||||
* @LastEditTime: 2023-08-01 17:31:40
|
||||
* @LastEditTime: 2023-08-22 19:02:54
|
||||
* @LastEditors: weisheng
|
||||
* @Description:
|
||||
* @FilePath: \wot-design-uni\docs\.vitepress\config.ts
|
||||
@ -26,8 +26,8 @@ export default defineConfig({
|
||||
],
|
||||
themeConfig: {
|
||||
logo: '/wot-design.png',
|
||||
lastUpdated:{
|
||||
text:'最后更新'
|
||||
lastUpdated: {
|
||||
text: '最后更新'
|
||||
},
|
||||
editLink: {
|
||||
pattern: 'https://github.com/Moonofweisheng/wot-design-uni/edit/master/docs/:path',
|
||||
@ -35,6 +35,7 @@ export default defineConfig({
|
||||
},
|
||||
socialLinks: [
|
||||
{ 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: {
|
||||
provider: 'algolia',
|
||||
@ -45,33 +46,13 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
|
||||
// carbonAds: {
|
||||
// code: 'CEBIEK3N',
|
||||
// placement: 'vitejsdev',
|
||||
// },
|
||||
|
||||
footer: {
|
||||
message: `Released under the MIT License.`,
|
||||
copyright: 'Copyright © 2023-present weisheng',
|
||||
},
|
||||
nav: [
|
||||
{ text: '指南', link: '/guide/quickUse', activeMatch: '/guide/' },
|
||||
{ text: '组件', link: '/component/button', activeMatch: '/component/' },
|
||||
{ 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: '指南', activeMatch: '/guide/', items: [
|
||||
{
|
||||
text: '介绍',
|
||||
link: '/guide/introduction',
|
||||
@ -96,198 +77,261 @@ export default defineConfig({
|
||||
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 标签"
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
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 标签"
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
## 特性
|
||||
## ✨ 特性
|
||||
|
||||
* 50+ 组件
|
||||
* Vue3 + TypeScript 开发
|
||||
* 支持 APP、H5、微信小程序、支付宝小程序、钉钉小程序 等平台
|
||||
- 🚀 支持 APP、H5、微信小程序 等平台.
|
||||
- 🚀 50+ 个高质量组件，覆盖移动端主流场景.
|
||||
- 💪 使用 Typescript 构建，提供良好的组件类型系统.
|
||||
- 💪 采用 Vue3 最新特性，提升组件性能.
|
||||
- 📖 提供丰富的文档和组件示例.
|
||||
- 🎨 支持主题定制，可以定制scss变量以及组件的样式自定义.
|
||||
- 🍭 支持暗黑模式
|
||||
|
||||
> 使用Vue3最新特性开发，持续优化体验
|
||||
|
||||
|
||||
@ -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
|
||||
- - - wot-design-uni
|
||||
@ -15,8 +21,71 @@
|
||||
下载地址：<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
|
||||
<wd-toast></wd-toast>
|
||||
```
|
||||
|
||||
:::tip 温馨提醒
|
||||
使用uni_modules 安装时`Wot Design Uni`的组件天然支持`easycom`规范，无需额外配置，而使用npm安装需要自行配置`easycom`。
|
||||
:::
|
||||
|
||||
@ -25,7 +25,7 @@ hero:
|
||||
features:
|
||||
- icon: 🚀
|
||||
title: 多平台覆盖
|
||||
details: 支持 APP、H5、微信小程序、支付宝小程序、钉钉小程序 等平台。
|
||||
details: 支持 APP、H5、微信小程序 等平台。
|
||||
- icon: 🚀
|
||||
title: 50+ 组件
|
||||
details: 超过50个高质量组件，覆盖移动端主流场景。
|
||||
|
||||
@ -22,7 +22,6 @@
|
||||
<title></title>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@vant/touch-emulator"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
|
||||
@ -82,6 +82,7 @@
|
||||
"@typescript-eslint/eslint-plugin": "^5.55.0",
|
||||
"@typescript-eslint/parser": "^5.55.0",
|
||||
"@vant/area-data": "^1.4.1",
|
||||
"@vant/touch-emulator": "^1.4.0",
|
||||
"@vue/tsconfig": "^0.1.3",
|
||||
"eslint": "^8.36.0",
|
||||
"eslint-config-prettier": "^8.7.0",
|
||||
|
||||
@ -29,16 +29,18 @@ import { ref, watch } from 'vue'
|
||||
|
||||
interface Props {
|
||||
customClass?: string
|
||||
title: string
|
||||
ver: number
|
||||
hor: number
|
||||
transparent: boolean
|
||||
title?: string
|
||||
ver?: number
|
||||
hor?: number
|
||||
transparent?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
title: '',
|
||||
customClass: '',
|
||||
ver: 10,
|
||||
hor: 15
|
||||
hor: 15,
|
||||
transparent: false
|
||||
})
|
||||
|
||||
const style = ref<string>('')
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: weisheng
|
||||
* @Date: 2023-03-09 19:23:03
|
||||
* @LastEditTime: 2023-06-10 23:01:56
|
||||
* @LastEditTime: 2023-08-22 23:02:46
|
||||
* @LastEditors: weisheng
|
||||
* @Description:
|
||||
* @FilePath: \wot-design-uni\src\main.ts
|
||||
@ -9,9 +9,13 @@
|
||||
*/
|
||||
import { createSSRApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
// #ifdef H5
|
||||
import '@vant/touch-emulator'
|
||||
// #endif
|
||||
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
app.config.warnHandler = () => null
|
||||
// app.config.warnHandler = () => null
|
||||
return {
|
||||
app
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<page-wraper>
|
||||
<wd-message-box></wd-message-box>
|
||||
<wd-toast></wd-toast>
|
||||
<wd-message-box selector="wd-message-box-slot" use-slot>
|
||||
<wd-rate custom-class="custom-rate-class" v-model="value" />
|
||||
</wd-message-box>
|
||||
@ -31,7 +30,7 @@
|
||||
</page-wraper>
|
||||
</template>
|
||||
<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'
|
||||
const value = ref<number>(1)
|
||||
const value1 = ref<string>('')
|
||||
|
||||
@ -44,7 +44,9 @@
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
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() {
|
||||
clickOut.closeOutside()
|
||||
|
||||
@ -2,8 +2,8 @@ import { getCurrentInstance, inject, nextTick, onBeforeMount, onMounted, ref, wa
|
||||
|
||||
export function useCell() {
|
||||
const border = ref<boolean>(false) // 是否展示边框
|
||||
const cellGroup: any = inject('cell-group') || {}
|
||||
const cellList: any = inject('cell-list') || ref<any[]>([])
|
||||
const cellGroup: any = inject('cell-group', null) || {}
|
||||
const cellList: any = inject('cell-list', null) || ref<any[]>([])
|
||||
const { proxy } = getCurrentInstance() as any
|
||||
|
||||
watch(
|
||||
|
||||
@ -94,16 +94,16 @@ interface Props {
|
||||
customClass?: string
|
||||
customHeaderClass?: string
|
||||
show: boolean
|
||||
actions: Array<Action>
|
||||
panels: Array<Panel>
|
||||
actions?: Array<Action>
|
||||
panels?: Array<Panel>
|
||||
title?: string
|
||||
cancelText?: string
|
||||
closeOnClickAction: boolean
|
||||
closeOnClickModal: boolean
|
||||
duration: number
|
||||
zIndex: number
|
||||
lazyRender: boolean
|
||||
safeAreaInsetBottom: boolean
|
||||
closeOnClickAction?: boolean
|
||||
closeOnClickModal?: boolean
|
||||
duration?: number
|
||||
zIndex?: number
|
||||
lazyRender?: boolean
|
||||
safeAreaInsetBottom?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: weisheng
|
||||
* @Date: 2023-06-12 18:40:59
|
||||
* @LastEditTime: 2023-08-15 15:47:51
|
||||
* @LastEditTime: 2023-08-22 23:23:37
|
||||
* @LastEditors: weisheng
|
||||
* @Description:
|
||||
* @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'
|
||||
type BadgeType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
|
||||
interface Props {
|
||||
modelValue: number | string | null
|
||||
modelValue?: number | string | null
|
||||
bgColor?: string
|
||||
max?: number
|
||||
isDot?: boolean
|
||||
@ -41,7 +41,7 @@ interface Props {
|
||||
type?: BadgeType
|
||||
top?: number
|
||||
right?: number
|
||||
customClass: string
|
||||
customClass?: string
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
customClass: '',
|
||||
|
||||
@ -71,15 +71,15 @@ type ButtonType = 'primary' | 'success' | 'info' | 'warning' | 'error' | 'defaul
|
||||
type ButtonSize = 'small' | 'medium' | 'large'
|
||||
|
||||
interface Props {
|
||||
plain: boolean
|
||||
disabled: boolean
|
||||
round: boolean
|
||||
suck: boolean
|
||||
block: boolean
|
||||
type: ButtonType
|
||||
size: ButtonSize
|
||||
plain?: boolean
|
||||
disabled?: boolean
|
||||
round?: boolean
|
||||
suck?: boolean
|
||||
block?: boolean
|
||||
type?: ButtonType
|
||||
size?: ButtonSize
|
||||
icon?: string
|
||||
loading: boolean
|
||||
loading?: boolean
|
||||
loadingColor?: string
|
||||
openType?: string
|
||||
formType?: string
|
||||
@ -91,8 +91,8 @@ interface Props {
|
||||
sendMessageImg?: string
|
||||
appParameter?: string
|
||||
showMessageCard?: boolean
|
||||
customClass: string
|
||||
customStyle: string
|
||||
customClass?: string
|
||||
customStyle?: string
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
type: 'primary',
|
||||
|
||||
@ -1,22 +1,24 @@
|
||||
<template>
|
||||
<wd-toast selector="wd-month" />
|
||||
<view class="month" :data-date="date">
|
||||
<view class="wd-month">
|
||||
<view class="wd-month__title">{{ monthTitle(date) }}</view>
|
||||
<view class="wd-month__days">
|
||||
<view
|
||||
v-for="(item, index) in days"
|
||||
:key="index"
|
||||
:class="`wd-month__day ${item.disabled ? 'is-disabled' : ''} ${item.type ? itemClass(item.type, value, type) : ''}`"
|
||||
: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-text">
|
||||
{{ item.text }}
|
||||
<view>
|
||||
<wd-toast selector="wd-month" />
|
||||
<view class="month">
|
||||
<view class="wd-month">
|
||||
<view class="wd-month__title">{{ monthTitle(date) }}</view>
|
||||
<view class="wd-month__days">
|
||||
<view
|
||||
v-for="(item, index) in days"
|
||||
:key="index"
|
||||
:class="`wd-month__day ${item.disabled ? 'is-disabled' : ''} ${item.type ? itemClass(item.type, value, type) : ''}`"
|
||||
: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-text">
|
||||
{{ item.text }}
|
||||
</view>
|
||||
<view class="wd-month__day-bottom">{{ item.bottomInfo }}</view>
|
||||
</view>
|
||||
<view class="wd-month__day-bottom">{{ item.bottomInfo }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -61,7 +63,7 @@ interface Props {
|
||||
formatter?: Function
|
||||
maxRange?: number
|
||||
rangePrompt?: string
|
||||
allowSameDay: boolean
|
||||
allowSameDay?: boolean
|
||||
defaultTime: Array<number>
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -78,13 +78,13 @@ interface Props {
|
||||
formatter?: Function
|
||||
maxRange?: number
|
||||
rangePrompt?: string
|
||||
allowSameDay: boolean
|
||||
showPanelTitle: boolean
|
||||
allowSameDay?: boolean
|
||||
showPanelTitle?: boolean
|
||||
defaultTime: Array<number>
|
||||
panelHeight: number
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
timeFilter?: Function
|
||||
hideSecond: boolean
|
||||
hideSecond?: boolean
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
allowSameDay: false,
|
||||
|
||||
@ -63,13 +63,13 @@ interface Props {
|
||||
// 选中值，为 13 位时间戳或时间戳数组
|
||||
modelValue: number | Array<number> | null
|
||||
// 日期类型
|
||||
type: CalendarType
|
||||
type?: CalendarType
|
||||
// 最小日期，为 13 位时间戳
|
||||
minDate: number
|
||||
minDate?: number
|
||||
// 最大日期，为 13 位时间戳
|
||||
maxDate: number
|
||||
maxDate?: number
|
||||
// 周起始天
|
||||
firstDayOfWeek: number
|
||||
firstDayOfWeek?: number
|
||||
// 日期格式化函数
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
formatter?: Function
|
||||
@ -78,18 +78,18 @@ interface Props {
|
||||
// type 为范围选择时有效，选择超出最大日期范围时的错误提示文案
|
||||
rangePrompt?: string
|
||||
// type 为范围选择时有效，是否允许选择同一天
|
||||
allowSameDay: boolean
|
||||
allowSameDay?: boolean
|
||||
// 是否展示面板标题，自动计算当前滚动的日期月份
|
||||
showPanelTitle: boolean
|
||||
showPanelTitle?: boolean
|
||||
// 选中日期所使用的当日内具体时刻
|
||||
defaultTime: string | Array<string>
|
||||
defaultTime?: string | Array<string>
|
||||
// 可滚动面板的高度
|
||||
panelHeight: number
|
||||
panelHeight?: number
|
||||
// type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
timeFilter?: Function
|
||||
// type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改
|
||||
hideSecond: boolean
|
||||
hideSecond?: boolean
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
customClass: '',
|
||||
|
||||
@ -43,7 +43,7 @@ interface Props {
|
||||
formatter?: Function
|
||||
maxRange?: number
|
||||
rangePrompt?: string
|
||||
allowSameDay: boolean
|
||||
allowSameDay?: boolean
|
||||
defaultTime: Array<number>
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -48,8 +48,8 @@ interface Props {
|
||||
formatter?: Function
|
||||
maxRange?: number
|
||||
rangePrompt?: string
|
||||
allowSameDay: boolean
|
||||
showPanelTitle: boolean
|
||||
allowSameDay?: boolean
|
||||
showPanelTitle?: boolean
|
||||
defaultTime: Array<number>
|
||||
panelHeight: number
|
||||
}
|
||||
@ -61,11 +61,6 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
const title = ref<string>('')
|
||||
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: number = (props.panelHeight || 378) + (props.showPanelTitle ? 26 : 16)
|
||||
|
||||
@ -45,8 +45,8 @@ interface Props {
|
||||
customClass?: string
|
||||
title?: string
|
||||
value?: string
|
||||
useSlot: boolean
|
||||
border: boolean
|
||||
useSlot?: boolean
|
||||
border?: boolean
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
useSlot: false,
|
||||
|
||||
@ -64,15 +64,15 @@ interface Props {
|
||||
value?: string
|
||||
icon?: string
|
||||
label?: string
|
||||
isLink: boolean
|
||||
isLink?: boolean
|
||||
to?: string
|
||||
replace: boolean
|
||||
clickable: boolean
|
||||
replace?: boolean
|
||||
clickable?: boolean
|
||||
size?: string
|
||||
titleWidth?: string
|
||||
center: boolean
|
||||
required: boolean
|
||||
vertical: boolean
|
||||
center?: boolean
|
||||
required?: boolean
|
||||
vertical?: boolean
|
||||
customClass?: string
|
||||
customIconClass?: string
|
||||
customLabelClass?: string
|
||||
@ -81,6 +81,7 @@ interface Props {
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
customClass: '',
|
||||
customIconClass: '',
|
||||
customLabelClass: '',
|
||||
customValueClass: '',
|
||||
|
||||
@ -22,13 +22,13 @@ type checkShape = 'circle' | 'square' | 'button'
|
||||
interface Props {
|
||||
customClass?: string
|
||||
modelValue: Array<string | number | boolean>
|
||||
cell: boolean
|
||||
shape: checkShape
|
||||
checkedColor: string
|
||||
disabled: boolean
|
||||
min: number
|
||||
max: number
|
||||
inline: boolean
|
||||
cell?: boolean
|
||||
shape?: checkShape
|
||||
checkedColor?: string
|
||||
disabled?: boolean
|
||||
min?: number
|
||||
max?: number
|
||||
inline?: boolean
|
||||
size?: string
|
||||
name?: string
|
||||
}
|
||||
|
||||
@ -50,11 +50,11 @@ interface Props {
|
||||
customShapeClass?: string
|
||||
customClass?: string
|
||||
modelValue: string | number | boolean
|
||||
shape: checkShape
|
||||
shape?: checkShape
|
||||
checkedColor?: string
|
||||
disabled: boolean | null
|
||||
trueValue: string | number | boolean
|
||||
falseValue: string | number | boolean
|
||||
disabled?: boolean | null
|
||||
trueValue?: string | number | boolean
|
||||
falseValue?: string | number | boolean
|
||||
size?: string
|
||||
maxWidth?: string
|
||||
}
|
||||
@ -75,7 +75,7 @@ const inited = ref<boolean>(false)
|
||||
// 相同组件的伪类选择器无效，这里配合类名手动模拟 last-child、first-child
|
||||
const isFirst = ref<boolean>(false)
|
||||
const isLast = ref<boolean>(false)
|
||||
const parent = inject<any>('checkGroup')
|
||||
const parent = inject<any>('checkGroup', null)
|
||||
const { proxy } = getCurrentInstance() as any
|
||||
|
||||
watch(
|
||||
|
||||
@ -104,12 +104,12 @@ interface Props {
|
||||
modelValue: Array<Record<string, any>>
|
||||
columns: Array<Array<Record<string, any>>>
|
||||
label?: string
|
||||
labelWidth: string
|
||||
useLabelSlot: boolean
|
||||
useDefaultSlot: boolean
|
||||
disabled: boolean
|
||||
readonly: boolean
|
||||
placeholder: string
|
||||
labelWidth?: string
|
||||
useLabelSlot?: boolean
|
||||
useDefaultSlot?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
placeholder?: string
|
||||
title?: string
|
||||
// 接收当前列的选中项 item、当前列下标、当前列选中项下标下一列数据处理函数 resolve、结束选择 finish
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
@ -119,19 +119,19 @@ interface Props {
|
||||
displayFormat?: Function
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
beforeConfirm?: Function
|
||||
alignRight: boolean
|
||||
error: boolean
|
||||
required: boolean
|
||||
alignRight?: boolean
|
||||
error?: boolean
|
||||
required?: boolean
|
||||
size?: string
|
||||
valueKey: string
|
||||
labelKey: string
|
||||
tipKey: string
|
||||
loadingColor: string
|
||||
closeOnClickModal: boolean
|
||||
autoComplete: boolean
|
||||
zIndex: number
|
||||
safeAreaInsetBottom: boolean
|
||||
ellipsis: boolean
|
||||
valueKey?: string
|
||||
labelKey?: string
|
||||
tipKey?: string
|
||||
loadingColor?: string
|
||||
closeOnClickModal?: boolean
|
||||
autoComplete?: boolean
|
||||
zIndex?: number
|
||||
safeAreaInsetBottom?: boolean
|
||||
ellipsis?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: weisheng
|
||||
* @Date: 2023-06-13 11:34:35
|
||||
* @LastEditTime: 2023-08-15 13:06:34
|
||||
* @LastEditTime: 2023-08-22 22:26:37
|
||||
* @LastEditors: weisheng
|
||||
* @Description:
|
||||
* @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>(), {
|
||||
span: 24,
|
||||
offset: 0
|
||||
offset: 0,
|
||||
customClass: ''
|
||||
})
|
||||
|
||||
const style = ref<string>('')
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: weisheng
|
||||
* @Date: 2023-08-01 11:12:05
|
||||
* @LastEditTime: 2023-08-15 16:30:17
|
||||
* @LastEditTime: 2023-08-22 22:28:28
|
||||
* @LastEditors: weisheng
|
||||
* @Description:
|
||||
* @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 {
|
||||
customClass?: string
|
||||
title?: string
|
||||
disabled: boolean
|
||||
disabled?: boolean
|
||||
name: string
|
||||
// 打开前的回调函数，返回 false 可以阻止打开，支持返回 Promise
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: weisheng
|
||||
* @Date: 2023-08-01 11:12:05
|
||||
* @LastEditTime: 2023-08-04 13:34:15
|
||||
* @LastEditTime: 2023-08-22 22:28:17
|
||||
* @LastEditors: weisheng
|
||||
* @Description:
|
||||
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-collapse\wd-collapse.vue
|
||||
@ -58,10 +58,10 @@ interface Props {
|
||||
customClass?: string
|
||||
customMoreSlotClass?: string
|
||||
modelValue: string | Array<string> | boolean
|
||||
accordion: boolean
|
||||
viewmore: boolean
|
||||
useMoreSlot: boolean
|
||||
lineNum: number
|
||||
accordion?: boolean
|
||||
viewmore?: boolean
|
||||
useMoreSlot?: boolean
|
||||
lineNum?: number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -28,8 +28,8 @@ export default {
|
||||
import { computed } from 'vue'
|
||||
type ConfigProviderTheme = 'light' | 'dark'
|
||||
interface Props {
|
||||
theme: ConfigProviderTheme
|
||||
themeVars: Record<string, any>
|
||||
theme?: ConfigProviderTheme
|
||||
themeVars?: Record<string, any>
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -6,14 +6,13 @@
|
||||
position="center"
|
||||
:close-on-click-modal="closeOnClickModal"
|
||||
:hide-when-close="hideWhenClose"
|
||||
@beforeenter="beforeenter"
|
||||
@before-enter="beforeenter"
|
||||
@enter="enter"
|
||||
@afterenter="afterenter"
|
||||
@beforeleave="beforeleave"
|
||||
@after-enter="afterenter"
|
||||
@before-leave="beforeleave"
|
||||
@leave="leave"
|
||||
@afterleave="afterleave"
|
||||
@after-leave="afterleave"
|
||||
@close="close"
|
||||
@closed="closed"
|
||||
@clickmodal="clickModal"
|
||||
:custom-class="`wd-curtain ${customClass}`"
|
||||
>
|
||||
@ -42,12 +41,12 @@ type ClosePosition = 'inset' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bo
|
||||
interface Props {
|
||||
customClass?: string
|
||||
value: boolean
|
||||
closePosition: ClosePosition
|
||||
closePosition?: ClosePosition
|
||||
src?: string
|
||||
to?: string
|
||||
width?: number
|
||||
closeOnClickModal: boolean
|
||||
hideWhenClose: boolean
|
||||
closeOnClickModal?: boolean
|
||||
hideWhenClose?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
@ -139,6 +138,7 @@ function leave() {
|
||||
|
||||
function afterleave() {
|
||||
emit('afterleave')
|
||||
emit('closed')
|
||||
}
|
||||
|
||||
function close() {
|
||||
@ -146,10 +146,6 @@ function close() {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
function closed() {
|
||||
emit('closed')
|
||||
}
|
||||
|
||||
function clickModal() {
|
||||
emit('clickmodal')
|
||||
}
|
||||
|
||||
@ -63,17 +63,17 @@ interface Props {
|
||||
modelValue: string | number | Date
|
||||
// PickerView的Props 开始
|
||||
// 加载中
|
||||
loading: boolean
|
||||
loadingColor: string
|
||||
loading?: boolean
|
||||
loadingColor?: string
|
||||
// 选项总高度
|
||||
columnsHeight: number
|
||||
columnsHeight?: number
|
||||
// 选项对象中，value对应的 key
|
||||
valueKey: string
|
||||
valueKey?: string
|
||||
// 选项对象中，展示的文本对应的 key
|
||||
labelKey: string
|
||||
labelKey?: string
|
||||
// PickerView的Props 结束
|
||||
// 时间选择器的类型
|
||||
type: DateTimeType
|
||||
type?: DateTimeType
|
||||
// 自定义过滤选项的函数，返回列的选项数组
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
filter?: Function
|
||||
@ -84,18 +84,18 @@ interface Props {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
columnFormatter?: Function
|
||||
// 最小日期 20(x-10)年1月1日
|
||||
minDate: number
|
||||
minDate?: number
|
||||
// 最大日期 20(x+10)年1月1日
|
||||
maxDate: number
|
||||
maxDate?: number
|
||||
// 最小小时
|
||||
minHour: number
|
||||
minHour?: number
|
||||
// 最大小时
|
||||
maxHour: number
|
||||
maxHour?: number
|
||||
// 最小分钟
|
||||
minMinute: number
|
||||
minMinute?: number
|
||||
// 最大分钟
|
||||
maxMinute: number
|
||||
startSymbol: boolean
|
||||
maxMinute?: number
|
||||
startSymbol?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -138,60 +138,60 @@ import { deepClone, getType, isArray, isDef, isEqual, padZero } from '../common/
|
||||
import { useCell } from '../mixins/useCell'
|
||||
import { DateTimeType, getPickerValue } from '../wd-datetime-picker-view/type'
|
||||
interface Props {
|
||||
customClass: string
|
||||
customViewClass: string
|
||||
customLabelClass: string
|
||||
customValueClass: string
|
||||
customClass?: string
|
||||
customViewClass?: string
|
||||
customLabelClass?: string
|
||||
customValueClass?: string
|
||||
// 选择器左侧文案
|
||||
label?: string
|
||||
// 选择器占位符
|
||||
placeholder: string
|
||||
placeholder?: string
|
||||
// 禁用
|
||||
disabled: boolean
|
||||
disabled?: boolean
|
||||
// 只读
|
||||
readonly: boolean
|
||||
loading: boolean
|
||||
loadingColor: string
|
||||
readonly?: boolean
|
||||
loading?: boolean
|
||||
loadingColor?: string
|
||||
/* popup */
|
||||
// 弹出层标题
|
||||
title?: string
|
||||
// 取消按钮文案
|
||||
cancelButtonText: string
|
||||
cancelButtonText?: string
|
||||
// 确认按钮文案
|
||||
confirmButtonText: string
|
||||
confirmButtonText?: string
|
||||
// 是否必填
|
||||
required: boolean
|
||||
required?: boolean
|
||||
size?: string
|
||||
labelWidth: string
|
||||
useDefaultSlot: boolean
|
||||
useLabelSlot: boolean
|
||||
error: boolean
|
||||
alignRight: boolean
|
||||
closeOnClickModal: boolean
|
||||
safeAreaInsetBottom: boolean
|
||||
ellipsis: boolean
|
||||
labelWidth?: string
|
||||
useDefaultSlot?: boolean
|
||||
useLabelSlot?: boolean
|
||||
error?: boolean
|
||||
alignRight?: boolean
|
||||
closeOnClickModal?: boolean
|
||||
safeAreaInsetBottom?: boolean
|
||||
ellipsis?: boolean
|
||||
// 选项总高度
|
||||
columnsHeight: number
|
||||
columnsHeight?: number
|
||||
// 选项对象中，value对应的 key
|
||||
valueKey: string
|
||||
valueKey?: string
|
||||
// 选项对象中，展示的文本对应的 key
|
||||
labelKey: string
|
||||
labelKey?: string
|
||||
// 选中项，当 type 为 time 时，类型为字符串，否则为 时间戳
|
||||
modelValue: string | number | Date | Array<string | number | Date>
|
||||
// 时间选择器的类型
|
||||
type: DateTimeType
|
||||
type?: DateTimeType
|
||||
// 最小日期 20(x-10)年1月1日
|
||||
minDate: number
|
||||
minDate?: number
|
||||
// 最大日期 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
|
||||
filter?: Function
|
||||
@ -208,7 +208,7 @@ interface Props {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
displayFormatTabLabel?: Function
|
||||
defaultValue?: string | number | Date | Array<string | number | Date>
|
||||
zIndex: number
|
||||
zIndex?: number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -21,7 +21,7 @@ export default {
|
||||
<script lang="ts" setup>
|
||||
interface Props {
|
||||
customClass?: string
|
||||
color: string
|
||||
color?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -61,14 +61,14 @@ interface Props {
|
||||
// 当前选中的value
|
||||
modelValue?: string | number
|
||||
// 可能是 array || String
|
||||
options: Array<Record<string, any>>
|
||||
useDropItemSlot: boolean
|
||||
disabled: boolean
|
||||
iconName: string
|
||||
options?: Array<Record<string, any>>
|
||||
useDropItemSlot?: boolean
|
||||
disabled?: boolean
|
||||
iconName?: string
|
||||
title?: string
|
||||
valueKey: string
|
||||
labelKey: string
|
||||
tipKey: string
|
||||
valueKey?: string
|
||||
labelKey?: string
|
||||
tipKey?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -34,13 +34,13 @@ import { getRect } from '../common/util'
|
||||
|
||||
type DropDirction = 'up' | 'down'
|
||||
interface Props {
|
||||
customClass: string
|
||||
customStyle: string
|
||||
zIndex: number
|
||||
direction: DropDirction
|
||||
modal: boolean
|
||||
closeOnClickModal: boolean
|
||||
duration: number
|
||||
customClass?: string
|
||||
customStyle?: string
|
||||
zIndex?: number
|
||||
direction?: DropDirction
|
||||
modal?: boolean
|
||||
closeOnClickModal?: boolean
|
||||
duration?: number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -37,16 +37,16 @@ interface Props {
|
||||
customText?: string
|
||||
customIcon?: string
|
||||
customClass?: string
|
||||
icon: string
|
||||
iconSize: string
|
||||
icon?: string
|
||||
iconSize?: string
|
||||
text?: string
|
||||
url?: string
|
||||
linkType: LinkType
|
||||
useSlot: boolean
|
||||
useIconSlot: boolean
|
||||
useTextSlot: boolean
|
||||
linkType?: LinkType
|
||||
useSlot?: boolean
|
||||
useIconSlot?: boolean
|
||||
useTextSlot?: boolean
|
||||
// badge属性
|
||||
isDot: boolean
|
||||
isDot?: boolean
|
||||
type?: BadgeType
|
||||
value?: number
|
||||
max?: number
|
||||
|
||||
@ -22,11 +22,11 @@ const nextTick = () => new Promise((resolve) => setTimeout(resolve, 20))
|
||||
|
||||
interface Props {
|
||||
customClass?: string
|
||||
clickable: boolean
|
||||
square: boolean
|
||||
clickable?: boolean
|
||||
square?: boolean
|
||||
column?: number
|
||||
border: boolean
|
||||
bgColor: string
|
||||
border?: boolean
|
||||
bgColor?: string
|
||||
gutter?: number
|
||||
}
|
||||
|
||||
|
||||
@ -96,26 +96,26 @@ const TOP_PERCENT = 0.85
|
||||
interface Props {
|
||||
customClass?: string
|
||||
modelValue: boolean
|
||||
cancelButtonText: string
|
||||
confirmButtonText: string
|
||||
cancelButtonText?: string
|
||||
confirmButtonText?: string
|
||||
// 是否禁用旋转
|
||||
disabledRotate: boolean
|
||||
disabledRotate?: boolean
|
||||
/** canvas绘图参数 start **/
|
||||
// canvasToTempFilePath —— fileType
|
||||
fileType: string
|
||||
fileType?: string
|
||||
// canvasToTempFilePath —— quality
|
||||
quality: number
|
||||
quality?: number
|
||||
// 设置导出图片尺寸
|
||||
exportScale: number
|
||||
exportScale?: number
|
||||
/** 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>(), {
|
||||
@ -646,7 +646,7 @@ defineExpose({
|
||||
})
|
||||
</script>
|
||||
|
||||
<!-- #ifdef MP-WEIXIN || MP-QQ -->
|
||||
<!-- #ifdef MP-WEIXIN || MP-QQ || H5 -->
|
||||
<script module="animation" lang="wxs">
|
||||
|
||||
function setAnimation(newValue, oldValue, ownerInstance){
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: weisheng
|
||||
* @Date: 2023-06-12 10:04:19
|
||||
* @LastEditTime: 2023-08-15 13:11:35
|
||||
* @LastEditTime: 2023-08-22 22:37:02
|
||||
* @LastEditors: weisheng
|
||||
* @Description:
|
||||
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-img\wd-img.vue
|
||||
@ -32,9 +32,9 @@ interface Props {
|
||||
customStyle?: string
|
||||
customImage?: string
|
||||
src: string
|
||||
round: boolean
|
||||
mode: string
|
||||
lazyLoad: boolean
|
||||
round?: boolean
|
||||
mode?: string
|
||||
lazyLoad?: boolean
|
||||
width?: string | number
|
||||
height?: string | number
|
||||
}
|
||||
|
||||
@ -41,17 +41,17 @@ import { debounce, getType } from '../common/util'
|
||||
interface Props {
|
||||
customClass?: string
|
||||
modelValue: number | string
|
||||
min: number
|
||||
max: number
|
||||
step: number
|
||||
stepStrictly: boolean
|
||||
precision: number
|
||||
disabled: boolean
|
||||
withoutInput: boolean
|
||||
inputWidth: string | number
|
||||
allowNull: boolean
|
||||
placeholder: string
|
||||
name: string
|
||||
min?: number
|
||||
max?: number
|
||||
step?: number
|
||||
stepStrictly?: boolean
|
||||
precision?: number
|
||||
disabled?: boolean
|
||||
withoutInput?: boolean
|
||||
inputWidth?: string | number
|
||||
allowNull?: boolean
|
||||
placeholder?: string
|
||||
name?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -141,55 +141,55 @@ import { objToStyle, requestAnimationFrame } from '../common/util'
|
||||
import { useCell } from '../mixins/useCell'
|
||||
|
||||
interface Props {
|
||||
customTextareaContainerClass: string
|
||||
customTextareaClass: string
|
||||
customInputClass: string
|
||||
customLabelClass: string
|
||||
customClass: string
|
||||
customStyle: string
|
||||
customTextareaContainerClass?: string
|
||||
customTextareaClass?: string
|
||||
customInputClass?: string
|
||||
customLabelClass?: string
|
||||
customClass?: string
|
||||
customStyle?: string
|
||||
// 原生属性
|
||||
placeholder: string
|
||||
placeholder?: string
|
||||
placeholderStyle?: string
|
||||
placeholderClass: string
|
||||
autoHeight: boolean
|
||||
fixed: boolean
|
||||
cursorSpacing: number
|
||||
cursor: number
|
||||
showConfirmBar: boolean
|
||||
selectionStart: number
|
||||
selectionEnd: number
|
||||
adjustPosition: boolean
|
||||
holdKeyboard: boolean
|
||||
confirmType: string
|
||||
confirmHold: boolean
|
||||
focus: boolean
|
||||
type: string
|
||||
maxlength: number
|
||||
disabled: boolean
|
||||
alignRight: boolean
|
||||
placeholderClass?: string
|
||||
autoHeight?: boolean
|
||||
fixed?: boolean
|
||||
cursorSpacing?: number
|
||||
cursor?: number
|
||||
showConfirmBar?: boolean
|
||||
selectionStart?: number
|
||||
selectionEnd?: number
|
||||
adjustPosition?: boolean
|
||||
holdKeyboard?: boolean
|
||||
confirmType?: string
|
||||
confirmHold?: boolean
|
||||
focus?: boolean
|
||||
type?: string
|
||||
maxlength?: number
|
||||
disabled?: boolean
|
||||
alignRight?: boolean
|
||||
// 原生属性结束
|
||||
modelValue: string | number
|
||||
minlength?: number
|
||||
showPassword: boolean
|
||||
clearable: boolean
|
||||
showClear: boolean
|
||||
readonly: boolean
|
||||
useSuffixSlot: boolean
|
||||
usePrefixSlot: boolean
|
||||
showPassword?: boolean
|
||||
clearable?: boolean
|
||||
showClear?: boolean
|
||||
readonly?: boolean
|
||||
useSuffixSlot?: boolean
|
||||
usePrefixSlot?: boolean
|
||||
prefixIcon?: string
|
||||
suffixIcon?: string
|
||||
showWordLimit: boolean
|
||||
showWordCount: boolean
|
||||
showWordLimit?: boolean
|
||||
showWordCount?: boolean
|
||||
suffix?: string
|
||||
suffixCount?: number
|
||||
label?: string
|
||||
labelWidth: string
|
||||
useLabelSlot: boolean
|
||||
labelWidth?: string
|
||||
useLabelSlot?: boolean
|
||||
size?: string
|
||||
error: boolean
|
||||
center: boolean
|
||||
noBorder: boolean
|
||||
required: boolean
|
||||
error?: boolean
|
||||
center?: boolean
|
||||
noBorder?: boolean
|
||||
required?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -23,15 +23,16 @@ export default {
|
||||
<script lang="ts" setup>
|
||||
interface Props {
|
||||
show: boolean
|
||||
duration: Record<string, number> | number | boolean
|
||||
zIndex: number
|
||||
duration?: Record<string, number> | number | boolean
|
||||
zIndex?: number
|
||||
customStyle?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
show: false,
|
||||
duration: 300,
|
||||
zIndex: 10
|
||||
zIndex: 10,
|
||||
customStyle: ''
|
||||
})
|
||||
|
||||
const emit = defineEmits(['click'])
|
||||
|
||||
@ -36,12 +36,12 @@ type NoticeBarType = 'warning' | 'info' | 'danger' | ''
|
||||
interface Props {
|
||||
customClass?: string
|
||||
text?: string
|
||||
type: NoticeBarType
|
||||
scrollable: boolean
|
||||
delay: number
|
||||
speed: number
|
||||
closable: boolean
|
||||
wrapable: boolean
|
||||
type?: NoticeBarType
|
||||
scrollable?: boolean
|
||||
delay?: number
|
||||
speed?: number
|
||||
closable?: boolean
|
||||
wrapable?: boolean
|
||||
prefix?: string
|
||||
color?: string
|
||||
backgroundColor?: string
|
||||
|
||||
@ -57,14 +57,14 @@ import { ref, watch } from 'vue'
|
||||
interface Props {
|
||||
customClass?: string
|
||||
modelValue: number // 当前页
|
||||
totalPage: number
|
||||
showIcon: boolean // 是否展示分页为Icon图标
|
||||
showMessage: boolean
|
||||
total: number
|
||||
pageSize: number
|
||||
prevText: string
|
||||
nextText: string
|
||||
hideIfOnePage: boolean
|
||||
totalPage?: number
|
||||
showIcon?: boolean // 是否展示分页为Icon图标
|
||||
showMessage?: boolean
|
||||
total?: number
|
||||
pageSize?: number
|
||||
prevText?: string
|
||||
nextText?: string
|
||||
hideIfOnePage?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -49,14 +49,14 @@ import { ColumnItem, formatArray } from './type'
|
||||
interface Props {
|
||||
customClass?: string
|
||||
// 加载中
|
||||
loading: boolean
|
||||
loadingColor: string
|
||||
loading?: boolean
|
||||
loadingColor?: string
|
||||
// 选项总高度
|
||||
columnsHeight: number
|
||||
columnsHeight?: number
|
||||
// 选项对象中，value对应的 key
|
||||
valueKey: string
|
||||
valueKey?: string
|
||||
// 选项对象中，展示的文本对应的 key
|
||||
labelKey: string
|
||||
labelKey?: string
|
||||
// 初始值
|
||||
modelValue: string | number | boolean | Array<string | number | boolean>
|
||||
// 选择器数据
|
||||
|
||||
@ -91,44 +91,44 @@ interface Props {
|
||||
// 选择器左侧文案
|
||||
label?: string
|
||||
// 选择器占位符
|
||||
placeholder: string
|
||||
placeholder?: string
|
||||
// 禁用
|
||||
disabled: boolean
|
||||
disabled?: boolean
|
||||
// 只读
|
||||
readonly: boolean
|
||||
loading: boolean
|
||||
loadingColor: string
|
||||
readonly?: boolean
|
||||
loading?: boolean
|
||||
loadingColor?: string
|
||||
/* popup */
|
||||
// 弹出层标题
|
||||
title?: string
|
||||
// 取消按钮文案
|
||||
cancelButtonText: string
|
||||
cancelButtonText?: string
|
||||
// 确认按钮文案
|
||||
confirmButtonText: string
|
||||
confirmButtonText?: string
|
||||
// 是否必填
|
||||
required: boolean
|
||||
required?: boolean
|
||||
size?: string
|
||||
labelWidth?: string
|
||||
useDefaultSlot: boolean
|
||||
useLabelSlot: boolean
|
||||
error: boolean
|
||||
alignRight: boolean
|
||||
useDefaultSlot?: boolean
|
||||
useLabelSlot?: boolean
|
||||
error?: boolean
|
||||
alignRight?: boolean
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
beforeConfirm?: Function
|
||||
closeOnClickModal: boolean
|
||||
safeAreaInsetBottom: boolean
|
||||
ellipsis: boolean
|
||||
closeOnClickModal?: boolean
|
||||
safeAreaInsetBottom?: boolean
|
||||
ellipsis?: boolean
|
||||
|
||||
// 选项总高度
|
||||
columnsHeight: number
|
||||
columnsHeight?: number
|
||||
// 选项对象中，value对应的 key
|
||||
valueKey: string
|
||||
valueKey?: string
|
||||
// 选项对象中，展示的文本对应的 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
|
||||
columnChange?: Function
|
||||
@ -136,13 +136,15 @@ interface Props {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
displayFormat?: Function
|
||||
// 自定义层级
|
||||
zIndex: number
|
||||
zIndex?: number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
modelValue: '',
|
||||
customClass: '',
|
||||
customViewClass: '',
|
||||
customLabelClass: '',
|
||||
customValueClass: '',
|
||||
// 选择器占位符
|
||||
placeholder: '请选择',
|
||||
// 禁用
|
||||
|
||||
@ -88,16 +88,16 @@ interface Props {
|
||||
customPop?: string
|
||||
customClass?: string
|
||||
// 是否显示 popover 箭头
|
||||
visibleArrow: boolean
|
||||
visibleArrow?: boolean
|
||||
// 显示内容
|
||||
content: string | Record<string, any>[]
|
||||
placement: PlacementType
|
||||
offset: number
|
||||
useContentSlot: boolean
|
||||
disabled: boolean
|
||||
showClose: boolean
|
||||
placement?: PlacementType
|
||||
offset?: number
|
||||
useContentSlot?: boolean
|
||||
disabled?: boolean
|
||||
showClose?: boolean
|
||||
modelValue: boolean
|
||||
mode: PopoverMode
|
||||
mode?: PopoverMode
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
customClass: '',
|
||||
|
||||
@ -31,19 +31,19 @@ import { isObj, requestAnimationFrame } from '../common/util'
|
||||
|
||||
interface Props {
|
||||
transition?: string
|
||||
closable: boolean
|
||||
position: string
|
||||
closeOnClickModal: boolean
|
||||
duration: number | boolean
|
||||
modal: boolean
|
||||
zIndex: number
|
||||
hideWhenClose: boolean
|
||||
modalStyle: string
|
||||
safeAreaInsetBottom: boolean
|
||||
closable?: boolean
|
||||
position?: string
|
||||
closeOnClickModal?: boolean
|
||||
duration?: number | boolean
|
||||
modal?: boolean
|
||||
zIndex?: number
|
||||
hideWhenClose?: boolean
|
||||
modalStyle?: string
|
||||
safeAreaInsetBottom?: boolean
|
||||
modelValue: boolean
|
||||
customStyle: string
|
||||
lazyRender: boolean
|
||||
customClass: string
|
||||
customStyle?: string
|
||||
lazyRender?: boolean
|
||||
customClass?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -34,10 +34,10 @@ type ProgressStatus = 'success' | 'danger' // 状态类型
|
||||
|
||||
interface Props {
|
||||
customClass?: string
|
||||
percentage: number
|
||||
percentage?: number
|
||||
hideText?: boolean
|
||||
color?: string | string[] | Record<string, any>[]
|
||||
duration: number
|
||||
duration?: number
|
||||
status?: ProgressStatus
|
||||
}
|
||||
|
||||
|
||||
@ -21,12 +21,12 @@ type RadioShape = 'dot' | 'button' | 'check'
|
||||
interface Props {
|
||||
customClass?: string
|
||||
modelValue: string | number | boolean
|
||||
shape: RadioShape
|
||||
checkedColor: string
|
||||
disabled: boolean
|
||||
cell: boolean
|
||||
size: string
|
||||
inline: boolean
|
||||
shape?: RadioShape
|
||||
checkedColor?: string
|
||||
disabled?: boolean
|
||||
cell?: boolean
|
||||
size?: string
|
||||
inline?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -39,10 +39,10 @@ interface Props {
|
||||
value?: string | number | boolean
|
||||
shape?: RadioShape
|
||||
checkedColor?: string
|
||||
disabled: boolean | null
|
||||
cell: boolean | null
|
||||
disabled?: boolean | null
|
||||
cell?: boolean | null
|
||||
size?: string
|
||||
inline: boolean | null
|
||||
inline?: boolean | null
|
||||
maxWidth?: string
|
||||
}
|
||||
|
||||
|
||||
@ -33,17 +33,17 @@ import { computed, ref, watch } from 'vue'
|
||||
|
||||
interface Props {
|
||||
customClass?: string
|
||||
num: number
|
||||
num?: number
|
||||
modelValue: string | number | null
|
||||
readonly: boolean
|
||||
size: string
|
||||
space: string
|
||||
color: string
|
||||
activeColor: string | Array<string>
|
||||
icon: string
|
||||
activeIcon: string
|
||||
disabled: boolean
|
||||
disabledColor: string
|
||||
readonly?: boolean
|
||||
size?: string
|
||||
space?: string
|
||||
color?: string
|
||||
activeColor?: string | Array<string>
|
||||
icon?: string
|
||||
activeIcon?: string
|
||||
disabled?: boolean
|
||||
disabledColor?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -63,18 +63,18 @@ import { computed, ref, watch } from 'vue'
|
||||
import { requestAnimationFrame } from '../common/util'
|
||||
|
||||
interface Props {
|
||||
useActionSlot: boolean
|
||||
useLabelSlot: boolean
|
||||
userSuffixSlot: boolean
|
||||
placeholder: string
|
||||
cancelTxt: string
|
||||
light: boolean
|
||||
hideCancel: boolean
|
||||
disabled: boolean
|
||||
maxlength: number | string
|
||||
modelValue: string
|
||||
placeholderLeft: boolean
|
||||
customClass: string
|
||||
useActionSlot?: boolean
|
||||
useLabelSlot?: boolean
|
||||
userSuffixSlot?: boolean
|
||||
placeholder?: string
|
||||
cancelTxt?: string
|
||||
light?: boolean
|
||||
hideCancel?: boolean
|
||||
disabled?: boolean
|
||||
maxlength?: number | string
|
||||
modelValue?: string
|
||||
placeholderLeft?: boolean
|
||||
customClass?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -110,40 +110,40 @@ interface Props {
|
||||
customLabelClass?: string
|
||||
customValueClass?: string
|
||||
label?: string
|
||||
labelWidth: string
|
||||
disabled: boolean
|
||||
readonly: boolean
|
||||
placeholder: string
|
||||
labelWidth?: string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
placeholder?: string
|
||||
title?: string
|
||||
alignRight: boolean
|
||||
error: boolean
|
||||
required: boolean
|
||||
useLabelSlot: boolean
|
||||
useDefaultSlot: boolean
|
||||
alignRight?: boolean
|
||||
error?: boolean
|
||||
required?: boolean
|
||||
useLabelSlot?: boolean
|
||||
useDefaultSlot?: boolean
|
||||
size?: string
|
||||
checkedColor: string
|
||||
min: number
|
||||
max: number
|
||||
checkedColor?: string
|
||||
min?: number
|
||||
max?: number
|
||||
selectSize?: string
|
||||
loading: boolean
|
||||
loadingColor: string
|
||||
closeOnClickModal: boolean
|
||||
loading?: boolean
|
||||
loadingColor?: string
|
||||
closeOnClickModal?: boolean
|
||||
modelValue: Array<number | boolean | string> | number | boolean | string
|
||||
columns: Array<Record<string, any>>
|
||||
type: SelectPickerType
|
||||
valueKey: string
|
||||
labelKey: string
|
||||
confirmButtonText: string
|
||||
type?: SelectPickerType
|
||||
valueKey?: string
|
||||
labelKey?: string
|
||||
confirmButtonText?: string
|
||||
// 外部展示格式化函数
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
displayFormat?: Function
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
beforeConfirm?: Function
|
||||
zIndex: number
|
||||
safeAreaInsetBottom: boolean
|
||||
filterable: boolean
|
||||
filterPlaceholder: string
|
||||
ellipsis: boolean
|
||||
zIndex?: number
|
||||
safeAreaInsetBottom?: boolean
|
||||
filterable?: boolean
|
||||
filterPlaceholder?: string
|
||||
ellipsis?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -62,14 +62,14 @@ interface Props {
|
||||
customMinClass?: string
|
||||
customMaxClass?: string
|
||||
customClass?: string
|
||||
hideMinMax: boolean
|
||||
hideLabel: boolean
|
||||
disabled: boolean
|
||||
inactiveColor: string
|
||||
activeColor: string
|
||||
max: number
|
||||
min: number
|
||||
step: number
|
||||
hideMinMax?: boolean
|
||||
hideLabel?: boolean
|
||||
disabled?: boolean
|
||||
inactiveColor?: string
|
||||
activeColor?: string
|
||||
max?: number
|
||||
min?: number
|
||||
step?: number
|
||||
modelValue: number | number[]
|
||||
}
|
||||
|
||||
|
||||
@ -26,11 +26,11 @@ export default {
|
||||
<script lang="ts" setup>
|
||||
interface Props {
|
||||
customClass?: string
|
||||
title: string
|
||||
title?: string
|
||||
modelValue: number
|
||||
allowReset: boolean
|
||||
descFirst: boolean
|
||||
line: boolean
|
||||
allowReset?: boolean
|
||||
descFirst?: boolean
|
||||
line?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -31,10 +31,10 @@ import { ref, watch } from 'vue'
|
||||
type StatusTipType = 'search' | 'network' | 'content' | 'collect' | 'comment' | 'halo' | 'message'
|
||||
|
||||
interface Props {
|
||||
customClass: string
|
||||
customStyle: string
|
||||
type: StatusTipType
|
||||
tip: string
|
||||
customClass?: string
|
||||
customStyle?: string
|
||||
type?: StatusTipType
|
||||
tip?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -53,9 +53,9 @@ interface Props {
|
||||
description?: string
|
||||
icon?: string
|
||||
status?: StepStatus
|
||||
iconSlot: boolean
|
||||
titleSlot: boolean
|
||||
descriptionSlot: boolean
|
||||
iconSlot?: boolean
|
||||
titleSlot?: boolean
|
||||
descriptionSlot?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -27,11 +27,11 @@ import { getCurrentInstance, provide, watch } from 'vue'
|
||||
|
||||
interface Props {
|
||||
customClass?: string
|
||||
active: number
|
||||
vertical: boolean
|
||||
dot: boolean
|
||||
active?: number
|
||||
vertical?: boolean
|
||||
dot?: boolean
|
||||
space?: string
|
||||
alignCenter: boolean
|
||||
alignCenter?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -33,8 +33,8 @@ import { addUnit, getRect, objToStyle } from '../common/util'
|
||||
interface Props {
|
||||
customStyle?: string
|
||||
customClass?: string
|
||||
zIndex: number
|
||||
offsetTop: number
|
||||
zIndex?: number
|
||||
offsetTop?: number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
@ -52,9 +52,9 @@ const width = ref<number>(0)
|
||||
const observerList = ref<UniApp.IntersectionObserver[]>([])
|
||||
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
|
||||
const observerForChild: Function | null = inject('observerForChild') || null
|
||||
const observerForChild: Function | null = inject('observerForChild', null)
|
||||
|
||||
const { proxy } = getCurrentInstance() as any
|
||||
const instance = getCurrentInstance() as any
|
||||
|
||||
@ -35,7 +35,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<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 { useTouch } from '../mixins/useTouch'
|
||||
import { getRect } from '../common/util'
|
||||
@ -44,8 +44,8 @@ interface Props {
|
||||
customClass?: string
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
beforeClose?: Function
|
||||
disabled: boolean
|
||||
modelValue: string
|
||||
disabled?: boolean
|
||||
modelValue?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -20,15 +20,15 @@ import { getType, objToStyle } from '../common/util'
|
||||
|
||||
interface Props {
|
||||
modelValue: boolean | string | number
|
||||
disabled: boolean
|
||||
activeValue: boolean | string | number
|
||||
inactiveValue: boolean | string | number
|
||||
disabled?: boolean
|
||||
activeValue?: boolean | string | number
|
||||
inactiveValue?: boolean | string | number
|
||||
activeColor?: string
|
||||
inactiveColor?: string
|
||||
size: string
|
||||
size?: string
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
beforeChange?: Function
|
||||
customClass: string
|
||||
customClass?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -27,7 +27,7 @@ interface Props {
|
||||
// tab的label
|
||||
title?: string
|
||||
// tab禁用，无法点击
|
||||
disabled: boolean
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -143,19 +143,19 @@ interface Props {
|
||||
// 绑定值
|
||||
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
|
||||
inactiveColor?: string
|
||||
}
|
||||
|
||||
@ -40,17 +40,17 @@ import { objToStyle } from '../common/util'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
|
||||
interface Props {
|
||||
useIconSlot: boolean
|
||||
useIconSlot?: boolean
|
||||
type?: string
|
||||
icon?: string
|
||||
closable: boolean
|
||||
plain: boolean
|
||||
dynamic: boolean
|
||||
closable?: boolean
|
||||
plain?: boolean
|
||||
dynamic?: boolean
|
||||
color?: string
|
||||
bgColor?: string
|
||||
round: boolean
|
||||
mark: boolean
|
||||
customClass: string
|
||||
round?: boolean
|
||||
mark?: boolean
|
||||
customClass?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -55,19 +55,19 @@ type PlacementType =
|
||||
| 'right-end'
|
||||
|
||||
interface Props {
|
||||
customStyle: string
|
||||
customArrow: string
|
||||
customPop: string
|
||||
customClass: string
|
||||
customStyle?: string
|
||||
customArrow?: string
|
||||
customPop?: string
|
||||
customClass?: string
|
||||
// 是否显示 popover 箭头
|
||||
visibleArrow: boolean
|
||||
visibleArrow?: boolean
|
||||
// 显示内容
|
||||
content?: Record<string, any>[] | string
|
||||
placement: PlacementType
|
||||
offset: number
|
||||
useContentSlot: boolean
|
||||
disabled: boolean
|
||||
showClose: boolean
|
||||
placement?: PlacementType
|
||||
offset?: number
|
||||
useContentSlot?: boolean
|
||||
disabled?: boolean
|
||||
showClose?: boolean
|
||||
modelValue: boolean
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
@ -51,11 +51,11 @@ type TransitionName =
|
||||
| 'zoom-out'
|
||||
|
||||
interface Props {
|
||||
show: boolean
|
||||
show?: boolean
|
||||
duration?: Record<string, number> | number | boolean
|
||||
name: TransitionName | ''
|
||||
customStyle: string
|
||||
lazyRender: boolean
|
||||
name?: TransitionName | ''
|
||||
customStyle?: string
|
||||
lazyRender?: boolean
|
||||
customClass?: string
|
||||
// 定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
|
||||
enterClass?: string
|
||||
|
||||
@ -56,31 +56,31 @@ import { context, getType, isDef, isEqual } from '../common/util'
|
||||
import { chooseFile } from './utils'
|
||||
|
||||
interface Props {
|
||||
customClass: string
|
||||
customEvokeClass: string
|
||||
customPreviewClass: string
|
||||
customClass?: string
|
||||
customEvokeClass?: string
|
||||
customPreviewClass?: string
|
||||
// 多选
|
||||
multiple: boolean
|
||||
multiple?: boolean
|
||||
// 接受类型 暂定接受类型为图片，视频后续添加
|
||||
accept: string
|
||||
sizeType: Array<string>
|
||||
sourceType: Array<string>
|
||||
header: Record<string, any>
|
||||
name: string
|
||||
formData: Record<string, any>
|
||||
accept?: string
|
||||
sizeType?: Array<string>
|
||||
sourceType?: Array<string>
|
||||
header?: Record<string, any>
|
||||
name?: string
|
||||
formData?: Record<string, any>
|
||||
// 上传相关
|
||||
action: string
|
||||
fileList: Record<string, any>[]
|
||||
statusKey: string
|
||||
maxSize: number
|
||||
fileList?: Record<string, any>[]
|
||||
statusKey?: string
|
||||
maxSize?: number
|
||||
limit?: number
|
||||
showLimitMum: boolean
|
||||
disabled: boolean
|
||||
useDefaultSlot: boolean
|
||||
showLimitMum?: boolean
|
||||
disabled?: boolean
|
||||
useDefaultSlot?: boolean
|
||||
// loading 相关
|
||||
loadingType: string
|
||||
loadingColor: string
|
||||
loadingSize: string
|
||||
loadingType?: string
|
||||
loadingColor?: string
|
||||
loadingSize?: string
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
beforePreview?: Function
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
|
||||
@ -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://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>
|
||||
|
||||
<a href="https://github.com/Moonofweisheng/wot-design-uni">
|
||||
<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 align="center">
|
||||
🔥 <a href="https://wot-design-uni.netlify.app/">文档网站 (Netlify)</a>
|
||||
</p>
|
||||
|
||||
|
||||
## ✨ 特性
|
||||
|
||||
- 🚀 支持 APP、H5、微信小程序、支付宝小程序、钉钉小程序 等平台.
|
||||
- 🚀 支持 APP、H5、微信小程序 等平台.
|
||||
- 🚀 50+ 个高质量组件，覆盖移动端主流场景.
|
||||
- 💪 使用 Typescript 构建，提供良好的组件类型系统.
|
||||
- 💪 采用 Vue3 最新特性，提升组件性能.
|
||||
- 📖 提供丰富的文档和组件示例.
|
||||
- 🎨 支持主题定制，可以定制scss变量以及组件的样式自定义.
|
||||
- 🎨 支持主题定制，可以定制 scss 变量以及组件的样式自定义.
|
||||
- 🍭 支持暗黑模式
|
||||
|
||||
## 📱 预览
|
||||
|
||||
手机扫描上的二维码访问演示：
|
||||
|
||||
|
||||
扫描二维码访问演示：
|
||||
|
||||
<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/alipay.png" width="200" height="200" />
|
||||
</p>
|
||||
|
||||
|
||||
## 安装
|
||||
|
||||
```bash
|
||||
yarn add wot-design-uni
|
||||
```
|
||||
|
||||
## 快速上手
|
||||
|
||||
详细说明见 [快速上手](https://wot-design-uni.netlify.app/guide/quickUse.html)
|
||||
@ -51,5 +63,3 @@ yarn add wot-design-uni
|
||||
## LICENSE
|
||||
|
||||
[MIT](https://github.com/Moonofweisheng/wot-design-uni/blob/develop/LICENSE)
|
||||
|
||||
|
||||
|
||||
@ -3084,6 +3084,11 @@
|
||||
resolved "https://registry.npmmirror.com/@vant/area-data/-/area-data-1.4.1.tgz#b4f1bce05dbb147dc08fd2ed9b2a0f63d3329b29"
|
||||
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":
|
||||
version "4.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@vitejs/plugin-legacy/-/plugin-legacy-4.1.1.tgz#27aad7ab082d2d554cf48a8e4f1c0ae9f3eca522"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user