幾種常見的注冊登錄驗證(vue)

本文收集幾種常見的注冊登錄驗證源碼，分別有滑動驗證，拼圖驗證，組詞驗證。

滑動驗證

git地址： https://gitee.com/monoplasty/vue-monoplasty-slide-verify

01.安裝包：

npm i vue-monoplasty-slide-verify -S

02. main.js中導(dǎo)入并使用 ：

      import SlideVerify from 'vue-monoplasty-slide-verify'
Vue.use(SlideVerify)
    

03.Template 模板中 ：

      <el-card class="cover">
      <slide-verify
              :l="42"
              :r="10"
              :w="310"
              :h="155"
              slider-text="向右滑動"
              @success="onSuccess"
              @fail="onFail"
              @refresh="onRefresh">
      </slide-verify>
    </el-card>
    

04.style中css ：

      .cover{
  width: fit-content;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1000;
}
    

05.js部分 ：

      <script>
export default {
  name: 'App',
  data() {
    return {
      loginAdmin: {}
    }
  },
  methods: {
    onSuccess() { //滑塊驗證通過之后觸發(fā)的
      alert("驗證成功")
      // 下面是跳轉(zhuǎn)首頁代碼
    },
    onFail() {
      alert("驗證失敗")
    },
    onRefresh() {
     
    }
  }
}
</script>
    

到此，效果已出現(xiàn)。

簡單滑動驗證

01.安裝包 ：

npm install vue-drag-verify -S

02.template代碼 ：

      <template>
  <div id="app">
    <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>
  </div>
</template>
    

02.js代碼（需component中注冊） ：

      <script>
import dragVerify from 'vue-drag-verify'
export default {
  name: 'App',
  components: { dragVerify },
  data() {
    return {
      handlerIcon: "fa fa-angle-double-right",
      successIcon: "fa fa-check",
      background: "#cccccc",
      progressBarBg: "#4b0",
      completedBg: "#ff1234",
      handlerBg: "#fff",
      text: "請將滑塊拖動到右側(cè)",
      successText: "驗證成功",
      width: 320,
      height: 42,
      textSize: "18px",
      isCircle: 'true'
    }
  }
}
</script>
    

滑動驗證合集（一個包，5種驗證方式都包含） 

文檔地址 ： https://gitcode.net/mirrors/mizuka-wu/vue2-verify?utm_source=csdn_github_accelerator

01.安裝包 ：

npm install vue2-verify -S

02.template代碼（type值不同驗證方式不同） ：

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

03.js代碼 ：

      <script>
import Verify from 'vue2-verify'
export default {
  name: 'App',
  components: {Verify},
  data() {
    return {
    }
  },
  methods: {
    success(e){
      //成功后的返回
      alert("成功")
    }
  }
}
</script>
    

———— type 值不同驗證方式不同：

當(dāng)type = 1

type = 2

type = 3

type = 4

type = 5

動動發(fā)財?shù)氖贮c個贊吧！