mpvue小程序制作短信滑块验证功能

微信小程序中不提供滑块人机验证功能

利用微信官方提供的movable-area组件可以模拟做出一个滑块验证功能代码

演示效果为下图：

在mpvue项目中写成组件代码如下（样式可以自定义）：

<template>
  <div class="slider-check-box">
    <div class="slider-mask"></div>
    <div class="slider-content">
      <i class="iconfont icon-shanchu close-valid" @click="closeThisValid"></i>
      <p class="sc-title">请完成以下滑块验证</p>
      <movable-area style='width:auto;height: 50px;overflow: hidden;background-color: #eee;box-sizing: border-box;'>
        <movable-view style='height:50px;width:50px;background-color: #409eff;box-sizing: border-box;' direction='horizontal' inertia='true' @change.stop="onChange" :x="x" :disabled="validDisabled">
          <i class="iconfont" :class="{'icon-duigou':validDisabled,'icon-shuangyou':!validDisabled}" style="width: 100%;height: 50px;line-height: 50px;font-size: 20px;text-align: center;display: block;color: white;"></i>
        </movable-view>
      </movable-area>
    </div>
  </div>
</template>

data() {
  return {
    validDisabled:false,
    x:0,
  };
},
methods: {
  onChange(e){
    if(parseInt(e.x) < 200){
      this.x = 0;
    }else if(parseInt(e.x) >= 200){
      this.validDisabled = true;
      this.x = 210;
    }
  },
  closeThisValid(){
    this.$emit('closeValid');
  },
},
watch:{
  x(val){
    if(val == 210){
      this.$emit('handleSuccessFun','success');
    }
  },
}

<style scoped>
.slider-check-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
}
.slider-mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 10;
}
.slider-content {
  position: absolute;
  left: 50%;
  top: 20%;
  width: 300px;
  background-color: white;
  margin-left: -150px;
  padding: 20px;
}
.sc-title {
  font-size: 20px;
  text-align: center;
  color: #333;
  line-height: 40px;
  margin-bottom: 20px;
}
.close-valid {
  font-size: 20px;
  position: absolute;
  right: 0;
  top: 0;
  padding: 0 10px;
  color: #666;
}
</style>