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 | 还原初始值 |
摸鱼低代码 mfish-nocode