docs: ✏️ 演示文档补充

2025-12-06 17:18:40 +08:00 · 2023-07-25 19:47:50 +08:00 · 2023-07-25 19:47:50 +08:00 · b811c8e983
commit b811c8e983
parent 8e2e310c89
29 changed files with 145 additions and 281 deletions
--- a/docs/docs/actionSheet.md
+++ b/docs/docs/actionSheet.md
@ -3,7 +3,7 @@

 ### 基本用法

-通过 `show` 属性设置显示隐藏，监听 `bind:close` 事件，隐藏菜单。
+通过 `show` 属性设置显示隐藏，监听 `close` 事件，隐藏菜单。

 `actions` 类型为 `Array`，数组内部对象结构如下：

@ -14,8 +14,8 @@
 | color | string | 颜色 | - |

 ```html
-<wd-button bind:click="showActions">弹出菜单</wd-button>
-<wd-action-sheet show="{{ show }}" actions="{{ actions }}" bind:close="close" />
+<wd-button @click="showActions">弹出菜单</wd-button>
+<wd-action-sheet :show="show" :actions="actions" @close="close" />
 ```

 ```javascript
@ -54,8 +54,8 @@ page({
 可以设置 颜色、禁用、加载 等状态。

 ```html
-<wd-button bind:click="showActions">弹出菜单</wd-button>
-<wd-action-sheet show="{{ show }}" actions="{{ actions }}" bind:close="close" />
+<wd-button @click="showActions">弹出菜单</wd-button>
+<wd-action-sheet :show="show" :actions="actions" @close="close" />
 ```

 ```javascript
@ -93,9 +93,9 @@ page({

 ```html
 <wd-action-sheet
-  show="{{ show }}"
-  actions="{{ actions }}"
-  bind:close="close"
+  :show="show"
+  :actions="actions"
+  @close="close"
  cancel-text="取消" />
 ```

@ -110,8 +110,8 @@ page({


 ```html
-<wd-button bind:click="showActions">弹出菜单</wd-button>
-<wd-action-sheet show="{{ show }}" panels="{{ panels }}" bind:close="close" bind:select="select" />
+<wd-button @click="showActions">弹出菜单</wd-button>
+<wd-action-sheet :show="show" :panels="panels" @close="close" @select="select" />
 ```

 ```javascript
@ -151,8 +151,8 @@ page({
 | title | string | 标题 | - |

 ```html
-<wd-button bind:click="showActions">弹出菜单</wd-button>
-<wd-action-sheet show="{{ show }}" panels="{{ panels }}" bind:close="close" bind:select="select" />
+<wd-button @click="showActions">弹出菜单</wd-button>
+<wd-action-sheet :show="show" :panels="panels" @close="close" @select="select" />
 ```

 ```javascript
@ -195,7 +195,7 @@ page({
 设置 `title` 展示标题。

 ```html
-<wd-action-sheet show="{{ show }}" title="标题" bind:close="close">
+<wd-action-sheet :show="show" title="标题" @close="close">
  <view style="padding: 15px 15px 150px 15px;">内容</view>
 </wd-action-sheet>
 ```
@ -220,13 +220,13 @@ page({

 | 事件名称 | 说明 | 参数 | 最低版本 |
 |---------|-----|-----|---------|
-| bind:select | 点击选项时触发 | 菜单选项或自定义面板一维数组 （item: 选项对象, index: 选项下标），自定义面板二维数组（item: 选项对象, rowIndex: 选项行下标, colIndex选项列下标）| - |
-| bind:open | 弹出层打开时触发 | - | - |
-| bind:opened | 弹出层打开动画结束时触发 | - | - |
-| bind:close | 弹出层关闭时触发 | - | - |
-| bind:closed | 弹出层关闭动画结束时触发 | - | - |
-| bind:clickmodal | 点击遮罩时触发 | - | - |
-| bind:cancel | 点击取消按钮时触发 | - | - |
+| select | 点击选项时触发 | 菜单选项或自定义面板一维数组 （item: 选项对象, index: 选项下标），自定义面板二维数组（item: 选项对象, rowIndex: 选项行下标, colIndex选项列下标）| - |
+| open | 弹出层打开时触发 | - | - |
+| opened | 弹出层打开动画结束时触发 | - | - |
+| close | 弹出层关闭时触发 | - | - |
+| closed | 弹出层关闭动画结束时触发 | - | - |
+| clickmodal | 点击遮罩时触发 | - | - |
+| cancel | 点击取消按钮时触发 | - | - |

 ### Action 数据结构

--- a/docs/docs/commonProblems.md
+++ b/docs/docs/commonProblems.md
@ -1,183 +1,60 @@
 ## 常见问题FAQ

-本节介绍在小程序开发过程当中遇到的部分 **常见问题** 以及 **解决办法**
+本节介绍在开发过程当中遇到的部分 **常见问题** 以及 **解决办法**

-## 小程序框架

-### 数据流
+### 小程序样式隔离

-小程序非双向绑定，对于表单类组件如 input 给其绑定 `value` 属性，在组件页面值更改后，需要更新绑定 `value` 的变量。
-
-以`input`为例：
-
-```javascript
-page({
-  data: {
-    value: '',
-  },
-  handleChange ({ detail }) {
-    this.setData({
-      value: detail
-    })
-  }
-})
-```
-
-```html
-<wd-input 
-  type="text"
-  value="{{ value }}"
-  placeholder="请输入..."
-  bind:change="handleChange"/>
-```
-
-### 在 data 定义的函数变量获取 this
-
-方式一：
-
-```javascript
-let self
-
-Page({
-  data: {
-    myFunction () {
-      self.setData({})
-    }
-  },
-  onLoad () {
-    self = this
-  }
-})
-```
-
-方式二：
-
-```javascript
-Page({
-  data: {
-    myFunction: null
-  },
-  onLoad () {
-    this.setData({
-      myFunction: (function () {
-        this.setData({})
-      }).bind(this)
-    })
-  }
-})
-```
-
-### input
-
-#### input获取焦点时，文案闪烁
-
-因为小程序的 input 组件在展示的时候，是 web组件，当获取焦点后，在上面覆盖1个原生input组件，所以实际上 placeholder 闪烁 是因为小程序框架在切换 web组件 和 原生组件。
-
-#### password模式无法关闭
-
-```html
-<input password="{{ show }}" />
- ```
-
-```javascript
-Page({
-  data: {
-    show: true
-  },
-  methods: {
-    click () {
-      this.setData({ show: !this.data.show }) 
-    }
-  }
-})
- ```
-
-**参考解决办法：**
-* 使用两个input来回切换
-
-#### password模式下，安卓机输入焦点前移 ？
-
-问题已提交京东小程序，待修复
-
-### textarea
-
-#### textarea在真机上无法被遮挡 ？
-
-`textarea` 是原生组件无法被遮盖，层级是最高的，[官网链接](https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html)
-
-**参考解决办法：**
-* 遮盖：用`cover-view` 标签 代替 `view`
-* 隐藏：弹出式隐藏 `textarea`
-
-#### slot渲染位置不正确 ? 内部样式不生效 ？
-
-使用组件插槽，插槽没有渲染到指定位置，样式不生效，已输入框前后插槽为例：
-
-```html
-<wd-input
-  value="{{ value }}"
-  clearable
-  use-suffix-slot
-  use-prefix-slot
-  bind:change="handleChange">
-    <view slot="prefix">1</view>
-    <view slot="suffix">2</view>
-</wd-input>
-```
-
-此时插槽样式不生效，1/2数字没有在input两端，在生成文档时可以看到，插槽被放到组件文档的尾部。
-
-**参考解决办法：**
-
-* 添加外部样式类 `custom-suffix-class`，可以在外部设置想要的样式
-
-```html
-<wd-input
-  value="{{ value }}"
-  clearable
-  use-suffix-slot
-  use-prefix-slot
-  custom-suffix-class="suffix-slot"
-  bind:change="handleChange">
-    <view slot="prefix">1</view>
-    <view slot="suffix">2</view>
-</wd-input>
+#### 在页面中使用 Wot Design Uni 组件时，可直接在页面的样式文件中覆盖样式
+```vue
+<wd-button type="primary">主要按钮</wd-button>
 ```

 ```css
-/* 插槽样式 */
-.suffix-slot{
-  display: inline-block;
-  margin-left: 8px;
-  vertical-align: middle;
+/* 页面样式 */
+:deep(.wd-button) {
+  color: red !important;
 }
 ```

-### pickerView组件
+#### 在自定义组件中使用 Wot Design Uni 组件时，需开启`styleIsolation: 'shared'`选项

-* 如果某一列(以下简称列)中有10个选项，而且列当前选中第10项。如果此时把列的选项个数修改后还剩下3个，那么选中项会由第10项滑落到第3项，同时触发change事件。
-* 修改原生pickerView的columns，当手动触发change事件时，callback中的的event.detail表示的数组长度是修改columns之前的长度,所以event.detail的长度并不会跟随并不会columns缩减。
+```vue
+<wd-button type="primary">主要按钮</wd-button>
+```

-## 样式
-
-### 非法选择器
-
-在1.0.0版本下，当使用小程序不支持的CSS选择器时，整个GUI进程会崩掉，如下如所示。
+```ts
+<script lang="ts">
+export default {
+  options: {
+    styleIsolation: 'shared'
+  }
+}
+</script>
+```

 ```css
-::-webkit-scrollbar {
-  width:0;
-  height:0;
-  color:transparent;
+/* 组件样式 */
+:deep(.wd-button) {
+  color: red !important;
 }
 ```

-以上代码会在控制台异常抛出
+### 使用外部样式类
+Wot Design Uni 开放了大量的自定义样式类供开发者使用，具体的样式类名称可查阅对应组件的“外部样式类”部分。需要注意的是普通样式类和自定义样式类的优先级是未定义的，因此使用时请添加`!important`以保证外部样式类的优先级。

+```vue
+<wd-button custom-class="custom-button" type="primary">主要按钮</wd-button>
 ```
-Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.
+```css
+/* 组件样式 */
+:deep(.custom-button) {
+  color: red !important;
+}
 ```

+
+
 ### 关于我们

-**如果您的问题不在上述列表中或您有更好的建议，请联系我们 [ftf@jd.com](mailto:ftf@jd.com)**
+**如果您的问题不在上述列表中或您有更好的建议，请联系我们 [Moonofweisheng](https://github.com/Moonofweisheng/wot-design-uni)**
--- a/docs/docs/customTheme.md
+++ b/docs/docs/customTheme.md
@ -118,22 +118,12 @@ Wot Design Uni 每1个组件基本都有自定义类名 custom-class，可以在
  <li class="color-group-line" style="background: rgba(255,255,255,0.02);color: rgba(255,255,255,0.65)">2%<div>表头填充色</div></li>
 </ul>

-#### clone 组件库工程
+#### 自定义 Sass 变量

-小程序组件库需要将工程clone到本地，开发者自己修改 `packages/common/abstracts/_variable.scss` 文件中的scss变量，通过本地打包重新构建一份自定义主题的组件库代码。
+开发者自己参考 `@/uni_modules/wot-design-uni/components/common/abstracts/variable.scss` 文件中的scss变量`uni.scss`文件中重新定义一份自定义主题变量。
+例如：
+```scss
+// uni.scss
+$-color-success: red !default;

-```bash
-git clone https://github.com/Moonofweisheng/wot-design-uni.git
-cd wot-design-uni
-npm i
 ```
-
-安装完依赖后，修改 _variable.scss 文件，之后进行打包：
-
-```bash
-npm run build:jd
-```
-
-之后会在工程的根目录下生成 `lib` 文件夹，将文件夹名字改为 `wot-design`，将其复制到你的工程中即可。
-
-> 如果要构建微信版本，执行 `npm run build:wx`，生成的文件夹名字为 `lib-wx`
--- a/docs/docs/quickUse.md
+++ b/docs/docs/quickUse.md
@ -1,54 +1,22 @@
-<!--
- * @Author: weisheng
- * @Date: 2023-07-20 00:34:54
- * @LastEditTime: 2023-07-20 19:04:58
- * @LastEditors: weisheng
- * @Description: 
- * @FilePath: \wot-design-uni\docs\docs\quickUse.md
- * 记得注释
-->
 ## 快速上手

 本节介绍如何在`uni-app`项目中使用 `Wot Design Uni`

-### 下载组件库项目
+### 安装

-通过 `github`下载组件库源码：
+`Wot Design Uni` 支持 uni_modules 规范，已经上架到 uni-app 的插件市场，故我们推荐使用 uni_modules 的方式引入，方便更新。

-* 进入[下载页面](https://github.com/Moonofweisheng/wot-design-uni/releases)，选择合适版本的源码。
-
-* 将下载的源码解压缩，将解压后得到到`wot-design` 文件夹复制到你的小程序工程中如下结构：
-
-```node
-.
-├── app.js
-├── app.json
-├── app.wxss
-├── wot-design               # wot-design 组件库源码文件夹
-|   └── button               # button 组件源码
-|       ├── index.js
-|       ├── index.json
-|       ├── index.jxml
-|       └── index.jxss
-├── pages                    # 小程序项目页面使用目录
-├── project.config.json
-└── sitemap.json
+在`uni-app插件市场`选择使用`HBuildX`导入，或者选择手动在src目录下创建uni_modules文件夹并将Wot Design Uni解压到uni_modules中，结构如下:
+``` 
+- uni_modules
+- - - wot-design-uni 
 ```

-在页面的 index.json 文件中引入需要使用的组件：
+下载地址：<a href="https://ext.dcloud.net.cn/plugin?id=11489"><span >wot-design-uni</span></a>

-```json
-{
-  "usingComponents": {
-    "wd-button": "/wot-design/button/index"
-  }
-}
-```
-
-在页面中就可以使用该组件：
-
-```html
-<view>
-  <wd-button>按钮</wd-button>
-</view>
+
+### 使用
+完成前四步之后就可以开始使用`Wot Design Uni`了。`Wot Design Uni`的组件支持easycom规范，故可以直接在.vue中使用，无需在页面内import，也不需要在components内声明，即可在任意页面使用。值得注意的是，uni-app平台不支持全局挂载组件，所以```Message```、```Toast```等组件仍需在SFC中显式使用，例如:
+``` html
+<wd-toast></wd-toast>
 ```
--- a/src/pages/actionSheet/Index.vue
+++ b/src/pages/actionSheet/Index.vue
@ -29,7 +29,7 @@
  </view>
 </template>
 <script lang="ts" setup>
-import { useToast } from '@/uni_modules/wot-design-uni/components/wd-toast'
+import { useToast } from '@/uni_modules/wot-design-uni'
 import { ref } from 'vue'

 const show = ref<boolean>(false)
--- a/src/pages/calendar/Index.vue
+++ b/src/pages/calendar/Index.vue
@ -46,10 +46,8 @@
  </demo-block>
 </template>
 <script lang="ts" setup>
-import { useToast } from '@/uni_modules/wot-design-uni/components/wd-toast'
-
-import dayjs from '@/uni_modules/wot-design-uni/components/common/dayjs'
-
+import { useToast } from '@/uni_modules/wot-design-uni'
+import { dayjs } from '@/uni_modules/wot-design-uni'
 import { ref } from 'vue'

 const value1 = ref<number>(Date.now())
--- a/src/pages/cell/Index.vue
+++ b/src/pages/cell/Index.vue
@ -102,7 +102,7 @@
  </demo-block>
 </template>
 <script lang="ts" setup>
-import { useToast } from '@/uni_modules/wot-design-uni/components/wd-toast'
+import { useToast } from '@/uni_modules/wot-design-uni'
 import { ref } from 'vue'
 const rate = ref(0)
 const slider = ref('')
--- a/src/pages/colPicker/Index.vue
+++ b/src/pages/colPicker/Index.vue
@ -46,7 +46,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { areaData } from '../../utils/area'
-import { useToast } from '@/uni_modules/wot-design-uni/components/wd-toast'
+import { useToast } from '@/uni_modules/wot-design-uni'

 const value1 = ref<any[]>([])
 const value2 = ref<any[]>(['150000', '150100', '150121'])
--- a/src/pages/datetimePicker/Index.vue
+++ b/src/pages/datetimePicker/Index.vue
@ -32,7 +32,7 @@
  </demo-block>
 </template>
 <script lang="ts" setup>
-import { useToast } from '@/uni_modules/wot-design-uni/components/wd-toast'
+import { useToast } from '@/uni_modules/wot-design-uni'
 import { ref } from 'vue'

 const type = ref<string>('date')
--- a/src/pages/datetimePickerView/Index.vue
+++ b/src/pages/datetimePickerView/Index.vue
@ -25,7 +25,7 @@
  </demo-block>
 </template>
 <script lang="ts" setup>
-import { useToast } from '@/uni_modules/wot-design-uni/components/wd-toast'
+import { useToast } from '@/uni_modules/wot-design-uni'
 import { ref } from 'vue'

 const value1 = ref<string>('')
--- a/src/pages/dropMenu/Index.vue
+++ b/src/pages/dropMenu/Index.vue
@ -45,7 +45,7 @@
  </view>
 </template>
 <script lang="ts" setup>
-import closeOutside from '@/uni_modules/wot-design-uni/components/common/clickoutside'
+import { clickOut } from '@/uni_modules/wot-design-uni'
 import { ref } from 'vue'

 const dropMenu = ref()
@ -72,7 +72,7 @@ const option2 = ref<Record<string, any>>([
 ])

 function clickoutside() {
-  closeOutside()
+  clickOut.closeOutside()
 }

 function handleChange1({ value }) {
--- a/src/pages/form/Index.vue
+++ b/src/pages/form/Index.vue
@ -106,7 +106,7 @@
 </template>
 <script lang="ts" setup>
 import { useMessage } from '@/uni_modules/wot-design-uni/components/wd-message-box'
-import { useToast } from '@/uni_modules/wot-design-uni/components/wd-toast'
+import { useToast } from '@/uni_modules/wot-design-uni'
 import { areaData } from '@/utils/area'
 import { ref } from 'vue'

--- a/src/pages/grid/Index.vue
+++ b/src/pages/grid/Index.vue
@ -137,7 +137,7 @@
  </view>
 </template>
 <script lang="ts" setup>
-import { useToast } from '@/uni_modules/wot-design-uni/components/wd-toast'
+import { useToast } from '@/uni_modules/wot-design-uni'
 import { joy } from '../images/joy'
 import { ref } from 'vue'

--- a/src/pages/picker/Index.vue
+++ b/src/pages/picker/Index.vue
@ -37,7 +37,7 @@
  </demo-block>
 </template>
 <script lang="ts" setup>
-import { useToast } from '@/uni_modules/wot-design-uni/components/wd-toast'
+import { useToast } from '@/uni_modules/wot-design-uni'
 import { ref } from 'vue'

 const toast = useToast()
--- a/src/pages/pickerView/Index.vue
+++ b/src/pages/pickerView/Index.vue
@ -21,7 +21,7 @@
  </demo-block>
 </template>
 <script lang="ts" setup>
-import { useToast } from '@/uni_modules/wot-design-uni/components/wd-toast'
+import { useToast } from '@/uni_modules/wot-design-uni'
 import { ref } from 'vue'

 const toast = useToast()
--- a/src/pages/popover/Index.vue
+++ b/src/pages/popover/Index.vue
@ -31,8 +31,7 @@
  </view>
 </template>
 <script lang="ts" setup>
-import closeOutside from '@/uni_modules/wot-design-uni/components/common/clickoutside'
-import { useToast } from '@/uni_modules/wot-design-uni/components/wd-toast'
+import { clickOut, useToast } from '@/uni_modules/wot-design-uni'
 import { ref } from 'vue'

 const toast = useToast()
@ -66,7 +65,7 @@ function link(e) {
 }

 function clickOutside() {
-  closeOutside()
+  clickOut.closeOutside()
 }

 function showPop(index: number) {
--- a/src/pages/selectPicker/Index.vue
+++ b/src/pages/selectPicker/Index.vue
@ -36,7 +36,7 @@
  </demo-block>
 </template>
 <script lang="ts" setup>
-import { useToast } from '@/uni_modules/wot-design-uni/components/wd-toast'
+import { useToast } from '@/uni_modules/wot-design-uni'
 import { ref } from 'vue'

 const columns1 = ref<Record<string, any>>([
--- a/src/pages/swipeAction/Index.vue
+++ b/src/pages/swipeAction/Index.vue
@ -100,8 +100,8 @@
  </view>
 </template>
 <script lang="ts" setup>
-import { useToast } from '@/uni_modules/wot-design-uni/components/wd-toast'
-import closeOutside from '@/uni_modules/wot-design-uni/components/common/clickoutside'
+import { useToast } from '@/uni_modules/wot-design-uni'
+import { clickOut } from '@/uni_modules/wot-design-uni'

 import { ref } from 'vue'
 const toast = useToast()
@ -116,7 +116,7 @@ const beforeClose = (reason, position) => {
 }

 function clickoutside() {
-  closeOutside()
+  clickOut.closeOutside()
 }

 function changeState(position: string) {
--- a/src/pages/tabs/Index.vue
+++ b/src/pages/tabs/Index.vue
@ -71,7 +71,7 @@
  </demo-block>
 </template>
 <script lang="ts" setup>
-import { useToast } from '@/uni_modules/wot-design-uni/components/wd-toast'
+import { useToast } from '@/uni_modules/wot-design-uni'
 import { ref } from 'vue'

 const tab1 = ref<number>(0)
--- a/src/pages/toast/Index.vue
+++ b/src/pages/toast/Index.vue
@ -20,7 +20,7 @@
  </demo-block>
 </template>
 <script lang="ts" setup>
-import { useToast } from '@/uni_modules/wot-design-uni/components/wd-toast'
+import { useToast } from '@/uni_modules/wot-design-uni'

 const toast = useToast()

--- a/src/pages/tooltip/Index.vue
+++ b/src/pages/tooltip/Index.vue
@ -96,8 +96,8 @@
  </view>
 </template>
 <script lang="ts" setup>
-import clickoutside from '@/uni_modules/wot-design-uni/components/common/clickoutside'
-import { useToast } from '@/uni_modules/wot-design-uni/components/wd-toast'
+import { clickOut } from '@/uni_modules/wot-design-uni'
+import { useToast } from '@/uni_modules/wot-design-uni'
 import { ref } from 'vue'

 const show1 = ref<boolean>(false)
@ -182,7 +182,7 @@ function handleChange17(event) {
  // this.setData({ show17: event.detail.show })
 }
 function clickOutside(event) {
-  clickoutside()
+  clickOut.closeOutside()
 }
 </script>
 <style lang="scss" scoped>
--- a/src/pages/upload/Index.vue
+++ b/src/pages/upload/Index.vue
@ -52,7 +52,7 @@
 </template>
 <script lang="ts" setup>
 import { useMessage } from '@/uni_modules/wot-design-uni/components/wd-message-box'
-import { useToast } from '@/uni_modules/wot-design-uni/components/wd-toast'
+import { useToast } from '@/uni_modules/wot-design-uni'
 import { ref } from 'vue'

 const action: string = 'https://ftf.jd.com/api/uploadImg'
--- a/src/uni_modules/wot-design-uni/components/common/clickoutside.ts
+++ b/src/uni_modules/wot-design-uni/components/common/clickoutside.ts
@ -27,7 +27,7 @@ export function closeOther(comp) {
  })
 }

-export default function closeOutside() {
+export function closeOutside() {
  queue.forEach((item) => {
    item.$.exposed.close()
  })
--- a/src/uni_modules/wot-design-uni/components/common/dayjs.ts
+++ b/src/uni_modules/wot-design-uni/components/common/dayjs.ts
@ -141,4 +141,6 @@ class Dayjs {
  }
 }

-export default (dateStr) => new Dayjs(dateStr)
+export  function dayjs(dateStr?: string | number | Date) {
+ return new Dayjs(dateStr)
+}
--- a/src/uni_modules/wot-design-uni/components/common/lodash/debounce.ts
+++ b/src/uni_modules/wot-design-uni/components/common/lodash/debounce.ts
@ -173,7 +173,7 @@ function debounce(func, wait, options?) {
    return timerId !== undefined
  }

-  function debounced(...args) {
+  function debounced(this: any, ...args) {
    const time = Date.now()
    const isInvoking = shouldInvoke(time)

--- a/src/uni_modules/wot-design-uni/components/common/util.ts
+++ b/src/uni_modules/wot-design-uni/components/common/util.ts
@ -52,7 +52,8 @@ export function getType(target) {
  // 得到原生类型
  const typeStr = Object.prototype.toString.call(target)
  // 拿到类型值
-  const type = typeStr.match(/\[object (\w+)\]/)[1]
+  const match = typeStr.match(/\[object (\w+)\]/)
+  const type = match && match.length ? match[1] : ''
  // 类型值转小写并返回
  return type.toLowerCase()
 }
@ -126,13 +127,13 @@ export const renderData = (node, data, delay = 0) => {
  delay ? setTimeout(render, delay) : render()
 }

-function rgbToHex(r, g, b) {
+function rgbToHex(r: number, g: number, b: number) {
  const hex = ((r << 16) | (g << 8) | b).toString(16)
  return '#' + new Array(Math.abs(hex.length - 7)).join('0') + hex
 }

 function hexToRgb(hex) {
-  const rgb = []
+  const rgb: number[] = []
  for (let i = 1; i < 7; i += 2) {
    rgb.push(parseInt('0x' + hex.slice(i, i + 2)))
  }
@ -148,18 +149,20 @@ function hexToRgb(hex) {
 */
 export const gradient = (startColor, endColor, step = 2) => {
  // 将hex转换为rgb
-  const sColor = hexToRgb(startColor)
-  const eColor = hexToRgb(endColor)
+  const sColor: number[] = hexToRgb(startColor)
+  const eColor: number[] = hexToRgb(endColor)

  // 计算R\G\B每一步的差值
  const rStep = (eColor[0] - sColor[0]) / step
  const gStep = (eColor[1] - sColor[1]) / step
  const bStep = (eColor[2] - sColor[2]) / step

-  const gradientColorArr = []
+  const gradientColorArr: string[] = []
  for (let i = 0; i < step; i++) {
    // 计算每一步的hex值
-    gradientColorArr.push(rgbToHex(parseInt(rStep * i + sColor[0]), parseInt(gStep * i + sColor[1]), parseInt(bStep * i + sColor[2])))
+    gradientColorArr.push(
+      rgbToHex(parseInt(String(rStep * i + sColor[0])), parseInt(String(gStep * i + sColor[1])), parseInt(String(bStep * i + sColor[2])))
+    )
  }
  return gradientColorArr
 }
--- a/src/uni_modules/wot-design-uni/components/wd-button/wd-button.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-button/wd-button.vue
@ -4,7 +4,6 @@
    :style="customStyle"
    :class="[
      'wd-button',
-      customClass,
      'is-' + type,
      'is-' + size,
      plain ? 'is-plain' : '',
@ -12,7 +11,8 @@
      round ? 'is-round' : '',
      suck ? 'is-suck' : '',
      block ? 'is-block' : '',
-      loading ? 'is-loading' : ''
+      loading ? 'is-loading' : '',
+      customClass
    ]"
    :hover-start-time="hoverStartTime"
    :hover-stay-time="hoverStayTime"
--- a/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
@ -108,8 +108,8 @@ export default {
 </script>

 <script lang="ts" setup>
-import { ref, nextTick, computed, watch, onMounted } from 'vue'
-import dayjs from '../common/dayjs'
+import { ref, computed, watch } from 'vue'
+import { dayjs } from '../common/dayjs'
 import { debounce, deepClone, isEqual, padZero } from '../common/util'
 import { getWeekNumber, isRange } from '../wd-calendar-view/utils'
 import { useCell } from '../mixins/useCell'
--- a/src/uni_modules/wot-design-uni/index.ts
+++ b/src/uni_modules/wot-design-uni/index.ts
@ -0,0 +1,27 @@
+/*
+ * @Author: weisheng
+ * @Date: 2021-12-21 14:22:03
+ * @LastEditTime: 2023-07-25 10:42:27
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\index.ts
+ * 记得注释
+ */
+import type { App } from 'vue'
+
+// Toast
+export { useToast } from './components/wd-toast'
+// Messageb
+export { useMessage } from './components/wd-message-box'
+// Loading
+export { dayjs } from './components/common/dayjs'
+
+export * as CommonUtil from './components/common/util'
+
+export * as clickOut from './components/common/clickoutside'
+
+const install = (Vue: App) => {}
+
+export default {
+  install
+}