更新版本v2.3.10

biaov · Jan 11, 2023 · 8f6f2d6 · 8f6f2d6
1 parent 4da4299
commit 8f6f2d6
Show file tree

Hide file tree

Showing 95 changed files with 760 additions and 121 deletions.
diff --git a/examples/App.vue b/examples/App.vue
@@ -3,7 +3,7 @@
 </template>
 <script lang="ts" setup>
 import { onMounted } from 'vue'
-import { useGlobalVars } from '@/utils/variables'
+import { useGlobalVars } from '@/config/variables'
 
 const { BaseRouter } = useGlobalVars()
 

diff --git a/examples/components/DemoH5/index.vue b/examples/components/DemoH5/index.vue
@@ -5,7 +5,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { useGlobalVars } from '@/utils/variables'
+import { useGlobalVars } from '@/config/variables'
 import { useFrames } from './hooks'
 
 const emit = defineEmits(['getframe'])

diff --git a/examples/components/MineHeader/hooks.ts b/examples/components/MineHeader/hooks.ts
@@ -1,7 +1,7 @@
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 import QRcode from 'qrcode'
-import { useGlobalVars } from '@/utils/variables'
+import { useGlobalVars } from '@/config/variables'
 import GithubIcon from '@/assets/icon-github.svg'
 import QrcodeIcon from '@/assets/icon-qrcode.svg'
 

diff --git a/examples/components/SideBar/hook.ts b/examples/components/SideBar/hook.ts
@@ -1,4 +1,4 @@
-import NavData from '@/utils/nav.config'
+import NavData from '@/config/nav.config'
 import { SidebarListItem } from './types'
 
 // 使用页面数据

diff --git a/examples/utils/nav.config.ts → examples/config/nav.config.ts b/examples/utils/nav.config.ts → examples/config/nav.config.ts
@@ -421,6 +421,13 @@ export const componentConfig = [
         },
         path: 'mspaint',
         name: 'mspaint'
+      },
+      {
+        meta: {
+          title: 'JigsawValidate 拼图校验'
+        },
+        path: 'jigsawValidate',
+        name: 'jigsawValidate'
       }
     ]
   }

diff --git a/examples/utils/variables.ts → examples/config/variables.ts b/examples/utils/variables.ts → examples/config/variables.ts
@@ -4,6 +4,7 @@
 export const useGlobalVars = () => {
   const GithubAddress = 'https://github.com/biaov/MINE-H5-UI' // Github 地址
   const BaseRouter = '/v2/' // 基本路由
+
   return {
     GithubAddress,
     BaseRouter

diff --git a/examples/docs/install.md b/examples/docs/install.md
@@ -10,7 +10,7 @@
 ::: CopyCode
 
 ```Basic
-npm i mine-h5-ui@latest
+npm i mine-h5-ui
 ```
 
 :::

diff --git a/examples/docs/jigsawValidate.md b/examples/docs/jigsawValidate.md
@@ -0,0 +1,149 @@
+# JigsawValidate 拼图校验
+
+---
+
+## 按需引入
+
+::: CopyCode
+
+```JavaScript
+import { createApp } from 'vue'
+import App from './App.vue'
+import { MeJigsawValidate } from 'mine-h5-ui'
+import 'mine-h5-ui/lib/theme-default/MeJigsawValidate.css'
+
+const app = createApp(App)
+app.use(MeJigsawValidate)
+app.mount('#app')
+```
+
+:::
+
+## 复制
+
+- 如果你觉得重新编写 HTML 结构麻烦，可以直接复制下面的代码。
+
+## 代码演示
+
+### 基础用法
+
+- 通过属性 `url` 来设置组件的图片地址。
+
+::: CopyCode
+
+```HTML
+<me-jigsaw-validate url="https://dummyimage.com/340x300/f60"></me-jigsaw-validate>
+```
+
+:::
+
+### 自定义图片大小
+
+- 通过属性 `width` 来设置图片的宽度，默认为 `100%`。
+- 通过属性 `height` 来设置图片的高度，默认为 `300px`。
+
+::: CopyCode
+
+```HTML
+<me-jigsaw-validate url="https://dummyimage.com/340x300/f60" width="300px" height="260px"></me-jigsaw-validate>
+```
+
+:::
+
+### 是否开启随机位置
+
+- 通过属性 `random` 来设置组件的是否开启随机位置，默认为 `true`。
+
+::: CopyCode
+
+```HTML
+<me-jigsaw-validate url="https://dummyimage.com/340x300/f60" :random="false"></me-jigsaw-validate>
+```
+
+:::
+
+### 自定义滑块位置
+
+- 通过属性 `slideStyle` 来设置组件的滑块样式，默认为 `slideStyle`。
+- slideStyle:
+
+```JS
+
+{
+  height: '40px', // 滑块的高度
+  background: '#f6f6f6', // 滑块的背景色
+  dotBackground: '#409eff', // 拖动点的背景色
+  tips: '#494949' // 提示文字的颜色
+}
+```
+
+::: CopyCode
+
+```Vue
+<template>
+  <me-jigsaw-validate url="https://dummyimage.com/340x300/f60" :slideStyle="slideStyle"></me-jigsaw-validate>
+</template>
+<script setup>
+const slideStyle = {
+  height: '30px',
+  background: 'radial-gradient(circle farthest-corner at 100% 0, #3eabff 0%, #3369e7 100%)',
+  dotBackground: 'radial-gradient(circle farthest-corner at 100% 0, #f09c33, #ff00aa)',
+  tips: '#fff'
+}
+</script>
+```
+
+:::
+
+### 提示文字
+
+- 通过属性 `tips` 来设置组件的是否开启随机位置，默认为 `按住左边按钮向右拖动完成上方图像验证`。
+
+::: CopyCode
+
+```HTML
+<me-jigsaw-validate url="https://dummyimage.com/340x300/f60" tips="这是一段提示文字"></me-jigsaw-validate>
+```
+
+:::
+
+### 容错值
+
+- 通过属性 `range` 来设置组件的容错值，默认为 `5`。
+
+::: CopyCode
+
+```HTML
+<me-jigsaw-validate url="https://dummyimage.com/340x300/f60" :range="20"></me-jigsaw-validate>
+```
+
+:::
+
+## API
+
+### 参数
+
+| 参数       | 说明     | 类型    | 可选值       | 默认值                               | 版本   |
+| ---------- | -------- | ------- | ------------ | ------------------------------------ | ------ |
+| url        | 图片地址 | string  | --           | --                                   | 2.3.10 |
+| width      | 图片宽度 | string  | --           | 100%                                 | 2.3.10 |
+| height     | 图片高度 | string  | --           | 300px                                | 2.3.10 |
+| random     | 随机位置 | boolean | true / false | true                                 | 2.3.10 |
+| slideStyle | 滑块样式 | Object  | --           | [slideStyle](#slideStyle)            | 2.3.10 |
+| tips       | 提示语   | string  | --           | 按住左边按钮向右拖动完成上方图像验证 | 2.3.10 |
+| range      | 容错值   | number  | --           | 5                                    | 2.3.10 |
+
+<h3 id="slideStyle">slideStyle</h3>
+
+| 参数          | 说明         | 类型   | 可选值 | 默认值  | 版本   |
+| ------------- | ------------ | ------ | ------ | ------- | ------ |
+| height        | 滑块高度     | string | --     | 40px    | 2.3.10 |
+| background    | 滑块背景色   | string | --     | #f6f6f6 | 2.3.10 |
+| dotBackground | 拖动点背景色 | string | --     | #409eff | 2.3.10 |
+| tips          | 提示语颜色   | string | --     | #494949 | 2.3.10 |
+
+### 方法
+
+| 方法名 | 说明                   | 回调参数   | 版本   |
+| ------ | ---------------------- | ---------- | ------ |
+| change | 拖动点拖动时触发的事件 | e: boolean | 2.3.10 |
diff --git a/examples/docs/logs.md b/examples/docs/logs.md
@@ -14,7 +14,20 @@
 
 :::TimeLine
 
-## v2.3.9-Latest release
+## v2.3.10-Latest release
+
+`2023-01-11`
+
+- 更新 Style 样式类
+  - [新增 throttle（节流）样式类](/v2/doc/style)
+- 更新业务组件
+  - [新增拼图校验组件](/v2/doc/jigsawValidate)
+- Bug Fixes
+  - 修复已知 Bug
+  - 优化代码
+  - 更新依赖版本
+
+## v2.3.9
 
 `2022-12-05`
 

diff --git a/examples/docs/style.md b/examples/docs/style.md
@@ -54,16 +54,17 @@ import 'mine-h5-ui/lib/theme-default/style.css'
 
 | class 类名          | 说明                                         | 版本   |
 | ------------------- | -------------------------------------------- | ------ |
-| me-lf               | 向左浮动                                     | v2.3.5 |
-| me-rt               | 向右浮动                                     | v2.3.5 |
-| me-clear-ft         | 清理浮动（在浮动元素的父元素上设置清理浮动） | v2.3.5 |
-| me-clear-mg         | 清理外边距 margin                            | v2.3.5 |
-| me-clamp            | 溢出隐藏一行···                              | v2.3.5 |
-| me-clamp-two        | 溢出隐藏两行···                              | v2.3.5 |
-| me-wrap-en          | 英文或数字强制换行                           | v2.3.5 |
-| me-clear-scroll     | 设置轮动条样式                               | v2.3.5 |
-| me-inline-block     | 行内块居中                                   | v2.3.5 |
-| me-animation-cursor | animation 光标动画                           | v2.3.5 |
+| me-lf               | 向左浮动                                     | 2.3.5  |
+| me-rt               | 向右浮动                                     | 2.3.5  |
+| me-clear-ft         | 清理浮动（在浮动元素的父元素上设置清理浮动） | 2.3.5  |
+| me-clear-mg         | 清理外边距 margin                            | 2.3.5  |
+| me-clamp            | 溢出隐藏一行···                              | 2.3.5  |
+| me-clamp-two        | 溢出隐藏两行···                              | 2.3.5  |
+| me-wrap-en          | 英文或数字强制换行                           | 2.3.5  |
+| me-clear-scroll     | 设置轮动条样式                               | 2.3.5  |
+| me-inline-block     | 行内块居中                                   | 2.3.5  |
+| me-animation-cursor | animation 光标动画                           | 2.3.5  |
+| me-throttle         | 节流                                         | 2.3.10 |
 
 | 属性名                         | 说明         | class 类名 | 说明 | 版本 |
 | ------------------------------ | ------------ | ---------- | ---- | ---- |

diff --git a/examples/main.ts b/examples/main.ts
@@ -2,14 +2,14 @@ import { createApp } from 'vue'
 import TimeLine from '@/components/TimeLine'
 import CopyCode from '@/components/CopyCode'
 import { MessageEventListener } from '@/utils/functions'
-import { componentConfig } from '@/utils/nav.config'
+import { componentConfig } from '@/config/nav.config'
 import router from './router'
 import App from './App.vue'
 
 import MINEH5UI from '~/index' // 开发
 import '~/theme-default/index.less' // 开发
 
-/* import MINEH5UI from '../dist/packages/lib' // 测试
+/* import MINEH5UI from '../dist/packages/es' // 测试
 import '../dist/packages/lib/theme-default/index.css' // 测试 */
 
 const app = createApp(App)

diff --git a/examples/router/docs.ts b/examples/router/docs.ts
@@ -1,4 +1,4 @@
-import NavConfig from '@/utils/nav.config'
+import NavConfig from '@/config/nav.config'
 import { Docs } from './types'
 
 let docs: Docs[] = []

diff --git a/examples/router/index.ts b/examples/router/index.ts
@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory, RouteRecordRaw, Router } from 'vue-router'
-import { useGlobalVars } from '@/utils/variables'
+import { useGlobalVars } from '@/config/variables'
 import docs from './docs'
 
 const { BaseRouter } = useGlobalVars()

diff --git a/examples/views/layout/index.vue b/examples/views/layout/index.vue
@@ -29,7 +29,7 @@
 </template>
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue'
-import { useGlobalVars } from '@/utils/variables'
+import { useGlobalVars } from '@/config/variables'
 import MineHeader from '@/components/MineHeader'
 import ReloadPrompt from '@/components/ReloadPrompt'
 import { useCanvas } from './hooks'

diff --git a/mobile/assets/material.png b/mobile/assets/material.png
diff --git a/mobile/main.ts b/mobile/main.ts
@@ -6,7 +6,7 @@ import router from './router'
 import MINEH5UI from '~/index' // 开发
 import '~/theme-default/index.less' // 开发
 
-/* import MINEH5UI from '../dist/packages/lib' // 测试
+/* import MINEH5UI from '../dist/packages/es' // 测试
 import '../dist/packages/lib/theme-default/index.css' // 测试 */
 
 const app = createApp(App)

diff --git a/mobile/router/docs.ts b/mobile/router/docs.ts
@@ -1,4 +1,4 @@
-import { componentConfig } from '@/utils/nav.config'
+import { componentConfig } from '@/config/nav.config'
 import { Docs } from './types'
 
 let docs: Docs[] = componentConfig

diff --git a/mobile/router/index.ts b/mobile/router/index.ts
@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory, RouteRecordRaw, Router } from 'vue-router'
-import { useGlobalVars } from '@/utils/variables'
+import { useGlobalVars } from '@/config/variables'
 import docs from './docs'
 
 const { BaseRouter } = useGlobalVars()

diff --git a/mobile/views/doc/jigsawValidate/data.ts b/mobile/views/doc/jigsawValidate/data.ts
@@ -0,0 +1,45 @@
+import url from '^/assets/material.png'
+
+export default [
+  {
+    id: 1,
+    label: '基础用法',
+    url
+  },
+  {
+    id: 2,
+    label: '自定义图片大小',
+    url,
+    width: '300px',
+    height: '260px'
+  },
+  {
+    id: 3,
+    label: '是否开启随机位置',
+    url,
+    random: false
+  },
+  {
+    id: 4,
+    label: '自定义滑块位置',
+    url,
+    slideStyle: {
+      height: '30px',
+      background: 'radial-gradient(circle farthest-corner at 100% 0, #3eabff 0%, #3369e7 100%)',
+      dotBackground: 'radial-gradient(circle farthest-corner at 100% 0, #f09c33, #ff00aa)',
+      tips: '#fff'
+    }
+  },
+  {
+    id: 5,
+    label: '提示文字',
+    url,
+    tips: '这是一段提示文字'
+  },
+  {
+    id: 6,
+    label: '容错值',
+    url,
+    range: 20
+  }
+]
diff --git a/mobile/views/doc/jigsawValidate/hooks.ts b/mobile/views/doc/jigsawValidate/hooks.ts
@@ -0,0 +1,16 @@
+import { ref, getCurrentInstance } from 'vue'
+import initData from './data'
+import { ListDataItem } from './types'
+
+// 操作
+export const useData = () => {
+  const { $MeToast } = getCurrentInstance()!.appContext.config.globalProperties
+  const listData = ref<ListDataItem[]>(initData) // 列表数据
+
+  // 改变
+  const onChange = (e: boolean) => {
+    e && $MeToast('验证通过')
+  }
+
+  return { listData, onChange }
+}