Usage
// 安装
yarn add @xylink/xy-image-validate
// 使用
import Validate from '@xylink/xy-image-validate';
import '@xylink/xy-image-validate/dist/style/index.css';
Options
组件高度可定制,提供参数如下
参数 | 类型 | 默认值 | 说明 |
---|---|---|---|
className | string | container 的 class | |
style | React.CSSProperties | container 的 style | |
sliderClassName | string | 拖动滑块的 class | |
sliderStyle | React.CSSProperties | 拖动滑块的 style | |
sliderIcon | React.ReactNode | 滑块指向右的图标 | |
successText | string | 验证成功后文字提示 | |
autoClick | boolean | 直接进行验证,跳过第一次手动点击 | |
hideTextWhenMove | boolean | 拖动滑块时隐藏文字提示 | |
text | string | 点击验证 | 默认的提示 |
imageTips | string | 请提供验证图片 | 无验证图片的提示 |
activeText | React.ReactNode | 请拖动滑块至正确位置 | 激活后的提示 |
updateWhenFailed | boolean` | 验证失败后会自动更新验证图片 | |
useLocal | boolean | 当图片获取失败时使用默认图片 | |
onSuccess | () => void | 验证成功的回调 | |
onError | (error: 'validate' | 'fetch') => void | 请求出错时的回调 | |
fetchImage | () => Promise<{ base: string; top: number; slider: string; sliderWidth?: number; sliderHegiht?: number; }> | 获取图片信息的接口:base 为基础图片,slider 为滑块图片,top 为滑块距离顶部的高度,宽高默认为 50
|
|
onValidate | (pos: number, moveYList: number[]) => Promise<{ success: boolean }> | 验证图片的接口 |
若使用接口获取图片,请提供尺寸为 300x150
的图片
可选方法或属性
组件向外暴露了一些属性和方法,需要时可使用
interface ValidateRef {
slider: HTMLDivElement | null; // 拖动滑块的 DOM
container: HTMLDivElement | null; // 最外层的 DOM
scaleRate: number; // 图片的缩放比例
refresh: () => void; // 刷新图片的方法
recover: () => void; // 恢复初始状态
}
更换主题
组件默认主题色为 #0fbda0
,若有需要时可根据实际情况进行主题色更换
若使用 customize-cra
对项目进行默认更改,可在 config-overrides.js
文件通过下面的方式进行更改
const { override, addLessLoader } = require('customize-cra');
module.exports = override(
addLessLoader({
javascriptEnabled: true,
modifyVars: {
'primary-color': '#1890ff', // 主色
},
})
);
同时项目中的引入需要做以下修改
import Validate from 'xy-image-validate';
- import 'xy-image-validate/dist/style/index.css';
+ import 'xy-image-validate/dist/style';
然后重启项目即可
若使用
npm run eject
将配置项弹出,配置请自行摸索
可修改主题色为
变量 | 默认值 | 说明 |
---|---|---|
primary-color | #0fbda0 |
主题色 |
danger-color | #ff4d4f |
验证失败后的警告色 |
mask-color | #000 |
图片的覆盖区域渐变色,opacity 从 0 到 0.9,使用本地验证有效 |
active-color | #999 |
激活验证后的主题色 |