行为验证（captcha）

行为验证组件。

提示

使用NODEJS后端框架编写应用程序使用到行为验证时可安装 npm i @itriton/captcha github (opens new window) gitee (opens new window) 配合使用

基本使用

<itu-captcha
  ref="captcha"
  :background-image="captchaList[current].captchaBackgroundImage"
  :jigsaw="captchaList[current].captchaJigsaw"
  @info="handleInfo"
  @reset="handleReset"
  @end="handleEnd"
></itu-captcha>

export default {
  data() {
    return {
      captchaList: [
        {
          captchaBackgroundImage: "请查看案例图片",
          captchaJigsaw: "请查看案例图片",
        },
        {
          captchaBackgroundImage: "请查看案例图片",
          captchaJigsaw: "请查看案例图片",
        },
      ],
      current: 0,
    };
  },
  methods: {
    handleShow() {
      this.$refs.captcha.show();
      this.handleReset();
    },
    handleInfo() {
      this.$showToast("您点击了信息图标");
    },
    handleReset() {
      // 模拟请求接口获取背景图和拼图
      setTimeout(() => {
        this.current = this.current === 1 ? 0 : 1;
        this.$refs.captcha.hideLoading();
      }, 1000);
    },
    handleEnd(e) {
      // this.$showToast(`滑动结束，X轴：${e.x}`)
      // 1. x=177 是正确的 2. x=168 是正确的
      if (this.current == 0 && e.x > 175 && e.x < 180) {
        this.$refs.captcha.success();
      } else if (this.current == 1 && e.x > 165 && e.x < 170) {
        this.$refs.captcha.success();
      } else {
        this.$refs.captcha.error();
      }
      this.$refs.captcha.reset();
    },
  },
};

Props

属性名	类型	默认值	说明
themeColor	String	#2979ff	主题色
width	Number	270	图片宽度(px)
height	Number	144	图片高度(px)
jigsaw	String	-	拼图
backgroundImage	String	-	背景图片
successColor	String	#00aa00	成功颜色
successText	String	通过验证	成功文案
errorColor	String	#de715b	失败颜色
errorText	String	请正确拼合图像	失败文案
placeholder	String	拖动滑块完成拼图	滑动提示内容
copyright	String	由itriton提供技术支持	版权声明
isHideFooter	Boolean	false	是否隐藏底部

Events

事件名称	类型	说明
@reset(immediately:boolean)	Function	重置方法，可选参数immediately，立即执行
@info	Function	点击消息
@end	Function	滑动结束

Methods

注意：此方法需要通过ref调用

事件名称	类型	说明
show	Function	显示组件
hide	Function	隐藏组件
success	Function	校验成功
error	Function	校验失败
showLoading	Function	显示加载中
hideLoading	Function	隐藏加载中