vue 滑动验证插件

• 实现效果

 

• 安装插件

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

•  全局注册

//main.js

//引入插件
import SlideVerify from 'vue-monoplasty-slide-verify';
Vue.use(SlideVerify);

• 使用 

<template>
    <div>
        <slide-verify 
          :l="42"
          :r="10"
          :w="310"
          :h="155"
          @success="onSuccess" 
          @fail="onFail"      
          @refresh="onRefresh"
          :slider-text="text">
        </slide-verify>
    </div>
</template>
<script>
  export default {
    data(){
      return {
        text:'向右拖动滑块填充拼图', //滑块底部文字
      }
    },
    methods: {
      onSuccess() {
        console.log('验证成功的回调')
      },
      onFail() {
        console.log('验证失败的回调')
      },
      onRefresh() {
        console.log('按钮刷新的回调')
      }
    }
  }
</script>

 

• 更多功能请查看文档

• github文档地址： https://github.com/monoplasty/vue-monoplasty-slide-verify