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>