Vue实现图片滑动验证
使用vue完成使用vue完成
实习一个星期小白对工作安排的图片滑动验证分享
1.安装依赖 附上：/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-verifyref="slideblock"@again="onAgain"@fulfilled="onFulfilled"@success="onSuccess"@fail="onFail"@refresh="onRefresh":slider-text="text":accuracy="accuracy"></slide-verify><button @click="handleClick">在父组件可以点我刷新哦</button><div>{{msg }}</div></el-dialog></div></template><script>export default {name: 'App',data() {return {msg: '',text: '向右滑动->',outerVisible: false,// 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5accuracy: 5,}},methods: {onSuccess() {console.log('验证通过')this.msg = 'login success'//滑动验证成功之后关闭弹出的窗口this.outerVisible = falsethis.$refs.slideblock.reset()},onFail() {console.log('验证不通过')this.msg = ''},onRefresh() {console.log('点击了刷新小图标')this.msg = ''},onFulfilled() {console.log('刷新成功啦！')},onAgain() {console.log('检测到非人为操作的哦！')this.msg = 'try again'// 刷新this.$refs.slideblock.reset()},handleClick() {this.$refs.slideblock.reset()},},}</script>
4.创建父组件
<template><div><button @click="btn">验证</button>//引入子组件<page-slide ref="child"></page-slide></div></template><script>//引入子组件import Slide from '@/components/Slide/Slide'export default {data() {return {outerVisible: false,}},components: {//引入子组件，子组件命名'page-slide': Slide,},methods: {btn() {//$refs获取在子组件的属性和方法，子组件需定义ref，child就是在子组件中定义的refthis.$refs.child.outerVisible = true},},}</script><style></style>
验证成功之后就会关闭弹窗，弹窗改变可以去elementui中的对话框中查看介绍，并加以修改，我是只是简单的引用一下弹窗功能。
引入element-ui和安装依赖后，代码直接复制就可以使用
特别简单
还可以用腾讯云里的滑动验证，也是特别方便，但是收费，有两万次免费使用但是期限1年
这就是我的一些分享，只是自己简单的想法，小白一枚，希望得到更好的建议
