vCode组件的使用

第一步首先是安装

 npm install vue-puzzle-vcode --save

第二部引入并且使用

import Vcode from "vue-puzzle-vcode";

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

1、组件常用的参数 show 用来判断 组件是否显示

2、组件的三个方法：
2.1: success 验证通过时会触发，返回值是用户移动的距离跟目标距离的偏差值 px
2.2: fail 验证失败时会触发，返回值同上
2.3: close 用户点击遮罩层的回调

第三简单的举个栗子

<template>
  <div>
    <Vcode :show="isShow" @success="success" @close="close" />
    <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;
    },
    // 用户通过了验证
    success(msg) {
      this.isShow = false; // 通过验证后，需要手动隐藏模态框
    },
    // 用户点击遮罩层，应该关闭模态框
    close() {
      this.isShow = false;
    },
  },
};
</script>

第四自定义图片

<template>
  <Vcode :imgs="[Img1, Img2]" />
</template>

<script>
import Img1 from "~/assets/img1.png";
import Img2 from "~/assets/img2.png";

export default {
  data() {
    return {
      Img1,
      Img2,
    };
  },
};
</script>

ok，，，，未完待续