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