vue+ts 滑动验证 添加登录逻辑

import SlideVerify, { SlideVerifyInstance } from "vue3-slide-verify";
import "vue3-slide-verify/dist/style.css";


 $refs!: {
    block: HTMLFormElement  //写法1 - 推荐
  };

  msgv = ''
  text = '向右滑动->'
  accuracy = 1
  imgs = [
      '/imgs/mei1.jpeg',
      '/imgs/mei2.jpeg',
      '/imgs/mei3.jpeg'
  ]

   onAgain = () => {
    this.msgv = "检测到非人为操作的哦！ try again";
    // 刷新
    this.$refs.block.refresh();
  };

   onSuccess = (times: number) => {
     this.msgv = `login success, 耗时${(times / 1000).toFixed(1)}s`;
  };

   onFail = () => {
     this.msgv = "验证不通过";
  };

   onRefresh = () => {
     this.msgv = "点击了刷新小图标";
  };

   handleClick = () => {
    // 刷新
     this.$refs.block.refresh();
     this.msgv = "";
  };

<SlideVerify
          ref="block"
          :slider-text="text"
          :accuracy="accuracy"
          :w = '620'
          :h = '300'
          :r = '20'
          :l = '42'
          :imgs = "imgs"
          @again="onAgain"
          @success="onSuccess"
          @fail="onFail"
          @refresh="onRefresh"
      ></SlideVerify>
      <button class="btn" @click="handleClick">在父组件可以点我刷新哦</button>
      <div>{{ msgv }}</div>

tips：

代码都很明了，如果你要访问静态资源，在public/imgs  放入图片

就可以自定义图片集了，如果你网络不好的化，如果你是用装饰类来写，就一定要断言，否则程序无法运行

l 圆的长度        本身是三个圆，l r 改变滑块的形状

r 圆的半径

w 背景宽度

h 背景高度

---

本来以为直接加入login中就可以了，没想到又有坑要踩，太难了

解决  Added non-passive event listener to a scroll-blocking 'touchstart' event

npm i default-passive-events

main.ts 加入    

import 'default-passive-events'

如果eslint 报错   语言服务进程超时

直接重启 webstorm   关闭 eslint   在开启  即可解决

直接上代码

验证码组件

<template>
  <Transition name="tslide">
  <div class="modal" v-show="showModal">
    <div class="mask" @click="clmask"></div>
    <div class="modal-dialog">
        <SlideVerify
            ref="block"
            :slider-text="text"
            :accuracy="accuracy"
            @again="onAgain"
            @success="onSuccess"
            @fail="onFail"
        >
        </SlideVerify>
        <div class="msgTip" :class="{bobo:showTitle}">{{mmsg}}</div>
    </div>
  </div>
  </Transition>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import SlideVerify, { SlideVerifyInstance } from "vue3-slide-verify";
import "vue3-slide-verify/dist/style.css";


@Options({
  props: {
    mmsg: String,
    showModal: Boolean,
    showTitle: Boolean
  },
  components: {
    SlideVerify
  },
  methods: {
    onSuccess(t:number) {
      this.$emit('verOn',t)
    },
    onFail() {
      this.$emit('verOnFail')
    },
    clmask() {
      this.$emit('verclmask')
    }
  }
})
export default class verify extends Vue {
  mmsg!: string
  showModal!: boolean
  showTitle!: boolean

  $refs!: {
    block: HTMLFormElement  //写法1 - 推荐
  };

  text = '向右滑动->'
  accuracy = 1

  onAgain = () => {
    this.mmsg = "检测到非人为操作的哦！ try again";
    // 刷新
    this.$refs.block.refresh();
  };

}
</script>

<style lang="scss">
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  transition: all .5s;
  &.tslide-enter-active{
    top: 0;
  }
  &.tslide-leave-active{
    top: -100%;
  }
  &.tslide-enter {
    top: -100%;
  }
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: .5;
  }
  .modal-dialog {
    position: relative;
    width: 310px;
    height: 216px;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -100px;
    .slide-verify-slider{
      margin-top: -5px;
      height: 43px;
    }
    .msgTip {
      position: absolute;
      bottom: 61px;
      left: 0px;
      color: white;
      background: red;
      width: 100%;
      opacity: 0;
      transition: opacity 1.2s;
      text-align: center;
    }
    .bobo {
      opacity: 1;
    }
  }
}
</style>

父组件调用

<verify :showModal="vshow" :mmsg="vmmsg" :showTitle="vshowtitle"
  @verOn="handleVerOn"
  @verOnFail="handleVerOnFail"
          @verclmask="handleverclmask"
  ></verify>

  handleVerOn(t: number) {
    this.vmmsg = `验证成功, 耗时${(t / 1000).toFixed(1)}s`
    this.vshowtitle = true
    console.log(this.vmmsg,'---')
    setTimeout(()=> {
      this.vshow = false
    },2000)
    this.isVer = true
  }

  handleVerOnFail() {
    this.vshowtitle = true
    this.vmmsg = '验证不通过'
    setTimeout(()=> {
      this.vshowtitle = false
    },1000)
    console.log(this.vmmsg,'===')
  }

  openVer() {
    this.vshow = true
  }

  handleverclmask() {
    this.vshow = false
  }

  onSubmit() {
    if (this.isVer) {
      。。。
    } else {
      message.warning('验证码不通过')
    }
  }

tips：

父子组件传值一定要理解清楚，

Overview | Vue Class Component (vuejs.org)