分享一個(gè)用于登陸驗(yàn)證的vue組件

FWHeart 發(fā)布于2019-08-21 17:27 / 2126人閱讀

這是一個(gè)基于vue2的驗(yàn)證組件--vue-drag-verify。用于登陸或者注冊等。可以自定義背景色和字體以及形狀等屬性。

這里是Demo

安裝

通過npm安裝

npm install vue-drag-verify --save

插件應(yīng)用

import Vue from "vue"
import dragVerify from "vue-drag-verify"

export default {
  name: "app",
  components:{
    dragVerify
  }
}

組件參數(shù)

名稱 | 類型 | 默認(rèn)值 | 說明
--- | --- | --- | ---
width | Number | 200 | 組件的寬度
height | Number | 60 | 組件的高度
text | String | swiping to the right side | 提示信息文字
successText | String | success | 驗(yàn)證通過時(shí)的提示信息文字
background | String | #ccc | 組件背景色
color | String | #ffffff | 組件文字顏色
progressBarBg | String | #FFFF99 | 拖拽過程中的背景顏色
completedBg | String | #66cc66 | 驗(yàn)證成功的背景顏色
circle | Boolean | true | 設(shè)為true,組件為圓形按鈕，否則為長方形
handlerIcon | String | - | 拖拽按鈕的icon
successIcon | String | - | 驗(yàn)證通過時(shí)拖拽按鈕的icon
handlerBg | String | #fff | 拖拽按鈕的背景色
textSize | String | 20px | 組件的文字大小

推薦一個(gè)找vue,angular組件的輪子工廠

云服務(wù)器 GPU云服務(wù)器 vue組件 vue組件開發(fā) vue父子組件通訊 vue輪播組件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/89529.html

相關(guān)文章

基于 Vue 的后臺管理系統(tǒng)前端實(shí)踐

摘要：輸入框內(nèi)容過濾產(chǎn)品有一個(gè)需求是，在搜索用戶信息時(shí)，只能通過郵箱搜索，并且只能輸入字母數(shù)字以及。我選擇了輸入框的值這里的坑就是需要在中更新值，因?yàn)樵剡@時(shí)才刷新。是否有一定要用的必要類似的管理系統(tǒng)涉及到不同頁面之間的交互都很少。初始化項(xiàng)目使用 Vue-cli3 初始化項(xiàng)目1 安裝 Element UI安裝 Vue-i18n，做相關(guān)配置2,3 原則上需要對 Element 也做 I18...

scwang90 2019-08-23 12:13 評論0 收藏0
vue2 + vuex 高度還原餓了么 App，與官方后臺真實(shí)數(shù)據(jù)交互，獲取商品信息，實(shí)現(xiàn)登陸、購

摘要：注此項(xiàng)目純屬個(gè)人瞎搞，正常下單請選擇餓了么官方客戶端。目前下單功能已經(jīng)實(shí)現(xiàn)，下單功能完全采用官網(wǎng)真實(shí)數(shù)據(jù)，可以控制官網(wǎng)發(fā)短信或者打電話到指定的手機(jī)號碼，下單后可以在手機(jī)中查看并且付款。前言 vue2的發(fā)布后自己也研究了一段時(shí)間，奈何公司的技術(shù)棧是以react為主，沒有機(jī)會好好利用vue2去做一個(gè)完整的項(xiàng)目。雖然寫了幾個(gè)demo，但和寫一個(gè)完整的項(xiàng)目還是有很大差別的。于是自己想著用空余...

JeOam 2019-08-20 14:26 評論0 收藏0
vue+node+mongodb 搭建一個(gè)完整博客

摘要：開發(fā)一個(gè)完整博客流程前言前段時(shí)間剛把自己的個(gè)人網(wǎng)站寫完，于是這段時(shí)間因?yàn)槭虑椴皇翘啵阏砹艘幌拢瑢懥藗€(gè)簡易版的博客系統(tǒng)服務(wù)端用的是框架進(jìn)行開發(fā)技術(shù)棧目錄結(jié)構(gòu)講解的配置文件放置代碼文件項(xiàng)目參數(shù)配置的文件日志打印文件項(xiàng)目依賴模塊 Vue + Node + Mongodb 開發(fā)一個(gè)完整博客流程前言前段時(shí)間剛把自己的個(gè)人網(wǎng)站寫完，于是這段時(shí)間因?yàn)槭虑椴皇翘啵阏砹艘幌拢瑢懥藗€(gè)簡易...

Miracle_lihb 2019-06-26 17:32 評論0 收藏0
sSpring Boot多模塊+ Shiro + Vue：前后端分離登陸整合，權(quán)限認(rèn)證（一）

摘要：前言本文主要使用來實(shí)現(xiàn)前后端分離的認(rèn)證登陸和權(quán)限管理，適合和我一樣剛開始接觸前后端完全分離項(xiàng)目的同學(xué)，但是你必須自己搭建過前端項(xiàng)目和后端項(xiàng)目，本文主要是介紹他們之間的互通，如果不知道這么搭建前端項(xiàng)目的同學(xué)可以先找別的看一下。前言本文主要使用spring boot + shiro + vue來實(shí)現(xiàn)前后端分離的認(rèn)證登陸和權(quán)限管理，適合和我一樣剛開始接觸前后端完全分離項(xiàng)目的同學(xué)，但是你必...

macg0406 2019-08-19 11:38 評論0 收藏0