更新代码 (#75)

- 🔥 新增组件 - [新增引导组件](/v2/doc/guide) - [新增悬浮按钮组件](/v2/doc/floatButton) - [新增骨架屏组件](/v2/doc/skeleton) - 新增组合式 API - [新增 useScroll](/v2/doc/composable) - 🔥 新增开发指南(/v2/doc/develop) - ⚙️ 更新 - 手风琴组件 MeAccordionItem 增加 `slot=label` 插槽 - 更新组件的使用文档 - 优化项目在使用组件或组合式 API 时由 getCurrentInstance 中获取改为直接从组件库获取的体验 - 更新项目依赖版本 - 组合式 API `useVisible` 增加初始化参数 - 简化文档里的按需引入方式 - 优化单元测试获取节点 - 更新依赖 `vue-tsc` 由 `1.x` 升级为 `2.x` - 🐞 修复已知 BUG - 修复 MeLoading 组件设置大小不生效问题 - 修复移动端点击出现蓝色背景问题 Co-authored-by: biaov2017 <biao2017@qq.com> Co-authored-by: biaov2018 <biaov2017@qq.com>
biaov · Mar 5, 2024 · 59ece4f · 59ece4f
1 parent 6824c23
commit 59ece4f
Show file tree

Hide file tree

Showing 185 changed files with 2,245 additions and 758 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,4 +1,4 @@
 {
   /* 推荐扩展 */
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+  "recommendations": ["Vue.volar"]
 }
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # mine-h5-ui
 
-一款轻量级、模块化基于 VUE3 的 H5 前端 UI 组件库 👍
+一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍
 
 <p align="center">
     <a href="https://mineh5ui.biaov.cn/v2">
@@ -19,15 +19,16 @@
 
 ## 特性
 
-- [x] 丰富的模块化组件和工具类 API，50<sup>+</sup> 个组件
-- [x] 支持按需加载，tree-shaking
-- [x] 组件使用文档，使用和更新说明 Markdown
-- [x] 界面实例演示
-- [x] 内置单元测试组件
+- [x] 丰富的模块化组件和组合式 API，60<sup>+</sup> 个组件
+- [x] 支持按需加载，`tree-shaking` 优化
+- [x] 完善的组件使用文档和演示示例
+- [x] 内置每个组件的单元测试
 - [x] 多页面配置
 - [x] 支持移动端预览
-- [x] 支持 PWA
-- [x] 支持 TypeScript
+- [x] 支持 `PWA`
+- [x] 支持 `TypeScript`
+- [x] 版本更新日志
+- [x] 开发指南
 
 ## 安装
 
@@ -43,9 +44,7 @@ import App from './App.vue'
 import mineh5ui from 'mine-h5-ui'
 import 'mine-h5-ui/styles/index.css'
 
-const app = createApp(App)
-app.use(mineh5ui)
-app.mount('#app')
+createApp(App).use(mineh5ui).mount('#app')
 ```
 
 - 👉 在[快速开始](https://mineh5ui.biaov.cn/v2/doc/start)中查看更多信息。

diff --git a/examples/components/CopyCode/hooks.ts b/examples/components/CopyCode/hooks.ts
@@ -1,23 +1,23 @@
-import { ref, getCurrentInstance, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import ClipboardJS from 'clipboard'
+import { MeToast } from '@/plugins'
 
 /**
  * 操作 dom
  */
 export const useRefs = () => {
   const copyDom = ref<HTMLDivElement>()
   const codeCont = ref<HTMLDivElement>()
-  const { $MeToast } = getCurrentInstance()!.appContext.config.globalProperties
 
   onMounted(() => {
     const clipboard = new ClipboardJS(copyDom.value!, {
       text: () => codeCont.value!.textContent!.slice(0, -1)
     })
     clipboard.on('success', () => {
-      $MeToast('复制成功')
+      MeToast('复制成功')
     })
     clipboard.on('error', () => {
-      $MeToast('复制失败')
+      MeToast('复制失败')
     })
   })
 

diff --git a/examples/config/nav.config.ts b/examples/config/nav.config.ts
@@ -30,6 +30,13 @@ export const guideConfig = [
       title: '自定义主题'
     }
   },
+  {
+    name: 'develop',
+    path: 'develop',
+    meta: {
+      title: '开发指南'
+    }
+  },
   {
     name: 'logs',
     path: 'logs',
@@ -250,6 +257,13 @@ export const componentConfig = [
         },
         path: 'swiperCell',
         name: 'swiperCell'
+      },
+      {
+        meta: {
+          title: 'FloatButton 悬浮按钮'
+        },
+        path: 'floatButton',
+        name: 'floatButton'
       }
     ]
   },
@@ -383,6 +397,20 @@ export const componentConfig = [
         },
         path: 'error',
         name: 'error'
+      },
+      {
+        meta: {
+          title: 'Guide 引导'
+        },
+        path: 'guide',
+        name: 'guide'
+      },
+      {
+        meta: {
+          title: 'Skeleton 骨架屏'
+        },
+        path: 'skeleton',
+        name: 'skeleton'
       }
     ]
   },

diff --git a/examples/config/variables.ts b/examples/config/variables.ts
@@ -1,3 +1,5 @@
+import packageJson from '../../package.json'
+
 /**
  * 全局变量
  */
@@ -12,9 +14,18 @@ export const useGlobalVars = () => {
    */
   const BaseRouter = '/v2/'
 
+  /**
+   * 组件库信息
+   */
+  const libraryInfo = {
+    name: packageJson.name,
+    description: packageJson.description
+  }
+
   return {
     GithubAddress,
-    BaseRouter
+    BaseRouter,
+    libraryInfo
   }
 }
 

diff --git a/examples/docs/accordion.md b/examples/docs/accordion.md
@@ -13,10 +13,7 @@ import { MeAccordion, MeAccordionItem } from 'mine-h5-ui'
 import 'mine-h5-ui/styles/MeAccordion.css'
 import 'mine-h5-ui/styles/MeAccordionItem.css'
 
-const app = createApp(App)
-app.use(MeAccordion)
-app.use(MeAccordionItem)
-app.mount('#app')
+createApp(App).use(MeAccordion).use(MeAccordionItem).mount('#app')
 ```
 
 :::
@@ -119,6 +116,7 @@ const listData = Object.freeze([
 | 具名插槽 | 说明     | scopedSlots | 版本   |
 | -------- | -------- | ----------- | ------ |
 | default  | 默认名称 | --          | v2.0.0 |
+| label    | 名称     | --          | v2.7.4 |
 
 #### 方法
 

diff --git a/examples/docs/actionSheet.md b/examples/docs/actionSheet.md
@@ -12,9 +12,7 @@ import App from './App.vue'
 import { MeActionSheet } from 'mine-h5-ui'
 import 'mine-h5-ui/styles/MeActionSheet.css'
 
-const app = createApp(App)
-app.use(MeActionSheet)
-app.mount('#app')
+createApp(App).use(MeActionSheet).mount('#app')
 ```
 
 :::

diff --git a/examples/docs/addressPicker.md b/examples/docs/addressPicker.md
@@ -12,9 +12,7 @@ import App from './App.vue'
 import { MeAddressPicker } from 'mine-h5-ui'
 import 'mine-h5-ui/styles/MeAddressPicker.css'
 
-const app = createApp(App)
-app.use(MeAddressPicker)
-app.mount('#app')
+createApp(App).use(MeAddressPicker).mount('#app')
 ```
 
 :::

diff --git a/examples/docs/api.md b/examples/docs/api.md
@@ -1,5 +1,4 @@
 [bind]: https://github.com/biaov/mine-h5-ui/blob/main/packages/MeAPI/event.js
-[unbind]: https://github.com/biaov/mine-h5-ui/blob/main/packages/MeAPI/event.js
 
 # API 方法
 

diff --git a/examples/docs/button.md b/examples/docs/button.md
@@ -14,9 +14,7 @@ import App from './App.vue'
 import { MeButton } from 'mine-h5-ui'
 import 'mine-h5-ui/styles/MeButton.css'
 
-const app = createApp(App)
-app.use(MeButton)
-app.mount('#app')
+createApp(App).use(MeButton).mount('#app')
 ```
 
 :::

diff --git a/examples/docs/cell.md b/examples/docs/cell.md
@@ -12,9 +12,7 @@ import App from './App.vue'
 import { MeCell } from 'mine-h5-ui'
 import 'mine-h5-ui/styles/MeCell.css'
 
-const app = createApp(App)
-app.use(MeCell)
-app.mount('#app')
+createApp(App).use(MeCell).mount('#app')
 ```
 
 :::

diff --git a/examples/docs/checkbox.md b/examples/docs/checkbox.md
@@ -13,10 +13,7 @@ import { MeCheckbox, MeCheckboxGroup } from 'mine-h5-ui'
 import 'mine-h5-ui/styles/MeCheckbox.css'
 import 'mine-h5-ui/styles/MeCheckboxGroup.css'
 
-const app = createApp(App)
-app.use(MeCheckbox)
-app.use(MeCheckboxGroup)
-app.mount('#app')
+createApp(App).use(MeCheckbox).use(MeCheckboxGroup).mount('#app')
 ```
 
 :::

diff --git a/examples/docs/composable.md b/examples/docs/composable.md
@@ -1,8 +1,4 @@
-# 组合式 API
-
----
-
-> 版本：v2.4.0
+# 组合式 API `v2.4.0`
 
 ## useValidator 校验器
 
@@ -133,3 +129,19 @@ const { setStorage, getStorage, removeStorage } = useStorage()
 // getStorage('name') // 获取
 // removeStorage('name') // 移除
 ```
+
+## useScroll 本地存储 `v2.8.0`
+
+```js
+import { useScroll } from 'mine-h5-ui'
+
+const { scrollTo } = useScroll()
+
+scrollTo(document.body, 0) // 返回顶部
+
+/**
+ * 自定义节点
+ */
+const customDomNode = document.querySelector('.customDomNode')
+scrollTo(customDomNode, 0) // 滚动到指定位置
+```
diff --git a/examples/docs/countDown.md b/examples/docs/countDown.md
@@ -12,9 +12,7 @@ import App from './App.vue'
 import { MeCountDown } from 'mine-h5-ui'
 import 'mine-h5-ui/styles/MeCountDown.css'
 
-const app = createApp(App)
-app.use(MeCountDown)
-app.mount('#app')
+createApp(App).use(MeCountDown).mount('#app')
 ```
 
 :::

diff --git a/examples/docs/countTo.md b/examples/docs/countTo.md
@@ -12,9 +12,7 @@ import App from './App.vue'
 import { MeCountTo } from 'mine-h5-ui'
 import 'mine-h5-ui/styles/MeCountTo.css'
 
-const app = createApp(App)
-app.use(MeCountTo)
-app.mount('#app')
+createApp(App).use(MeCountTo).mount('#app')
 ```
 
 :::

diff --git a/examples/docs/develop.md b/examples/docs/develop.md
@@ -0,0 +1,10 @@
+# 开发指南
+
+---
+
+## 介绍
+
+- 这个一个关于技术分享的 UI 组件库
+- 代码注意一下其中的规范
+- 提交 PR 代码时注意尽量保持你的 PR 足够小，最小不限制，哪怕只有一个字母
+- 开发时请注意代码的可读性，可维护性，可测试性，保证代码的稳定
diff --git a/examples/docs/floatButton.md b/examples/docs/floatButton.md
@@ -0,0 +1,102 @@
+# floatButton 悬浮按钮 `v2.8.0`
+
+---
+
+## 按需引入
+
+::: CopyCode
+
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+import { MeFloatButton } from 'mine-h5-ui'
+import 'mine-h5-ui/styles/MeFloatButton.css'
+
+createApp(App).use(MeFloatButton).mount('#app')
+```
+
+:::
+
+## 提示
+
+- 如果你觉得重新编写 HTML 结构麻烦，可以直接复制下面的代码。
+
+## 代码演示
+
+### 基础用法
+
+- 通过属性 `style` 来设置组件的位置。
+
+::: CopyCode
+
+```html
+<me-float-button :style="{ right: '20px', top: '100px'}">按钮</me-float-button>
+```
+
+:::
+
+### 按钮形状
+
+- 通过属性 `style` 来设置组件的按钮形状。
+
+::: CopyCode
+
+```html
+<me-float-button :style="{ right: '20px', top: '100px', borderRadius: '4px'}">按钮</me-float-button>
+```
+
+### 自定义颜色
+
+- 通过属性 `style` 来设置组件的自定义颜色。
+
+::: CopyCode
+
+```html
+<me-float-button :style="{ right: '20px', top: '100px', background: '#f60'}">按钮</me-float-button>
+```
+
+### 自定义大小
+
+- 通过属性 `style` 来设置组件的自定义大小。
+
+::: CopyCode
+
+```html
+<me-float-button :style="{ right: '20px', top: '100px', width: '40px', height: '40rpx'}">按钮</me-float-button>
+```
+
+### 设置按钮类型
+
+- 通过属性 `type` 来设置组件的类型，默认值为 `default`。
+
+::: CopyCode
+
+```html
+<me-float-button type="backTop" :style="{ right: '20px', top: '100px'}">按钮</me-float-button>
+```
+
+:::
+
+## API
+
+### 参数
+
+- 支持透传
+
+| 参数       | 说明               | 类型    | 可选值            | 默认值          | 版本   |
+| ---------- | ------------------ | ------- | ----------------- | --------------- | ------ |
+| type       | 按钮类型           | string  | default / backTop | default         | v2.8.0 |
+| scrollTop  | 滚动开始显示的距离 | number  | --                | 0               | v2.8.0 |
+| scrollNode | 有滚动条的节点     | Element | --                | `document.body` | v2.8.0 |
+
+### Slots
+
+| 具名插槽 | 说明     | scopedSlots | 版本   |
+| -------- | -------- | ----------- | ------ |
+| default  | 默认名称 | --          | v2.8.0 |
+
+#### 方法
+
+| 方法名 | 说明                 | 回调参数          | 版本   |
+| ------ | -------------------- | ----------------- | ------ |
+| click  | 点击组件时触发的事件 | event: MouseEvent | v2.8.0 |