eCollect/ vue-swipe-actions
About the developer
147 Stars 
39 Forks 
MIT License 
154 Commits 
8 Opened issues 
Description
iOS style swipe actions
Services available
Contributors list
vue-swipe-actions
iOS style swipe actions for Vue.js, Live Demo (Source)
Installation
npm install --save vue-swipe-actions
import { SwipeList, SwipeOut } from 'vue-swipe-actions';
export default {
components: {
SwipeOut,
SwipeList
}
};
Basic Usage
Import Styles
import 'vue-swipe-actions/dist/vue-swipe-actions.css';
SwipeList
SwipeList component is just a helper for listing multiple SwipeOuts.
Props
| Prop | Data Type | Required|Default| Description | | ---------------- | --------- |-------- |-------|------------------ | |
items| Array | * | | An array with your data | |
item-key| String | |id | Your key for :key when list is v-for-ed, if not found array index will 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 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 representing the revealed status of the items, key is the index and the value is either
leftor
right, use it with the
.syncmodifier |
Events
| Event | Payload | Description | | ----------------------- | --------------- | -| |
swipeout:click| item | Emitted on single click/tap on the item | |
active| Boolean | Emitted when the user is opening/closing the any of the actions |
Methods
| Method | Params | Description | | ----------------------- | --------------- | -| |
revealRight| index (number) | Reveals right actions on given index | |
revealLeft| index (number) | Reveals left actions on given index | |
closeActions| index (number)? | Closes actions on given index, or all if no index given | |
isRevealed| index (number) | Returns the revealed status on a given index, either
falsefor closed, or
leftor
right|
SwipeOut
SwipeOut is the main component, representing a single item with it's actions.
Props
| Prop | Data Type | Required|Default| Description | | ---------------- | --------- |-------- |-------|------------------ | |
disabled| Boolean | |false | if true items will be disabled, and text selection will be possible (on desktop). adds class
swipeout--disabled| |
threshold| Number | |45 | With that property you can fine tune when actions are considered open |
Events
| Event | Payload | Description | | ----------------------- | --------------- | -| |
active| Boolean | Emitted when the user is opening/closing the any of the actions |
export default {
components: {
SwipeOut,
SwipeList
},
data() {
return {
enabled: true,
mockSwipeList: [
{
id: 0,
title: "Some title",
description: "some description"
},
{
id: 1,
title: "Some title",
description: "some description"
},
{
id: 2,
title: "Some title",
description: "some description"
}
]
};
},
methods: {
revealFirstRight() {
this.$refs.list.revealRight(0);
},
revealFirstLeft() {
this.$refs.list.revealLeft(0);
},
closeFirst() {
this.$refs.list.closeActions(0);
},
closeAll() {
this.$refs.list.closeActions();
},
remove(item) {
this.mockSwipeList = this.mockSwipeList.filter(i => i !== item);
// console.log(e, 'remove');
},
itemClick(e) {
console.log(e, "item click");
},
fbClick(e) {
console.log(e, "First Button Click");
},
sbClick(e) {
console.log(e, "Second Button Click");
},
},
}
Author
© 2018-9 eCollect AG.