"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /* eslint-disable react-hooks/exhaustive-deps */ var _react = require("react"); var _react2 = _interopRequireDefault(_react); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var captcha = null; var Captcha = function Captcha(props) { var refInstance = props.refInstance; // 验证通过后调用 var onBizResultCallback = function onBizResultCallback(bizResult) { if (!bizResult) { // Message.error("校验不通过!"); } }; var isIE = function isIE() { if (!!window.ActiveXobject || "ActiveXObject" in window || /Trident\/7\./.test(navigator.userAgent)) { return true; } else { return false; } }; var initAliyunCaptchaFunc = function initAliyunCaptchaFunc(callback) { window.initAliyunCaptcha({ SceneId: props.SceneId, // 场景ID。根据步骤二新建验证场景后,您可以在验证码场景列表,获取该场景的场景ID 1roms2lg prefix: props.prefix, // 身份标。开通阿里云验证码2.0后,您可以在控制台概览页面的实例基本信息卡片区域,获取身份标 mode: props.mode ? props.mode : "popup", // 验证码模式。popup表示要集成的验证码模式为弹出式。无需修改 element: "#captcha-element", // 页面上预留的渲染验证码的元素,与原代码中预留的页面元素保持一致。 button: "#captcha-button", // 触发验证码弹窗的元素。button表示单击登录按钮后,触发captchaVerifyCallback函数。您可以根据实际使用的元素修改element的值 captchaVerifyCallback: props.captchaVerifyCallback ? props.captchaVerifyCallback : function () {}, // 业务请求(带验证码校验)回调函数,无需修改 onBizResultCallback: props.onBizResultCallback ? props.onBizResultCallback : onBizResultCallback, // 业务请求结果回调函数,无需修改 getInstance: function getInstance(instance) { callback && callback(instance); }, // 绑定验证码实例函数,无需修改 slideStyle: props.slideStyle ? props.slideStyle : { width: 360, height: 40 }, // 滑块验证码样式,支持自定义宽度和高度,单位为px。其中,width最小值为320 px language: props.language ? props.language : "cn" // 验证码语言类型,支持简体中文(cn)、繁体中文(tw)、英文(en) }); return function () { // 必须删除相关元素,否则再次mount多次调用 initAliyunCaptcha 会导致多次回调 captchaVerifyCallback if (document.getElementById("aliyunCaptcha-mask")) { if (isIE()) { document.getElementById("aliyunCaptcha-mask").removeNode(true); document.getElementById("aliyunCaptcha-window-popup").removeNode(true); } else { document.getElementById("aliyunCaptcha-mask").remove(); document.getElementById("aliyunCaptcha-window-popup").remove(); } } }; }; var initAliYun = function initAliYun(callback) { if (!window.initAliyunCaptcha) return; if (document.getElementById("aliyunCaptcha-mask")) { if (isIE()) { document.getElementById("aliyunCaptcha-mask").removeNode(true); document.getElementById("aliyunCaptcha-window-popup").removeNode(true); } else { document.getElementById("aliyunCaptcha-mask").remove(); document.getElementById("aliyunCaptcha-window-popup").remove(); } } initAliyunCaptchaFunc(callback); }; // 开放Api (0, _react.useImperativeHandle)(refInstance, function () { return { initAliYun: initAliYun }; }); return _react2.default.createElement( "div", { className: "captcha-component" }, _react2.default.createElement("div", { id: "captcha-button" }), _react2.default.createElement("div", { id: "captcha-element" }) ); }; exports.default = (0, _react.forwardRef)(function (props, ref) { return _react2.default.createElement(Captcha, _extends({}, props, { refInstance: ref })); });