如何实现滑动验证码的效果？

一、关于插件

【vue-puzzle-verification】

二、项目实战

• 安装插件

yarn add vue-puzzle-verification

• 引入声明组件并使用

<script>
import PuzzleVerification from "vue-puzzle-verification";
export default {
  name: "Puzzle",
  components: { PuzzleVerification },
  data() {
    return {
      isShow: false,
      puzzleImgList: [
        "https://img.chinasongzhuang.cn/uploadimg/image/20200219/20200219180104_83804.jpg"
      ]
    };
  },
  methods: {
    handleClick() {
      this.isShow = !this.isShow;
    },
    handleSuccess() {
      this.$message.success("验证成功，即将进行下一步。");
    }
  }
};
</script>

<template>
  <div>
    "Puzzle"
    <div class="login-box">
      <button @click="handleClick">拼图形滑块</button>
      <div class="puzzle-box">
        <PuzzleVerification
          v-model="isShow"
          width="300"
          height="200"
          :puzzleImgList="puzzleImgList"
          blockType="square"
          :onSuccess="handleSuccess"
        />
      </div>
    </div>
  </div>
</template>

【更多属性配置】

---

---

相似插件