vivo-ui/src/components/swipeout/README.md

vivo ui component lib for vue

# Swipeout 滑动删除

> Swipeout 可以在列表的某一项中向左滑动出现操作按钮，类似微信聊天列表中的滑动功能。

[demo](demo/components/swipeout.html ':ignore')

## 使用方法

```
<swipeout
  :style="{ fontWeight: 500 }"
  @on-open="onOpen"
  @on-close="onClose"
  :threshold="0.4"
  ref="swipeoutone"
>
  <div slot="left-button">
    <swipeout-button @on-click="onClick" :auto-close="false" :type="'success'">收藏</swipeout-button>
    <swipeout-button :type="'delete'">删除</swipeout-button>
    <swipeout-button :type="'gray'">忽略</swipeout-button>
  </div>
  <div slot="right-button">
    <swipeout-button>
      收藏
    </swipeout-button>
    <swipeout-button :type="'delete'">删除</swipeout-button>
  </div>
  <div class="test">vui-swipeout</div>
</swipeout>
```
```
import {Swipeout,SwipeoutButton} from 'vivo-ui';

export default {
  components: { Swipeout, SwipeoutButton },
  data () {
    return {
      disabled: false
    }
  },
  methods: {
    toggle () {
      this.disabled = !this.disabled
    },
    open (position) {
      this.$refs.swipeouttewo.open(position)
    },
    close () {
      this.$refs.swipeouttewo.close()
    },
    onOpen () {
      console.log('打开了')
    },
    onClose () {
      console.log('关闭了')
    },
    onClick () {
      if (confirm('确认删除？')) {
        this.$refs.swipeoutone.close()
      }
    }
  }
}
```
# <label style="color:red">swipeout</label>

## 属性

名称|类型|必填|默认值|描述
:-:|:-:|:-:|:-:|:-:
disabled|`Boolean`|`N`|`false`|是否不可滑动
prefixCls|`String`|`N`|`vui-swipeout`|class前缀
threshold|`Number`|`N`|`0.3`|阈值，滑动多少后打开按钮群


## 插槽

名称|必填|说明
:-:|:-:|:-:
left-button|`N`|左侧按钮
right-button|`N`|右侧按钮


## 事件

名称|参数|说明
:-:|:-:|:-:
on-open|--|按钮群打开时触发
on-close|--|按钮群关闭时触发


## 方法

名称|参数|说明
:-:|:-:|:-:
open|position|打开按钮群（left,right）
close|--|关闭按钮群

# <label style="color:red">swipeout-button</label>

## 属性

名称|类型|必填|默认值|描述
:-:|:-:|:-:|:-:|:-:
auto-close|`Boolean`|`N`|`true`|点击按钮后是否自动关闭
type|`String`|`N`|`default`|按钮样式类型，default-默认，delete-删除，success-成功，info-信息，warning-警告，gray-置灰


## 插槽

名称|必填|说明
:-:|:-:|:-:
default|`N`|内容区域


## 事件

名称|参数|说明
:-:|:-:|:-:
on-click|--|点击按钮时触发


## 按钮颜色变量

名称|值
:-:|:-:
default|<label style="color:#336DD6">#336DD6</label>
delete|<label style="color:#D23934">#D23934</label>
success|<label style="color:#1AAD19">#1AAD19</label>
info|<label style="color:#46b8da">#46b8da</label>
warnin|<label style="color:#f0ad4e">#f0ad4e</label>
gray|<label style="color:#c8c7cd">#c8c7cd</label>