BasicDragVerify

拖动校验组件

BasicDragVerify

Usage

<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

<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	还原初始值