@xylink/xy-image-validate NPM

version

图片验证组件

组件采用 xyv css 前缀进行样式私有化，可根据使用情况进行覆盖

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 '@xylink/xy-image-validate';

- import '@xylink/xy-image-validate/dist/style/index.css';
+ import '@xylink/xy-image-validate/dist/style';

然后重启项目即可

若使用 npm run eject 将配置项弹出，配置请自行摸索

可修改主题色为

变量	默认值	说明
primary-color	`#0fbda0`	主题色
danger-color	`#ff4d4f`	验证失败后的警告色
mask-color	`#000`	图片的覆盖区域渐变色，opacity 从 0 到 0.9，使用本地验证有效
active-color	`#999`	激活验证后的主题色