vue-slider-action

vue swipe action


Keywords
vuejs, vue-swipe-actions, vue, swipe
License
MIT
Install
npm install vue-slider-action@0.1.0

Documentation

vue-slider-actions

simple swipe action for vue
vue 移动端滑动操作组件,支持左右滑动

Installation

npm install --save vue-slider-actions

Basic Usage

import { SliderAction } from 'vue-slider-actions';
//or    
import SliderAction from 'vue-slider-actions';
Vue.use(SliderAction);

API

Prop Data Type Required Default Description
text String false text of button
showArrow Boolean false true whether to show arrow
threshold Number false 0.5 With that property you can fine tune when actions are considered open. Based on action withd
handleClick Function false Emitted on click item
autoClose Function, Boolean false false Whether to close automatically

slots

Prop Description
left left button
right right button
default item text

example

<div id="app">
    <div v-for="(item, i) in list" :key="item.key" class="list_item">
      <slider-action :autoClose="true" :text="item.title">
          <div>{{item.title}}{{i}}</div>
          <template slot="left">
            <div class="custom-action info">info</div>
            <div class="custom-action replay">replay</div>
          </template>
          <template slot="right">
            <div class="custom-action remove">remove</div>
            <div class="custom-action cancel">cancel</div>
          </template>
          <div slot="extra">more</div>
        </slider-action>
      </div>
    <div class="list_item">
      <slider-action >
          <div>fasfasf</div>
          <template slot="right">
            <div class="custom-action remove">remove</div>
            <div class="custom-action cancel">cancel</div>
          </template>
          <div slot="extra">more</div>
        </slider-action>
      </div>
  </div>
<script>
export default {
  name: 'App',
  data() {
    return{
      list: [
      {title: 'title-320', key: 'title-1'},
      {title: 'title-22', key: 'title-2'},
      {title: 'title-3f', key: 'title-3'}
      ]
    }
  },
  methods: {
    autoClose(e) {
      console.log(e)
      if(window.confirm('close?')) return true;
      return false
    },
  },
}
</script>