vue滑块校验

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

1 import Vue from 'vue';
2 import SlideVerify from 'vue-monoplasty-slide-verify';
3 
4 Vue.use(SlideVerify);

2. 组件封装

 1 <template>
 2   <div>
 3     <slide-verify
 4       :l="42"
 5       :r="10"
 6       :w="390"
 7       :h="240"
 8       :slider-text="sliderText"
 9       @success="onSuccess"
10       @fail="onFail"
11       @refresh="onRefresh"
12       ref="sliderVerifyBlock"
13     ></slide-verify>
14   </div>
15 </template>
16 
17 <script>
18 import SlideVerify from "vue-monoplasty-slide-verify";
19 import Vue from "vue";
20 Vue.use(SlideVerify);
21 export default {
22   name: "sliderVerify",
23   data() {
24     return {
25       sliderText:'向右滑动'
26     };
27   },
28   methods: {
29     onSuccess() {
30       this.$emit('verified')
31     },
32     onFail() {
33       this.sliderText = "校验失败，请向右滑动完成验证！"
34       this.$emit('unverified')
35     },
36     onRefresh() {
37     }
38   }
39 };
40 </script>

3. 父组件调用

 1 <template>
 2   <div>
 3           <slider-verify v-if="verifyVisible" @verified="submit" ref="sliderV"></slider-verify>
 4   </div>
 5 </template>
 6 
 7 <script>
 8 import sliderVerify from "@/components/sliderVerify";
 9 
10 export default {
11   components: { sliderVerify },
12   data() {
13       verifyVisible: true
14     };
15   },
16   methods: {
17     submit() {
18       Http.get("/saveAddSave", this.form)
19         .then(res => {
20           this.verifyVisible = false;
21         });
22     }
23   }
24 };
25 </script>

4. 

ParamTypeDescribeVersion
l Number block length  
r Number block circle radius  
w Number canvas width  
h Number canvas height  
sliderText String Slide filled right 1.0.5
imgs Array picture array 背景图数组，默认值 [] 1.1.0
accuracy Number 滑动验证的误差范围，默认值 5 1.1.1
show Boolean 是否显示刷新按钮，默认值 true 1.1.1



EventTypeDescribeVersion
success Function success callback 返回时间参数，单位为毫秒
fail Function fail callback  
refresh Function 点击刷新按钮后的回调函数  
again Function 检测到非人为操作滑动时触发的回调函数 1.1.1
fulfilled Function 刷新成功之后的回调函数 1.1.1

 

重置：
this.$refs.slideVerify.reset()
posted @ 2020-11-20 16:06  shine_lovely  阅读(609)  评论(0)  编辑  收藏  举报