Vue3使用vue3-puzzle-vcode进行滑动验证

npm包地址：https://www.npmjs.com/package/vue3-puzzle-vcode

npm安装

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>

参数

事件

内嵌形式

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

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

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