Awesome iOS Style Swipe Actions for Vue.js

vue-swipe-actions component allows the user to perform some actions when the object is scrolled as you see it on iOS.

vue swipe actions, vue swipe cards, vue swipe button, vue awesome swiper, vue 3 touch events, mobile web swipe gesture, vuetify swipe

How to make use of it:

Installation

npm install --save vue-swipe-actions

Usage

import { SwipeList, SwipeOut } from 'vue-swipe-actions';

export default {
  components: {
    SwipeOut,
    SwipeList
  }
};

import 'vue-swipe-actions/dist/vue-swipe-actions.css';

Prop	Data Type	Required	Default	Description
`items`	Array	*		An array with your data
`item-key`	String		id	Your key for :key when the list is v-for-ed, if not found array index will be used
`disabled`	Boolean		false	if true items will be disabled, and text selection will be possible (on desktop). adds class `swipeout--disabled`
`item-disabled`	Function		`js () => false`	A function that receives the item as a parameter and returns true case disabled or false if not
`threshold`	Number		45	With that property, you can fine-tune when actions are considered open
`passive-listeners`	Boolean		false	It defines if the touch events should be registered as passive or not
`revealed`	Object			An object represents the revealed status of the items, the key is the index and the value is either `left` or `right`, use it with the `.sync` modifier

Event	Payload	Description
`swipeout:click`	item	Emitted on a single click/tap on the item
`active`	Boolean	Emitted when the user is opening/closing any of the actions

Method	Params	Description
`revealRight`	index (number)	Reveals the right actions on a given index
`revealLeft`	index (number)	Reveals left actions on given index
`closeActions`	index (number)?	Closes actions on the given index, or all if no index given
`isRevealed`	index (number)	Returns the revealed status on a given index, either `false` for closed, or `left` or `right`