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 |
revealed | Object | | | An object representing the revealed status of the items, key is the index and the value is either left or right, use it with the .sync modifier |
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 false for closed, or left or 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 |
<swipe-list ref="list" class="card" :disabled="!enabled" :items="mockSwipeList" item-key="id" @swipeout:click="itemClick" > <template v-slot="{ item, index, revealLeft, revealRight, close }"> <!-- item is the corresponding object from the array --> <!-- index is clearly the index --> <!-- revealLeft is method which toggles the left side --> <!-- revealRight is method which toggles the right side --> <!-- close is method which closes an opened side --> <div class="card-content"> <!-- style content how ever you like --> <h2>{{ item.title }}</h2> <p>{{ item.description }}</p> <span>{{ index }}</span> </div> </template> <!-- left swipe side template and v-slot:left="{ item }" is the item clearly --> <!-- remove if you dont wanna have left swipe side --> <template v-slot:left="{ item, close }"> <div class="swipeout-action red" title="remove" @click="remove(item)"> <!-- place icon here or what ever you want --> <i class="fa fa-trash"></i> </div> <div class="swipeout-action purple" @click="close"> <!-- place icon here or what ever you want --> <i class="fa fa-close"></i> </div> </template> <!-- right swipe side template and v-slot:right"{ item }" is the item clearly --> <!-- remove if you dont wanna have right swipe side --> <template v-slot:right="{ item }"> <div class="swipeout-action blue"> <!-- place icon here or what ever you want --> <i class="fa fa-heart"></i> </div> <div class="swipeout-action green"> <!-- place icon here or what ever you want --> <i class="fa fa-heart"></i> </div> </template> <template v-slot:empty> <div> <!-- change mockSwipeList to an empty array to see this slot in action --> list is empty ( filtered or just empty ) </div> </template> </swipe-list>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.
