vue滑动图片验证的方式

本篇文章使用的是一款中间件  

1. 第一步使用npm安装

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

2. 在main.js中引用

   import SlideVerify from 'vue-monoplasty-slide-verify';
   
   Vue.use(SlideVerify);

3. 创建个div实现页面布局  把以下代码粘贴里面

   <slide-verify :l="42"
               :r="10"
               :w="310"
               :h="155"
               slider-text="向右滑动"
               @success="onSuccess"//成功的回调函数
               @fail="onFail"//失败的回调函数
               @refresh="onRefresh"//重置的回调函数
               ></slide-verify>
   <div>{
       {msg}}</div>

4. 把以下方法引入到scrpit中

   export default {
           name: 'App',