注册全局组件 vue.js_vue.js验证组件，用于登录或注册

注册全局组件 vue.js

Vue拖动验证 (vue-drag-verify)

This is a vue component, which is sliding to unlock some functionalities, such as login or sign up. This is used to protect your web app from attack.

这是一个Vue组件，可以滑动以解锁某些功能，例如登录或注册。 这用于保护您的Web应用程序免受攻击。

View demo 查看演示 Download Source 下载源

安装 (Installation)

npm install vue-drag-verify --save

用法 (Usage)

<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
  }
}

道具 (Props)

Property	Type	Default	Description
width	Number	200	The width of the component
height	Number	60	The height of the component
text	String	swiping to the right side	The text shows on the component
successText	String	success	The text shows when it’s successful
background	String	#ccc	The background color of the component
color	String	#ffffff	The color of the text
progressBarBg	String	#FFFF99	The backgound color of the progress bar
completedBg	String	#66cc66	The backgound color of the component when the button dragged to the right side
circle	Boolean	true	If true, the shape of component is round
handlerIcon	String	-	The icon of handler
successIcon	String	-	The icon of handler when the button dragged to the right side
handlerBg	String	#fff	The background color of the handler
textSize	String	20px	Font size of prompt message

属性	类型	默认	描述
宽度	数	200	组件的宽度
高度	数	60	组件的高度
文本	串	向右滑动	文本显示在组件上
successText	串	成功	文字显示成功的时间
背景	串	#ccc	组件的背景色
颜色	串	#ffffff	文字颜色
progressBarBg	串	＃FFFF99	进度条的背景色
已完成	串	＃66cc66	当按钮拖动到右侧时组件的背景色
圈	布尔型	真正	如果为true，则组件的形状为圆形
handlerIcon	串	--	处理程序的图标
successIcon	串	--	按钮拖动到右侧时的处理程序图标
handlerBg	串	#fff	处理程序的背景色
字体大小	串	20像素	提示消息的字体大小

事件 (Event)

回叫 (passcallback)

Emitted when pass verify, the handler dragged to the right side.

通过验证时发出，处理程序拖到右侧。

翻译自: https://vuejsexamples.com/a-vue-js-verification-component-for-login-or-sign-up/

注册全局组件 vue.js