vue前端登录各种验证

1.vue2-verify 有多种验证方式

安装：

npm install vue2-verify -S

使用：

import Verify from ‘vue2-verify’

<Verify :type="1" @success="success"></Verify>

components: {Verify},

type有5种
type=’1’

type为1.png
type=’2’

type为2.png
type=’3’

type为3.png
type=’4’

type为4.png
type=’5’

type为5.png

2.vue-drag-verify 简单滑动验证，可配置自己想要的颜色

简单滑动验证.png
安装：

npm install vue-drag-verify -S

使用：

import dragVerifyfrom ‘vue-drag-verify’

<drag-verify
        :width="width"
        :height="height"
        :text="text"
        :success-text="successText"
        :background="background"
        :progress-bar-bg="progressBarBg"
        :completed-bg="completedBg"
        :handler-bg="handlerBg"
        :handler-icon="handlerIcon"
        :text-size="textSize"
        :success-icon="successIcon"
        ref="Verify"
      >
      </drag-verify>

components: {dragVerify},
data () {
    return {
      handlerIcon: "fa fa-angle-double-right",
      successIcon: "fa fa-check",
      background: "#cccccc",
      progressBarBg: "#4b0",
      completedBg: "#66cc66",
      handlerBg: "#fff",
      text: "请将滑块拖动到右侧",
      successText: "验证成功",
      width: 320,
      height: 42,
      textSize: "18px",
      isCircle:'true'
    }
  },

3.vue-monoplasty-slide-verify只有滑动验证（挺好用的）

只有滑动验证.png
安装：

npm install —save vue-monoplasty-slide-verify

使用：

import SlideVerify from ‘vue-monoplasty-slide-verify’; Vue.use(SlideVerify)

<div class="page-slidecode">
        <slide-verify
          :l="42"
          :r="10"
          :w="310"
          :h="155"
          :imgs="bgimgs"
          @success="onSuccess"
          @fail="onFail"
          @refresh="onRefresh"
          :slider-text="text"
        ></slide-verify>
        <div>{{msg}}</div>
      </div>

import aa from "@/assets/image/aa.jpg"  //  如果使用网络图片资源就无需引入
import bb from "@/assets/image/bb.jpg"  //  如果使用网络图片资源就无需引入
data () {
    return {
      msg: "",
      // bgimgs:[ aa, bb],本地图片
      bgimgs:[],    //  如果使用网络图片资源就用该值
      text: "向右滑动~"
    }
  },
  methods: {
    onSuccess() {
      this.msg = "登录成功~";
    },
    onFail() {
      this.msg = "登录失败！";
    },
    onRefresh() {
      this.msg = "重新生成验证码";
    }
  }

作者：w_派大星
链接：https://www.jianshu.com/p/de33ef26472e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。