vue-monoplasty-slide-verify自定义拼图验证码

1.安装

npm install --save vue-monoplasty-slide-verify

2.在main.js中引入全局组件SlideVerify

import SlideVerify from 'vue-monoplasty-slide-verify';

Vue.use(SlideVerify);

<slide-verify 
              :l="42"
              :r="20"
              :w="360"
              :h="140"
              @success="onSucess"
              @fail="onFail"
              @refresh="onRefresh"
              :style="{ width: '100%' }"
              class="slide-box"
              ref="slideBlock"
              :slider-text="msg"
            ></slide-verify>

/deep/.slide-box {
  width: 100%;
  position: relative;
  box-sizing: border-box;
  canvas {
    position: absolute;
    left: 0;
    top: -120px;
    display: none;
    width: 100%;
    box-sizing: border-box;
  }
  .slide-verify-block {
    width: 85px;
    height: 136px;
  }
  .slide-verify-refresh-icon {
    top: -120px;
    display: none;
  }
  &:hover {
    canvas {
      display: block;
    }
    .slide-verify-refresh-icon {
      display: block;
    }
  }
}

 methods:{
// 拼图成功
    onSuccess(times) {
      let ms = (times / 1000).toFixed(1);
      this.msg = "login sucess,耗时" + ms + "s";
    },
    // 拼图失败
    onFail() {
      // 重新刷新拼图
      this.onRefresh();
    },
    // 拼图刷新
    onRefresh() {
      this.msg = "再试一次";
    },
}

以上代码可以直接套用到组件内，第二个图片代码，不用嵌套在样式结构中，可以直接放在样式结构外面 

参数详情可参考: https://gitee.com/monoplasty/vue-monoplasty-slide-verify