release

.vitepress/config.js

@@ -116,6 +116,14 @@ function createNav() {
           text: 'useStorage（2.1.0+）',
           link: '/hooks/useStorage',
         },
+        {
+          text: 'useClipboard（2.4.0+）',
+          link: '/hooks/useClipboard',
+        },
+        {
+          text: 'useNetwork（2.4.0+）',
+          link: '/hooks/useNetwork',
+        },
       ],
     },
     {
@@ -209,6 +217,14 @@ function createSidebar() {
         text: 'useStorage（2.1.0+）',
         link: '/hooks/useStorage',
       },
+      {
+        text: 'useClipboard（2.4.0+）',
+        link: '/hooks/useClipboard',
+      },
+      {
+        text: 'useNetwork（2.4.0+）',
+        link: '/hooks/useNetwork',
+      },
     ],
     '/components/': [
       {
@@ -308,6 +324,10 @@ function createSidebar() {
             text: '图标选择器组件（2.3.0+）',
             link: '/components/icon-picker',
           },
+          {
+            text: '瀑布流组件（2.4.0+）',
+            link: '/components/waterfall',
+          },
         ],
       },
       {

components/waterfall.md

@@ -0,0 +1,92 @@
+# Waterfall 瀑布流组件
+
+瀑布流组件
+
+Waterfall 组件位于 [src/components/Waterfall](https://github.com/kailong321200875/vue-element-plus-admin/tree/master/src/components/Waterfall) 内
+
+::: tip
+
+data 数据必须带有高度字段，用于确保计算出正确的位置
+
+:::
+
+## 用法
+
+```vue
+<script lang="ts" setup>
+import { Waterfall } from '@/components/Waterfall'
+import Mock from 'mockjs'
+import { ref, unref } from 'vue'
+import { toAnyString } from '@/utils'
+
+const data = ref<any>([])
+
+const getList = () => {
+  const list: any = []
+  for (let i = 0; i < 20; i++) {
+    // 随机 100, 500 之间的整数
+    const height = Mock.Random.integer(100, 500)
+    const width = Mock.Random.integer(100, 500)
+    list.push(
+      Mock.mock({
+        width,
+        height,
+        id: toAnyString(),
+        image_uri: Mock.Random.image(`${width}x${height}`)
+      })
+    )
+  }
+  data.value = [...unref(data), ...list]
+  if (unref(data).length >= 60) {
+    end.value = true
+  }
+}
+getList()
+
+const loading = ref(false)
+
+const end = ref(false)
+
+const loadMore = () => {
+  loading.value = true
+  setTimeout(() => {
+    getList()
+    loading.value = false
+  }, 1000)
+}
+</script>
+
+<template>
+  <Waterfall
+    :data="data"
+    :loading="loading"
+    :end="end"
+    :props="{
+      src: 'image_uri',
+      height: 'height'
+    }"
+    @load-more="loadMore"
+  />
+</template>
+
+```
+
+## Waterfall 属性<span id="Waterfall"></span>
+
+| 属性 | 说明 | 类型 | 可选值 | 默认值 |
+| ---- | ---- | ---- | ---- | ---- |
+| data | 要展示的数据 | `Array` | - | - |
+| reset | 窗口变化是否重新布局 | `boolean` | true/false | true |
+| width | 每个项的宽度 | `number` | - | 200 |
+| gap | 每个项的间距 | `number` | - | 20 |
+| loadingText | 加载中文字 | `string` | - | 加载中... |
+| loading | 是否加载中 | `boolean` | - | false |
+| end | 是否加载结束 | `boolean` | - | false |
+| endText | 是否加载结束文字 | `string` | - | 没有更多了 |
+| props | 字段别名 | `object` | - | { src: 'src', height: 'height' } |
+
+## Waterfall 事件
+
+| 方法名 | 说明 | 回调参数 |
+| ---- | ---- | ---- |
+| loadMore | 加载更多事件 | - |

hooks/useClipboard.md

@@ -0,0 +1,40 @@
+# useClipboard
+
+剪切板
+
+useClipboard 位于 [src/hooks/web/useClipboard.ts](https://github.com/kailong321200875/vue-element-plus-admin/tree/master/src/hooks/web/useClipboard.ts)
+
+## 用法
+
+```vue
+<script setup lang="ts">
+import { useClipboard } from '@/hooks/web/useClipboard'
+
+const { copy } = useClipboard()
+
+copy('复制内容')
+</script>
+
+```
+
+### 参数介绍
+
+```ts
+const { copy, copied, text, isSupported } = useClipboard()
+```
+
+**copy**
+
+`copy` 复制，参数传入一个需要复制的内容
+
+**copied**
+
+`copied` 是否已复制
+
+**text**
+
+`text` 复制的内容
+
+**isSupported**
+
+`isSupported` 浏览器是否支持复制

hooks/useNetwork.md

@@ -0,0 +1,28 @@
+# useNetwork
+
+监听网络状态
+
+useNetwork 位于 [src/hooks/web/useNetwork.ts](https://github.com/kailong321200875/vue-element-plus-admin/tree/master/src/hooks/web/useNetwork.ts)
+
+## 用法
+
+```vue
+<script setup lang="ts">
+import { useNetwork } from '@/hooks/web/useNetwork'
+
+const { online } = useNetwork()
+
+console.log(online)
+</script>
+
+```
+
+### 参数介绍
+
+```ts
+const { online } = useNetwork()
+```
+
+**online**
+
+`online` 网络是否已连接