脚本宝典收集整理的这篇文章主要介绍了

分享一个用于登陆验证的vue组件

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

这是一个基于vue2的验证组件--vue-drag-verify。用于登陆或者注册等。可以自定义背景色和字体以及形状等属性。

这里是Demo

图片描述

安装

通过npm安装

npm install vue-drag-verify --save

插件应用

<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" 
             :circle="getShape"></drag-verify>
import Vue from 'vue'
import dragVerify from 'vue-drag-verify'

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

组件参数

名称 | 类型 | 默认值 | 说明
--- | --- | --- | ---
width | Number | 200 | 组件的宽度
height | Number | 60 | 组件的高度
text | String | swiping to the right side | 提示信息文字
successText | String | success | 验证通过时的提示信息文字
background | String | #ccc | 组件背景色
color | String | #ffffff | 组件文字颜色
progressBarBg | String | #FFFF99 | 拖拽过程中的背景颜色
completedBg | String | #66cc66 | 验证成功的背景颜色
circle | Boolean | true | 设为true,组件为圆形按钮,否则为长方形
handlerIcon | String | - | 拖拽按钮的icon
successIcon | String | - | 验证通过时拖拽按钮的icon
handlerBg | String | #fff | 拖拽按钮的背景色
textSize | String | 20px | 组件的文字大小

推荐一个找vue,angular组件的轮子工厂

总结

以上是脚本宝典为你收集整理的

分享一个用于登陆验证的vue组件

全部内容,希望文章能够帮你解决

分享一个用于登陆验证的vue组件

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过