diff --git a/packages/effects/common-ui/src/components/captcha/slider-translate-captcha/index.vue b/packages/effects/common-ui/src/components/captcha/slider-translate-captcha/index.vue index ece152050..a1b156548 100644 --- a/packages/effects/common-ui/src/components/captcha/slider-translate-captcha/index.vue +++ b/packages/effects/common-ui/src/components/captcha/slider-translate-captcha/index.vue @@ -53,7 +53,7 @@ const state = reactive({ startTime: 0, endTime: 0, pieceX: 0, - PieceY: 0, + pieceY: 0, moveDistance: 0, isPassing: false, showTip: false, @@ -73,10 +73,10 @@ function setLeft(val: string) { const verifyTip = computed(() => { return state.isPassing - ? $t('ui.captcha.sliderRotateSuccessTip', [ + ? $t('ui.captcha.sliderTranslateSuccessTip', [ ((state.endTime - state.startTime) / 1000).toFixed(1), ]) - : $t('ui.captcha.sliderRotateFailTip'); + : $t('ui.captcha.sliderTranslateFailTip'); }); function handleStart() { state.startTime = Date.now(); @@ -93,7 +93,7 @@ function handleDragEnd() { const { pieceX } = state; const { diffDistance } = props; - if (Math.abs(pieceX - state.moveDistance) >= (diffDistance || 10)) { + if (Math.abs(pieceX - state.moveDistance) >= (diffDistance || 5)) { setLeft('0'); state.moveDistance = 0; } else { @@ -161,7 +161,7 @@ function initCanvas() { pieceCanvasCtx.drawImage(img, 0, 0, canvasWidth, canvasHeight); const pieceLength = squareLength + 2 * circleRadius + 3; const sx = state.pieceX; - const sy = state.PieceY - 2 * circleRadius - 1; + const sy = state.pieceY - 2 * circleRadius - 1; const imageData = pieceCanvasCtx.getImageData( sx, sy, @@ -185,12 +185,12 @@ function draw(ctx1: CanvasRenderingContext2D, ctx2: CanvasRenderingContext2D) { squareLength + 2 * circleRadius, canvasWidth - (squareLength + 2 * circleRadius), ); - state.PieceY = getRandomNumberByRange( + state.pieceY = getRandomNumberByRange( 3 * circleRadius, canvasHeight - (squareLength + 2 * circleRadius), ); - drawPiece(ctx1, state.pieceX, state.PieceY, CanvasOpr.Fill); - drawPiece(ctx2, state.pieceX, state.PieceY, CanvasOpr.Clip); + drawPiece(ctx1, state.pieceX, state.pieceY, CanvasOpr.Fill); + drawPiece(ctx2, state.pieceX, state.pieceY, CanvasOpr.Clip); } // 绘制拼图切块 @@ -246,7 +246,7 @@ function resume() { state.dragging = false; state.isPassing = false; state.pieceX = 0; - state.PieceY = 0; + state.pieceY = 0; basicEl.resume(); resetCanvas(); @@ -290,7 +290,7 @@ onMounted(() => { {{ verifyTip }}
- {{ defaultTip || $t('ui.captcha.sliderRotateDefaultTip') }} + {{ defaultTip || $t('ui.captcha.sliderTranslateDefaultTip') }}
diff --git a/packages/locales/src/langs/en-US/ui.json b/packages/locales/src/langs/en-US/ui.json index 5bfd5d07a..0179c2252 100644 --- a/packages/locales/src/langs/en-US/ui.json +++ b/packages/locales/src/langs/en-US/ui.json @@ -32,8 +32,11 @@ "sliderDefaultText": "Slider and drag", "alt": "Supports img tag src attribute value", "sliderRotateDefaultTip": "Click picture to refresh", + "sliderTranslateDefaultTip": "Click picture to refresh", "sliderRotateFailTip": "Validation failed", "sliderRotateSuccessTip": "Validation successful, time {0} seconds", + "sliderTranslateFailTip": "Validation failed", + "sliderTranslateSuccessTip": "Validation successful, time {0} seconds", "refreshAriaLabel": "Refresh captcha", "confirmAriaLabel": "Confirm selection", "confirm": "Confirm", diff --git a/packages/locales/src/langs/zh-CN/ui.json b/packages/locales/src/langs/zh-CN/ui.json index c0679581a..da2dbeb04 100644 --- a/packages/locales/src/langs/zh-CN/ui.json +++ b/packages/locales/src/langs/zh-CN/ui.json @@ -31,8 +31,11 @@ "sliderSuccessText": "验证通过", "sliderDefaultText": "请按住滑块拖动", "sliderRotateDefaultTip": "点击图片可刷新", + "sliderTranslateDefaultTip": "点击图片可刷新", "sliderRotateFailTip": "验证失败", "sliderRotateSuccessTip": "验证成功,耗时{0}秒", + "sliderTranslateFailTip": "验证失败", + "sliderTranslateSuccessTip": "验证成功,耗时{0}秒", "alt": "支持img标签src属性值", "refreshAriaLabel": "刷新验证码", "confirmAriaLabel": "确认选择",