Swipeout 组件使用教程
优质
小牛编辑
135浏览
2023-12-01
安装
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'
插槽
| 名字 | 说明 | 版本要求 |
| 默认插槽 | 子组件插槽 | -- |
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| 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 | 关闭菜单 |
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| 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 | -- |