Skip to content
当前页

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

属性类型默认值说明
valueboolean-是否通过
textstring请按住滑块拖动未拖动时候显示文字
successTextstring验证通过验证成功后显示文本
heightstring|string40高度
widthstring|string260宽度
circlebooleanfalse是否圆角
wrapStyleany-外层容器样式
contentStyleany-主体内容样式
barStyleany-bar 样式
actionStyleany-拖拽按钮样式

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

属性类型默认值说明
srcstring-图片地址
imgWidthnumber-图片宽度
imgWrapStyleany-图片外层容器样式
minDegreenumber-最小旋转角度
maxDegreenumber-最大旋转角度
diffDegreenumber-误差角度
valueboolean-是否通过
textstring请按住滑块拖动未拖动时候显示文字
successTextstring验证通过验证成功后显示文本
heightstring|string40高度
widthstring|string260宽度
circlebooleanfalse是否圆角
wrapStyleany-外层容器样式
contentStyleany-主体内容样式
barStyleany-bar 样式
actionStyleany-拖拽按钮样式

Methods

名称回调参数说明
resumeFunction还原初始值