vue滑块校验

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

import Vue from 'vue';
import SlideVerify from 'vue-monoplasty-slide-verify';

Vue.use(SlideVerify);

2. 组件封装

<template>
  <div>
    <slide-verify
      :l="42"
      :r="10"
      :w="390"
      :h="240"
      :slider-text="sliderText"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
      ref="sliderVerifyBlock"
    ></slide-verify>
  </div>
</template>

<script>
import SlideVerify from "vue-monoplasty-slide-verify";
import Vue from "vue";
Vue.use(SlideVerify);
export default {
  name: "sliderVerify",
  data() {
    return {
      sliderText:'向右滑动'
    };
  },
  methods: {
    onSuccess() {
      this.$emit('verified')
    },
    onFail() {
      this.sliderText = "校验失败，请向右滑动完成验证！"
      this.$emit('unverified')
    },
    onRefresh() {
    }
  }
};
</script>

3. 父组件调用

<template>
  <div>
          <slider-verify v-if="verifyVisible" @verified="submit" ref="sliderV"></slider-verify>
  </div>
</template>

<script>
import sliderVerify from "@/components/sliderVerify";

export default {
  components: { sliderVerify },
  data() {
      verifyVisible: true
    };
  },
  methods: {
    submit() {
      Http.get("/saveAddSave", this.form)
        .then(res => {
          this.verifyVisible = false;
        });
    }
  }
};
</script>

4. 

Param	Type	Describe	Version
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

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

 

重置：
this.$refs.slideVerify.reset()