vue.js 登录界面_vue.js的可刷卡界面

vue.js 登录界面

VueSwing (VueSwing)

A Vue.js wrapper for Swing. Swing is a swipeable cards interface. The swipe-left/swipe-right for yes/no input. As seen in apps like Jelly and Tinder, and many others.

Swing的Vue.js包装器。 Swing是可滑动刷卡的界面。 向左/向右滑动可输入是/否。 正如在Jelly和Tinder等应用程序中看到的那样。

View demo 查看演示 Download Source 下载源

正在安装 (Installing)

npm install --save vue-swing

用法 (Usage)

import VueSwing from 'vue-swing'

Vue.component('vue-swing', VueSwing)

<vue-swing
  @throwout="throwout"
  @throwin="throwin"
  :config="config"
>
  <div class="box">Throw me!</div>
</vue-swing>

物产 (Properties)

VueSwing takes in one config Object, which can consist of any of these keys:

VueSwing接受一个config对象，该对象可以包含以下任何一个键：

Name	Description	Default
isThrowOut	Invoked in the event of dragend. Determines if element is being thrown out of the stack.	Element is considered to be thrown out when throwOutConfidence is equal to 1.
allowedDirections	Array of directions in which cards can be thrown out.	[VueSwing.Direction.DOWN, VueSwing.Direction.LEFT, VueSwing.Direction.RIGHT, VueSwing.Direction.UP].
throwOutConfidence	Invoked in the event of dragmove. Returns a value between 0 and 1 indicating the completeness of the throw out condition.	Ration of the absolute distance from the original card position and element width.
throwOutDistance	Invoked when card is added to the stack. The card is thrown to this offset from the stack.	The value is a random number between minThrowOutDistance and maxThrowOutDistance.
minThrowOutDistance	In effect when throwOutDistance is not overwritten.	450.
maxThrowOutDistance	In effect when throwOutDistance is not overwritten.	500.
rotation	Invoked in the event of dragmove. Determine the rotation of the element.	Rotation is equal to the proportion of horizontal and vertical offset times the maximumRotation constant.
maxRotation	In effect when rotation is not overwritten.	20.
transform	Invoked in the event of dragmove and every time the physics solver is triggered.	Uses CSS transform to translate element position and rotation.

名称	描述	默认
isThrowOut	在dragend的情况下调用。 确定是否将元素抛出堆栈。	当throwOutConfidence等于1时，认为元素被抛出。
allowedDirections	可以抛出卡片的方向数组。	[VueSwing.Direction.DOWN，VueSwing.Direction.LEFT，VueSwing.Direction.RIGHT，VueSwing.Direction.UP]。
throwOutConfidence	在dragmove调用。 返回0到1之间的值，指示抛出条件的完整性。	距原始卡片位置和元素宽度的绝对距离的比率。
throwOutDistance	将卡添加到堆栈中时调用。 卡被从堆栈中抛出此偏移量。	该值是介于minThrowOutDistance和maxThrowOutDistance之间的随机数。
minThrowOutDistance	当throwOutDistance不被覆盖时throwOutDistance 。	450。
maxThrowOutDistance	当throwOutDistance不被覆盖时throwOutDistance 。	500
rotation	在dragmove调用。 确定元素的旋转。	旋转等于水平和垂直偏移的比例乘以maximumRotation常数。
maxRotation	当rotation不被覆盖时有效。	20
transform	在dragmove和每次触发物理求解器时调用。	使用CSS变换来转换元素的位置和旋转。

翻译自: https://vuejsexamples.com/a-swipeable-cards-interface-with-vue-js/

vue.js 登录界面