vue实现图片验证

一、插件安装

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

二、应用插件

在main.js内全局引用

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

Vue.use(SlideVerify);

三、页面代码

<slide-verify
  :l="42"
  :r="10"
  :w="310"
  :h="155"
  @success="onSuccess"
  @fail="onFail"
  :slider-text="text"  //滑动框内提示文字
></slide-verify>

四、js代码

//图片验证成功
async onSuccess() {
  //成功后的逻辑代码
},
//验证失败
onFail() {
  this.alertMsg("验证失败", "error");
  //失败后的逻辑代码
},

五、预览