Swipeout
demo 原始链接demo 源码编辑文档组件源码
二维码
安装
局部注册
全局注册
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 | | 关闭菜单 | |
属性
名字 | 类型 | 默认值 | 说明 | 版本要求 |
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 | — | |
相关 issue
贡献者
该组件(包含文档)迭代次数 23,贡献人数 3airyland万刚wg
发布日志