vue插件滑动验证码
在很多地方,我们都可以在登录的界面看到上面的滑动验证。下面具体说一下如何引入和使用1.引入插件npm install --save vue-monoplasty-slide-verify2.在main文件中全局引入并注册//滑动验证import SlideVerify from 'vue-monoplasty-slide-verify';Vue.use(SlideVerify)3.页面中使用<
·
在很多地方,我们都可以在登录的界面看到上面的滑动验证(上面图片我们项目有改过样式,如果按照下面安装可能样式有点小区别)。下面具体说一下如何引入和使用
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 ̄)づ
❤如果喜欢比卡丘分享的文章,就给比卡丘点个关注吧!(๑′ᴗ‵๑)づ╭❤~
❤鉴于个人经验有限,所有观点及技术研点,如有异议,请直接回复讨论(请勿发表攻击言论)
拿走,不用谢!!!送人玫瑰,手留余香
更多推荐
已为社区贡献1条内容
所有评论(0)