简单的滑动拼图验证

1.需要先安装一下  vue-puzzle-vcode 插件

2.在 Open in lntegrated Terminal 开放集成终端 打开输入

npm i -S vue-puzzle-vcode

3.看官网的一些配置   官网

4.引用

import Vcode from "vue-puzzle-vcode";

5.在components中注册组件

components: {
    Vcode,
  },

6.完整代码

<template>
  <div>
    <Vcode :show="isShow" @success="success" @close="close" />
    <el-button @click="submit">登录</el-button>
  </div>
</template>
 
<script>
import Vcode from "vue-puzzle-vcode";
export default {
  data() {
    return {
      isShow: true // 验证码模态框是否出现
    };
  },
  components: {
    Vcode
  },
  methods: {
    submit() {
      this.isShow = true;
    },
    // 用户通过了验证
    success(msg) {
      this.isShow = false; // 通过验证后，需要手动隐藏模态框
    },
    // 用户点击遮罩层，应该关闭模态框
    close() {
      this.isShow = false;
    }
  }
};
</script>

7.效果图