New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

vue3-puzzle-vcode

Package Overview
Dependencies
Maintainers
1
Versions
67
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue3-puzzle-vcode

**DEMO**: https://isluo.com/work/vue-puzzle-vcode/

  • 1.1.7
  • latest
  • npm
  • Socket score

Version published
Weekly downloads
628
increased by193.46%
Maintainers
1
Weekly downloads
 
Created
Source

vue3-puzzle-vcode npm npm downloads

DEMO: https://isluo.com/work/vue-puzzle-vcode/

img

安装

  npm install vue3-puzzle-vcode --save

最简单例子

<template>
    <Vcode :show="isShow" @success="onSuccess" @close="onClose"/>
    <button @click="onShow">开始验证</button>
</template>

<script setup>
  import { ref } from "vue";
  import Vcode from "vue3-puzzle-vcode";

  const isShow = ref(false);

  const onShow = () => {
    isShow.value = true;
  };

  const onClose = () => {
    isShow.value = false;
  };

  const onSuccess = () => {
    onClose(); // 验证成功,手动关闭模态框
  };
</script>

参数

字段类型默认值说明
showBooleanfalse是否显示验证码弹框
typeString"modal""modal"模态框形式 / "inside"内嵌形式
canvasWidthNumber310主图区域的宽度,单位 px
canvasHeightNumber160主图区域的高度,单位 px
puzzleScaleNumber1拼图块(小的拼图)的大小比例,0.2 ~ 2 ,数字越大,拼图越大
sliderSizeNumber50左下角用户拖动的那个滑块的尺寸,单位 px
rangeNumber10判断成功的误差范围,单位 px, 滑动的距离和拼图的距离小于等于此值时,会判定重合
imgsArraynull自定义图片,见下方例子
successTextString"验证通过!"验证成功时的提示文字
failTextString"验证失败,请重试"验证失败时的提示文字
sliderTextString"拖动滑块完成拼图"下方滑动条里的文字
classNameString""给根元素一个class类用于自定义样式
zIndexNumber999设置根元素一个层级z-index

事件

事件名返回值说明
success偏差值验证通过时会触发,返回值是用户移动的距离跟目标距离的偏差值 px
fail偏差值验证失败时会触发,返回值同上
closenull用户点击遮罩层的回调
resetnull用户手动点击右上角刷新按钮时触发的回调

内嵌形式

入参type="inside", 将启用内嵌模式 应该用一个元素包裹<Vcode />

<template>
  <div class="box">
    <Vcode type="inside" :show="isShow" />
  </div>
</template>

<style>
  .box{
    position: relative;
    width: 320px;
    height: auto;
  }
</style>

Nuxt.js注意

Nuxt.js中如果发现样式有问题,请使用npm install vue3-puzzle-vcode@1.1.2-nuxt这个版本试试。

FAQs

Package last updated on 25 Jan 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc