滑动验证插件使用

效果图

滑动验证很常见，运用也十分广泛，我觉得这一个挺好看的，推荐给大家，并且支持Vue2，Vue3

vue-puzzle-vcode使用详情

1. Vue2使用

1.1 安装

npm install vue-puzzle-vcode

yarn add vue-puzzle-vcode

1.2 使用

<template>
    <Vcode :show="isShow" @success="onSuccess" @close="onClose" />
</template>

<script lang="ts" setup>
// 引入
import Vcode from "vue3-puzzle-vcode";
</script>

1.3 简单示例

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

<script>
import Vcode from "vue-puzzle-vcode";
export default {
  data() {
    return {
      isShow: false,
    };
  },
  components: {
    Vcode,
  },
  methods: {
    submit() {
      this.isShow = true;
    },

    onSuccess(msg) {
      this.isShow = false; // 通过验证后，需要手动关闭模态框
    },

    onClose() {
      this.isShow = false;
    },
  },
};
</script>

2. Vue3使用

2.1 安装

npm install vue3-puzzle-vcode

yarn add vue3-puzzle-vcode

2.2 简单示例

<template>
    <button @click="onShow">开始验证</button>
    <Vcode :show="isShow" @success="onSuccess" @close="onClose" />
</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>