滑块验证

效果

安装

// vue2
npm install vue-puzzle-vcode --save

// vue3
npm install vue3-puzzle-vcode --save

vue2 使用

<!--
    @name: 滑块验证
    @description: 自己写的滑块验证
    @author:  jsopy
    @params: success 成功回调 close 关闭回调 fail 失败回调
-->
<template>
  <div>
    <Vcode
      :show="Vcodedata.show"
      :canvasWidth="Vcodedata.canvasWidth"
      :canvasHeight="Vcodedata.canvasHeight"
      :puzzleScale="Vcodedata.puzzleScale"
      :sliderSize="Vcodedata.sliderSize"
      :range="Vcodedata.range"
      :imgs="Vcodedata.imgs"
      :successText="Vcodedata.successText"
      :failText="Vcodedata.failText"
      :sliderText="Vcodedata.sliderText"
      @success="onSuccess"
      @close="onClose"
      @fail="onFail"
    />
    <el-button
      class="submit-btn"
      :loading="typeBtnLoading"
      type="primary"
      @click="submit"
      style="width: 100%; height: 40px"
      >点击验证</el-button
    >
  </div>
</template>

<script>
import Vcode from "vue-puzzle-vcode";
export default {
  data() {
    return {
      isShow: false,
      typeBtnLoading: false,
      Vcodedata: {
        // 是否显示验证码弹框 默认值false
        show: false,
        // 验证码宽度 默认值310
        canvasWidth: 400,
        // 验证码高度 默认值160
        canvasHeight: 200,
        // 拼图块大小比例 0.2~2 值越大块越大 默认值1
        puzzleScale: 1,
        // 拖动滑块 尺寸 单位px默认值50
        sliderSize: 40,
        // rang 误差范围, 默认值10
        range: 10,
        // 验证图片地址，可以是多个 要是不写默认自己canvas画一个
        imgs: [
          "https://dianyuan-public.oss-cn-shenzhen.aliyuncs.com/static/testcheck/testcheck1.png",
          "https://dianyuan-public.oss-cn-shenzhen.aliyuncs.com/static/testcheck/testcheck2.png",
          "https://dianyuan-public.oss-cn-shenzhen.aliyuncs.com/static/testcheck/testcheck3.png",
        ],
        // 验证通过的文字
        successText: "验证通过",
        // 验证失败的文字
        failText: "验证失败",
        // 滑动滑块文字
        sliderText: "向右滑动完成拼图",
      },
    };
  },
  components: {
    Vcode,
  },
  methods: {
    submit() {
      this.typeBtnLoading = true;
      this.Vcodedata.show = true;
    },

    onSuccess() {
      this.Vcodedata.show = false; // 通过验证后，需要手动关闭模态框
      this.typeBtnLoading = false;
      this.$emit("success", true);
    },
    onFail() {
      console.log("失败了");

      this.typeBtnLoading = false;
    },

    onClose() {
      console.log("关闭了");
      this.Vcodedata.show = false;
      this.typeBtnLoading = false;
    },
  },
};
</script>

vue3 使用

<template>
  <div class="box">
    <div class="box_Vcode">
      <Vcode
        :show="Vcodedata.show"
        :canvasWidth="Vcodedata.canvasWidth"
        :canvasHeight="Vcodedata.canvasHeight"
        :puzzleScale="Vcodedata.puzzleScale"
        :sliderSize="Vcodedata.sliderSize"
        :range="Vcodedata.range"
        :imgs="Vcodedata.imgs"
        :successText="Vcodedata.successText"
        :failText="Vcodedata.failText"
        :sliderText="Vcodedata.sliderText"
        @success="onSuccess"
        @close="onClose"
        @fail="onFail"
      />
    </div>
    <el-button
      class="submit-btn"
      :loading="typeBtnLoading"
      type="primary"
      @click="onShow"
      style="width: 100%; height: 40px"
      >点击验证</el-button
    >
  </div>
</template>

<script setup>
import { ref } from "vue";
import Vcode from "vue3-puzzle-vcode";
const emits = defineEmits(["success", "close", "fail"]);
const typeBtnLoading = ref(false);
const Vcodedata = ref({
  // 是否显示验证码弹框 默认值false
  show: false,
  // 验证码宽度 默认值310
  canvasWidth: 400,
  // 验证码高度 默认值160
  canvasHeight: 200,
  // 拼图块大小比例 0.2~2 值越大块越大 默认值1
  puzzleScale: 1,
  // 拖动滑块 尺寸 单位px默认值50
  sliderSize: 40,
  // rang 误差范围, 默认值10
  range: 10,
  // 验证图片地址，可以是多个 要是不写默认自己canvas画一个
  imgs: [
    "https://dianyuan-public.oss-cn-shenzhen.aliyuncs.com/static/testcheck/testcheck1.png",
    "https://dianyuan-public.oss-cn-shenzhen.aliyuncs.com/static/testcheck/testcheck2.png",
    "https://dianyuan-public.oss-cn-shenzhen.aliyuncs.com/static/testcheck/testcheck3.png",
  ],
  // 验证通过的文字
  successText: "验证通过",
  // 验证失败的文字
  failText: "验证失败",
  // 滑动滑块文字
  sliderText: "向右滑动完成拼图",
});

const onShow = () => {
  Vcodedata.value.show = true;
  typeBtnLoading.value = true;
};

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

const onFail = () => {
  console.log("失败了");
  typeBtnLoading.value = false;
};

const onSuccess = () => {
  Vcodedata.value.show = false;
  typeBtnLoading.value = false;
  emits("success");
  // onClose() // 验证成功，手动关闭模态框
};
</script>

<style scoped>
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
  background: #f5f5f5;
}
.box_Vcode {
  background: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.1);
}
button {
  margin-top: 20px;
}
</style>