feat(slider-vertify): 新增slider-vertify滑块验证组件

monsterxwx · Jul 4, 2023 · 64cbab3 · 64cbab3
1 parent 4b2a2b1
commit 64cbab3
Show file tree

Hide file tree

Showing 6 changed files with 575 additions and 2 deletions.
diff --git a/docs/component/sliderVertify.md b/docs/component/sliderVertify.md
@@ -0,0 +1,44 @@
+<script setup>
+import useCompStore from '../store/copname.js'
+import { onMounted } from 'vue'
+const compStore =useCompStore()
+
+onMounted(()=>{
+  compStore.updateName('slider-vertify')
+})
+
+</script>
+
+## 基本使用
+
+```html
+<uvSliderVertify />
+```
+
+#
+
+## props
+
+| 属性            |                    含义                    |   类型   |                                默认值 |
+| --------------- | :----------------------------------------: | :------: | ------------------------------------: |
+| width           |                 canvas宽度                 |  Number  |                                   320 |
+| height          |                 canvas高度                 |  Number  |                                   160 |
+| visible         |                  是否可见                  | Boolean  |                                  true |
+| refreshIcon     |                刷新icon地址                |  String  | 'http://cdn.dooring.cn/dr/icon12.png' |
+| l               |                  滑块边长                  |  Number  |                                    42 |
+| r               |                  滑块半径                  |  Number  |                                     9 |
+| imgUrl          |                  图片地址                  |  String  |                                    '' |
+| text            |                    文字                    |  String  |                                    '' |
+| onDraw          | 拖拽滑块时的回调, 参数为当前滑块拖拽的距离 | Function |                             (l) => {} |
+| onCustomVertify |            用户的自定义验证逻辑            | Function |          (VertifyType) => VertifyType |
+| onBeforeRefresh |              重制刷新前的回调              | Function |                              () => {} |
+| onSuccess       |                验证成功回调                | Function |                              () => {} |
+| onFail          |                验证失败回调                | Function |                              () => {} |
+| onRefresh       |                 刷新时回调                 | Function |                              () => {} |
+
+
+## css变量
+
+```css
+
+```
diff --git a/examples/src/router/routerList.js b/examples/src/router/routerList.js
@@ -257,6 +257,14 @@ export default [
     },
     component: () => import('../../../packages/components/floating-panel/demo/index.vue')
   },
+  {
+    path: '/slider-vertify',
+    name: 'slider-vertify',
+    meta: {
+      name: 'SliderVertify 滑块验证'
+    },
+    component: () => import('../../../packages/components/slider-vertify/demo/index.vue')
+  },
   {
     path: '',
     meta: {

diff --git a/packages/components/index.js b/packages/components/index.js
@@ -65,6 +65,7 @@ import uvCircleProgress from './circle-progress'
 import uvUploader from './uploader'
 import uvCascader from './cascader'
 import uvFloatingPanel from './floating-panel'
+import uvSliderVertify from './slider-vertify'
 
 const components = [
   uvButton,
@@ -131,7 +132,8 @@ const components = [
   uvCircleProgress,
   uvUploader,
   uvCascader,
-  uvFloatingPanel
+  uvFloatingPanel,
+  uvSliderVertify
 ]
 
 const install = (Vue) => {
@@ -205,7 +207,8 @@ export {
   uvCircleProgress,
   uvUploader,
   uvCascader,
-  uvFloatingPanel
+  uvFloatingPanel,
+  uvSliderVertify
 }
 
 export default install
diff --git a/packages/components/slider-vertify/demo/index.vue b/packages/components/slider-vertify/demo/index.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <demoBlock title="基本使用">
+      <uvSliderVertify />
+    </demoBlock>
+  </div>
+</template>
+
+<script setup>
+import demoBlock from '../../../demo/demo-block.vue'
+import { uvSliderVertify } from 'uv-ui'
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/packages/components/slider-vertify/index.js b/packages/components/slider-vertify/index.js
@@ -0,0 +1,6 @@
+import SliderVertify from './slider-vertify.vue'
+import { withInstall } from '../../utils/index.js'
+
+const uvSliderVertify = withInstall(SliderVertify)
+
+export default uvSliderVertify