Vue实现图片滑动验证
使用vue完成
实习一个星期小白对工作安排的图片滑动验证分享
1.安装依赖 附上:https://www.npmjs.com/package/vue-monoplasty-slide-verify/v/1.1.2
npm install --save vue-monoplasty-slide-verify
2.main.js中引入
import Vue from 'vue';
import SlideVerify from 'vue-monoplasty-slide-verify';
Vue.use(SlideVerify);
3.创建子组件
<template>
<div>
//el-dialog element-ui中引入的组件 对话框
//visible.sync属性了解于elmentui中对话框介绍
<el-dialog :visible.sync="outerVisible">
<slide-verify
ref="slideblock"
@again="onAgain"
@fulfilled="onFulfilled"
@success="onSuccess"
@fail="onFail"
@refresh="onRefresh"
:slider-text="text"
:accuracy="accuracy"
></sl