Vue Card Swipe Save Abandoned
A touch slider for vue.js, support sliding in any direction to switch cards, compatible with PC and mobile.
Project README
vue-card-swipe
A touch slider for vue.js, support sliding in any direction to switch cards, compatible with PC and mobile.
Online Demo
Install
$ npm i --save @eshengsky/vue-card-swipe
Import
using module
// ES6 modules
import { CardSwipe, CardSwipeItem } from '@eshengsky/vue-card-swipe';
// or CommonJS
const { CardSwipe, CardSwipeItem } = require('@eshengsky/vue-card-swipe');
using script tag
<script src="./node_modules/@eshengsky/vue-card-swipe/dist/vue-card-swipe.min.js"></script>
const { CardSwipe, CardSwipeItem } = window.VueCardSwipe;
Then register the components:
Vue.component('card-swipe', CardSwipe);
Vue.component('card-swipe-item', CardSwipeItem);
Usage
<card-swipe>
<card-swipe-item>
<div style="background-image: linear-gradient(to right, #fe686c 0%, #fe3c71 100%)">1</div>
</card-swipe-item>
<card-swipe-item>
<div style="background-image: linear-gradient(to right, #ffaa00 0%, #ff8800 100%);">2</div>
</card-swipe-item>
<card-swipe-item>
<div style="background-image: linear-gradient(to right, #add0f8 0%, #5ca2f8 100%);">3</div>
</card-swipe-item>
</card-swipe>
Props
| Property | Description | Type | Default |
|---|---|---|---|
| stack | Card stacking direction, left: stack to the left, right: stack to the right, center: stack left and right |
String |
center |
| max-distance | The maximum drag distance, less than the distance card recovery, greater than the distance swipe to the next card, the unit px |
Number |
60 |
| ratio | The aspect ratio of the first card | Number |
2 |
| show-indicators | Whether to show the indicators | Boolean |
true |
Event
| Event | Description | Params |
|---|---|---|
| resume | trigger when card recovery (Card drag distance is less than max-distance) |
index Current card index, starting from 1 |
| change | trigger when swipe to the next card (Card drag distance is greater than max-distance) |
lastIndex Previous card index, index Current card index, starting from 1 |
Instance Property
currentIndex
Get the index of the current card, starting with 1
this.$refs.myCardSwipe.currentIndex;
Build
$ npm run build
Test
$ npm test
License
MIT
Open Source Agenda is not affiliated with "Vue Card Swipe" Project. README Source: eshengsky/vue-card-swipe
Stars
27
Open Issues
18
Last Commit
1 year ago
License
Open Source Agenda Badge
