SwipeCell 滑动单元格
使用指南
import { SwipeCell } from 'fs-ui'
export default {
components: {
fsSwipeCell: SwipeCell
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
代码演示
- 基础用法
<fs-swipe-cell
left-text="选择"
right-text="删除"
:on-close="onClose"
@click="handleClick">
<fs-cell title="商品">
<span>¥ 1.0</span>
</fs-cell>
</fs-swipe-cell>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
- 禁用左边
<fs-swipe-cell
left-text="选择"
right-text="删除"
:on-close="onClose"
disabled="left"
@click="handleClick">
<fs-cell title="商品">
<span>¥ 1.0</span>
</fs-cell>
</fs-swipe-cell>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
handleClick (position) {
console.log(position)
},
onClose (position, swipeInstance) {
if (position === 'left') {
swipeInstance.close()
} else if (position === 'right') {
setTimeout(() => {
swipeInstance.close()
}, 3000)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| disabled | 是否disable true false 'left' 'right' | Boolen，String | - |
| left-text | 左边按钮文本 | String | - |
| right-text | 右边按钮文本 | String | - |
| button-width | 按钮宽度 | Number | 70 px |
| on-close | 关闭时的回调，传入参数position, swipeInstance | Function | - |
插槽
| 插槽名 | 说明 |
|---|---|
| left | 左边按钮内容 |
| right | 右边按钮内容 |
事件
| event | 说明 | 返回值 |
|---|---|---|
| click | 点击 | position |