Need help with vue-swipe-actions?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

eCollect
147 Stars 39 Forks MIT License 154 Commits 8 Opened issues

Description

iOS style swipe actions

Services available

!
?

Need anything else?

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

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.