vue滑块校验

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

 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>

 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>