表单 - swipeout - 《VUX 2.x 组件文档》

安装

局部注册

全局注册

import { Swipeout, SwipeoutItem, SwipeoutButton } from 'vux'
export default {
  components: {
    Swipeout,
    SwipeoutItem,
    SwipeoutButton
  }
}

// 在入口文件全局引入
import Vue from 'vue'
import { Swipeout, SwipeoutItem, SwipeoutButton } from 'vux'
Vue.component('swipeout', Swipeout)
Vue.component('swipeout-item', SwipeoutItem)
Vue.component('swipeout-button', SwipeoutButton)

import { Swipeout, SwipeoutItem, SwipeoutButton } from 'vux'

swipeout

插槽

名字	说明	版本要求
默认插槽	子组件插槽	—

swipeout-item

属性

名字	类型	默认值	说明	版本要求
sensitivity	number	0	滑动多少距离后开始触发菜单显示	—
auto-close-on-button-click	boolean	true	点击按钮后是否收回菜单	—
disabled	boolean	false	是否不可滑动	—
threshold	number	0.3	滑动多少距离后自动打开菜单，否则收回。可以为小于1的比例或者宽度值	—
transition-mode	string	reveal	菜单打开方式，`reveal`表示菜单不动内容滑出，`follow`表示菜单随内容滑出	—

事件

名字	参数	说明	版本要求
@on-open	—	菜单完全打开时触发	—
@on-close	—	菜单完全关闭时触发	—

插槽

名字	说明	版本要求
left-menu	左菜单	—
right-menu	右菜单	—

方法

名字	参数	说明	版本要求
open	`(direction)`	打开菜单，参数为方向
close		关闭菜单

swipeout-button

属性

名字	类型	默认值	说明	版本要求
text	string		按钮文字，同`slot=default`	—
background-color	string		背景颜色	—
type	string		内置的颜色类型，可选`primary`, `warn`	—
width	string	80	按钮宽度	—

## 样式变量

名字	默认值	说明	继承自变量
@swipeout-button-primary-bg-color	#1AAD19	—	@button-primary-bg-color
@swipeout-button-warn-bg-color	#E64340	—	@button-warn-bg-color
@swipeout-button-default-bg-color	#c8c7cd	—
@swipeout-content-bg-color	#FFF	—
@swipeout-button-font-color	#FFF	—