c-swipe

Install

Usage

// main.js// import c-swipe files into main.jsimport'c-swipe/dist/swipe.css';import{Swipe,SwipeItem}from'c-swipe';// global register componentsVue.component('swipe',Swipe);Vue.component('swipe-item',SwipeItem);

<swipev-model="index"style="text-align: center; line-height: 80px; height: 100px; background: #42b983;"><swipe-itemstyle="height: 100px; line-height: 100px">item1</swipe-item><swipe-itemstyle="height: 100px; line-height: 100px">item2</swipe-item><swipe-itemstyle="height: 100px; line-height: 100px">item3</swipe-item></swipe>

newVue({data:function(){return{index:0,// two way};},});

<linkhref="https://unpkg.com/c-swipe/dist/swipe.css"rel="stylesheet"></head><scripttype="text/javascript"src="https://unpkg.com/c-swipe/dist/swipe.js"></script>

varvueSwipe=swipe.Swipe;varvueSwipeItem=swipe.SwipeItem;newVue({el:'body',// register componentscomponents:{'swipe':vueSwipe,'swipe-item':vueSwipeItem}// ...// ...});

Options

Methods

<swiperef="swipe"><swipe-item>item1</swipe-item><swipe-item>item2</swipe-item><swipe-item>item3</swipe-item></swipe><script>exportdefault{// ...// ...mounted(){// Avoid losing contextthis.handleResize=this.handleResize.bind(this);window.addEventListener('resize',this.handleResize);},destroyed(){window.removeEventListener('resize',this.handleResize);},methods:{handleResize(){this.$refs.swipe.reset();},},// ...// ...}</script>

Preview

License