vue插件滑动验证码

在很多地方，我们都可以在登录的界面看到上面的滑动验证(上面图片我们项目有改过样式，如果按照下面安装可能样式有点小区别)。下面具体说一下如何引入和使用
1.引入插件

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

2.在main文件中全局引入并注册

//滑动验证
import SlideVerify from 'vue-monoplasty-slide-verify';
Vue.use(SlideVerify)

3.页面中使用

 <slide-verify ref="slideblock" 
    @success="onSuccess"        //成功回调
    @again="onAgain"             //检测是否为非人为操作
    @fulfilled="onFulfilled"       //刷新成功回调
    @fail="onFail"                //验证不通过回调
    @refresh="onRefresh"          //刷新按钮小图标回调
    :slider-text="textSlider"   //滑块底纹文字
    :w="352"               //canvas画布的宽，另外还有“h”为画布的高
    :l="64"         //滑块的边长，另外还有“r”为滑块突出圆的半径
    :imgs="imgs"   //后面展示的图片，可以是一张，可以是多张
    :accuracy="accuracy"   // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
  ></slide-verify>

<script>
import img0 from '@/assets/img/img.png';
import img1 from '@/assets/img/img22.png';
export default {
  data() {
    return {'',
      textSlider: "",
      imgs: [
        img0,
        img1,
      ],
      accuracy: 5, 
    };
  },
  methods: {
    onSuccess(){
        console.log('验证通过');
    },
    onFail(){
        console.log('验证不通过');
        this.msg = ''
    },
    onRefresh(){
        console.log('点击了刷新小图标');
        this.msg = ''
    },
    onFulfilled() {
        console.log('刷新成功啦！');
    },
    onAgain() {
        console.log('检测到非人为操作的哦！');
    },
    }
    }
    </script>

❤如果文章对您有所帮助，就在文章的右上角或者文章的末尾点个赞吧！(づ￣ 3￣)づ
❤如果喜欢比卡丘分享的文章，就给比卡丘点个关注吧！(๑′ᴗ‵๑)づ╭❤～
❤鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复讨论(请勿发表攻击言论)

拿走,不用谢!!!送人玫瑰,手留余香