# BasicDragVerify 拖動校驗組件 ## BasicDragVerify ### Usage ```vue <template> <div class="p-10"> <BasicDragVerify @success="handleSuccess" /> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import { BasicDragVerify, DragVerifyActionType, PassingData } from '/@/components/Verify/index'; export default defineComponent({ components: { BasicDragVerify }, setup() { function handleSuccess(data: PassingData) { const { time } = data; createMessage.success(`校驗成功,耗時${time}秒`); } return { handleSuccess, handleBtnClick, }; }, }); </script> ``` ### Props | 屬性 | 類型 | 默認值 | 說明 | | ------------ | ---------------- | ---------------- | ------------------ | | value | `boolean` | - | 是否通過 | | text | `string` | `請按住滑塊拖動` | 未拖動時候顯示文字 | | successText | `string` | `驗證通過` | 驗證成功后顯示文本 | | height | `string｜string` | 40 | 高度 | | width | `string｜string` | 260 | 寬度 | | circle | `boolean` | false | 是否圓角 | | wrapStyle | `any` | - | 外層容器樣式 | | contentStyle | `any` | - | 主體內容樣式 | | barStyle | `any` | - | bar 樣式 | | actionStyle | `any` | - | 拖拽按鈕樣式 | ### Methods | 名稱 | 回調參數 | 說明 | | ------ | -------- | ---------- | | resume | `()=>{}` | 還原初始值 | ## RotateDragVerify 圖片還原正方向校驗組件 ### Usage ```vue <template> <div class="p-10"> <RotateDragVerify :src="img" ref="el" @success="handleSuccess" /> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { RotateDragVerify } from '/@/components/Verify/index'; import img from '/@/assets/images/header.jpg'; export default defineComponent({ components: { RotateDragVerify }, setup() { const handleSuccess = () => { console.log('success!'); }; return { handleSuccess, img, }; }, }); </script> ``` ### props | 屬性 | 類型 | 默認值 | 說明 | | ------------ | ---------------- | ---------------- | ------------------ | | src | `string` | - | 圖片地址 | | imgWidth | `number` | - | 圖片寬度 | | imgWrapStyle | `any` | - | 圖片外層容器樣式 | | minDegree | `number` | - | 最小旋轉角度 | | maxDegree | `number` | - | 最大旋轉角度 | | diffDegree | `number` | - | 誤差角度 | | value | `boolean` | - | 是否通過 | | text | `string` | `請按住滑塊拖動` | 未拖動時候顯示文字 | | successText | `string` | `驗證通過` | 驗證成功后顯示文本 | | height | `string｜string` | 40 | 高度 | | width | `string｜string` | 260 | 寬度 | | circle | `boolean` | false | 是否圓角 | | wrapStyle | `any` | - | 外層容器樣式 | | contentStyle | `any` | - | 主體內容樣式 | | barStyle | `any` | - | bar 樣式 | | actionStyle | `any` | - | 拖拽按鈕樣式 | ### Methods | 名稱 | 回調參數 | 說明 | | ------ | ---------- | ---------- | | resume | `Function` | 還原初始值 |