# BasicDragVerify

拖动校验组件

## BasicDragVerify

### 代码演示

<CodePreview src="/doc-comp/verify/drag" :height="470">
<details>
<summary>展开查看</summary>

```vue
<template>
  <PageWrapper title="拖动校验示例">
    <div class="flex justify-center p-4 items-center bg-gray-700">
      <BasicDragVerify ref="el1" @success="handleSuccess" />
      <a-button type="primary" class="ml-2" @click="handleBtnClick(el1)"> 还原 </a-button>
    </div>

    <div class="flex justify-center p-4 items-center bg-gray-700">
      <BasicDragVerify ref="el2" circle @success="handleSuccess" />
      <a-button type="primary" class="ml-2" @click="handleBtnClick(el2)"> 还原 </a-button>
    </div>

    <div class="flex justify-center p-4 items-center bg-gray-700">
      <BasicDragVerify
        ref="el3"
        text="拖动以进行校验"
        successText="校验成功"
        :barStyle="{
          backgroundColor: '#018ffb',
        }"
        @success="handleSuccess"
      />
      <a-button type="primary" class="ml-2" @click="handleBtnClick(el3)"> 还原 </a-button>
    </div>

    <div class="flex justify-center p-4 items-center bg-gray-700">
      <BasicDragVerify ref="el4" @success="handleSuccess">
        <template #actionIcon="isPassing">
          <BugOutlined v-if="isPassing" />
          <RightOutlined v-else />
        </template>
      </BasicDragVerify>
      <a-button type="primary" class="ml-2" @click="handleBtnClick(el4)"> 还原 </a-button>
    </div>

    <div class="flex justify-center p-4 items-center bg-gray-700">
      <BasicDragVerify ref="el5" @success="handleSuccess">
        <template #text="isPassing">
          <div v-if="isPassing">
            <BugOutlined />
            成功
          </div>
          <div v-else>
            拖动
            <RightOutlined />
          </div>
        </template>
      </BasicDragVerify>
      <a-button type="primary" class="ml-2" @click="handleBtnClick(el5)"> 还原 </a-button>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { BugOutlined, RightOutlined } from '@ant-design/icons-vue';
  import { PageWrapper, useMessage } from '@eciol/ant-ui';
  import { BasicDragVerify, DragVerifyActionType, PassingData } from '@eciol/share-ui';
  import { type Nullable } from '@eciol/types';

  const { createMessage } = useMessage();
  const el1 = ref<Nullable<DragVerifyActionType>>(null);
  const el2 = ref<Nullable<DragVerifyActionType>>(null);
  const el3 = ref<Nullable<DragVerifyActionType>>(null);
  const el4 = ref<Nullable<DragVerifyActionType>>(null);
  const el5 = ref<Nullable<DragVerifyActionType>>(null);

  function handleSuccess(data: PassingData) {
    const { time } = data;
    createMessage.success(`校验成功,耗时${time}秒`);
  }

  function handleBtnClick(elRef: Nullable<DragVerifyActionType>) {
    if (!elRef) {
      return;
    }
    elRef.resume();
  }
</script>
<style lang="less" scoped>
  .bg-gray-700 {
    background-color: #4a5568;
  }
</style>

```
</details>
</CodePreview>

### Usage

```vue
<template>
  <div class="p-10">
    <BasicDragVerify @success="handleSuccess" />
  </div>
</template>
<script lang="ts" setup>
  import { defineComponent, ref } from 'vue';
  import { BasicDragVerify, DragVerifyActionType, PassingData } from '@eciol/share-ui';
  import { useMessage } from '@eciol/ant-ui';

  const { createMessage } = useMessage();
  function handleSuccess(data: PassingData) {
    const { time } = data;
    createMessage.success(`校验成功,耗时${time}秒`);
  }
</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

图片还原正方向校验组件

### 代码演示

<CodePreview src="/doc-comp/verify/rotate" :height="450">
<details>
<summary>展开查看</summary>

```vue
<template>
  <PageWrapper title="旋转校验示例">
    <div class="flex justify-center p-4 items-center bg-gray-700">
      <RotateDragVerify ref="el" :src="img" @success="handleSuccess" />
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { PageWrapper } from '@eciol/ant-ui';
  import { RotateDragVerify } from '@eciol/share-ui';

  import img from '@/assets/images/header.jpg';

  const handleSuccess = () => {
    console.log('success!');
  };
</script>
<style lang="less" scoped>
  .bg-gray-700 {
    background-color: #4a5568;
  }
</style>

```
</details>
</CodePreview>

### Usage

```vue
<template>
  <div class="p-10">
    <RotateDragVerify :src="img" ref="el" @success="handleSuccess" />
  </div>
</template>
<script lang="ts" setup>
  import { RotateDragVerify } from '@eciol/share-ui';

  import img from '@/assets/images/header.jpg';
  const handleSuccess = () => {
    console.log('success!');
  };
</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` | 还原初始值 |