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

<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");
    },
  },
}

eCollect / vue-swipe-actions

readme

vue-swipe-actions

Installation

Basic Usage

Import Styles

SwipeList

Props

Events

Methods

SwipeOut

Props

Events

Author