Verify 验证码

用于某些表单操作的验证。

全局配置

在全局配置组件属性。

Verify组件属性配置

app.provide(VERIFY_KEY, {
  mode: 'pop',
  type: 'blockPuzzle',
  imgSize: { width: '620px', height: '310px' },
  get: data => {
    return axios.post('/api/captcha/get', data).then(res => res.data);
  },
  check: data => {
    return axios.post('/api/captcha/check', data).then(res => res.data);
  },
  // others props...
});

提示

该组件基于captcha库封装，后端也需要进行集成并提供相关接口，示例中的获取和校验验证码接口均为Mock静态数据，仅供展示使用。

基础用法

验证码支持滑块拼图和点击文字两种形式，可以通过type属性进行切换。

展示方式

验证码组件默认为弹窗模式，可以通过mode属性设置为固定显示模式。

属性

属性名	说明	类型	默认值
model-value / v-model2.1.2	验证成功的结果 对应success事件中验证结果的captchaVerification属性。	string	—
visible / v-model:visible2.1.2	是否显示验证码弹窗 仅mode属性为pop时生效。	boolean	false
get	获取验证码方法	Function (data: VerifyReqData) => Promise<VerifyRepData>	—
check	校验验证码方法	Function (data: VerifyReqData) => Promise<VerifyRepData>	—
type	验证码类型 blockPuzzle:滑块拼图 clickWord:点击文字。	VerifyType 'blockPuzzle' | 'clickWord'	block-puzzle
mode	验证码的显示方式 pop:弹出式 fixed:固定式。	VerifyMode 'pop' | 'fixed'	pop
v-space	验证码图片和移动条容器的间隔	number	5
explain	滑动条内的提示 仅当type为blockPuzzle时生效。 :	string	向右滑动完成验证
img-size	验证码图片大小 其中包含了width、height两个参数，分别代表图片的宽度和高度。	object { width: string; height: string; }	object { width: '310px', height: '155px' }

事件

事件名	说明	类型
ready	验证码生成完毕	Function (instance: any) => void
success	验证成功	Function (result: VerifyResult) => void

类型声明

import Verify from './verify.vue';

/**
 * 验证码类型
 * @remarks blockPuzzle:方块拼图 clickWord:点击文字
 */
export type VerifyType = 'blockPuzzle' | 'clickWord';

/**
 * 验证码模式
 * @remarks pop:弹出式 fixed:固定式
 */
export type VerifyMode = 'pop' | 'fixed';

/**
 * 获取验证码/校验验证码接口请求数据类型
 */
export interface VerifyReqData {
  captchaType: VerifyType;
  pointJson: string;
  token: string;
}

/**
 * 获取验证码/校验验证码接口返回数据类型
 */
export interface VerifyRepData {
  captchaType: VerifyType;
  jigsawImageBase64: string;
  originalImageBase64: string;
  pointJson: string;
  result: boolean;
  secretKey: string;
  token: string;
}

/**
 * 验证码组件属性
 */
export interface VerifyProps {
  /**
   * 获取验证码方法
   * @param data 请求参数
   * @returns 获取验证码的Promise
   */
  get?: (data: VerifyReqData) => Promise<VerifyRepData>;
  /**
   * 校验验证码方法
   * @param data 请求参数
   * @returns 校验验证码的Promise
   */
  check?: (data: VerifyReqData) => Promise<VerifyRepData>;
  /**
   * 验证码类型
   * @remarks blockPuzzle:滑块拼图 clickWord:点击文字
   * @defaultValue 'blockPuzzle'
   */
  type?: VerifyType;
  /**
   * 验证码的显示方式
   * @remarks pop:弹出式 fixed:固定式
   * @defaultValue 'pop'
   */
  mode?: VerifyMode;
  /**
   * 验证码图片和移动条容器的间隔，默认单位是px
   * @defaultValue 5
   */
  vSpace?: number;
  /**
   * 滑动条内的提示，仅当type为blockPuzzle时生效
   * @defaultValue '向右滑动完成验证'
   */
  explain?: string;
  /**
   * 验证码图片大小，其中包含了width、height两个参数，分别代表图片的宽度和高度
   * @defaultValue { width: '310px', height: '155px' }
   */
  imgSize?: { width: string; height: string };
}

/**
 * 验证结果
 */
export interface VerifyResult {
  captchaVerification: string;
}

/**
 * 验证码组件事件
 */
export type VerifyEmits = {
  /**
   * 验证码生成完毕
   */
  ready: [instance: any];
  /**
   * 验证成功
   */
  success: [result: VerifyResult];
};

/**
 * 验证码组件实例
 */
export type VerifyInstance = InstanceType<typeof Verify>;