SwipeCell 滑动单元格

参考 TDesign 最终示例,使用 re-cell 组合出单侧、双侧与图标操作场景。

演示

9:41

代码示例

<!-- 右滑操作 -->
  <re-swipe-cell class="demo-swipe-item demo-right-choice demo-swipe-item--last">
  <re-cell title="右滑单操作" note="辅助信息" :bordered="false" />

<!-- 左滑操作 -->
  <re-swipe-cell class="demo-swipe-item demo-left-delete">
  <re-cell title="左滑单操作" note="辅助信息" :bordered="false" />
  <re-swipe-cell class="demo-swipe-item demo-left-large">
  <re-cell title="左滑大列表" description="一段很长很长的内容文字" note="辅助信息" image="/static/logo.png" :bordered="false" />
  <re-swipe-cell class="demo-swipe-item demo-left-double" :right="rightTextActions" @click="onActionClick">
  <re-cell title="左滑双操作" note="辅助信息" :bordered="false" />
  <re-swipe-cell class="demo-swipe-item demo-left-multi demo-swipe-item--last">
  <re-cell title="左滑多操作" note="辅助信息" :bordered="false" />

<!-- 左右滑操作 -->
  <re-swipe-cell class="demo-swipe-item demo-double-action demo-swipe-item--last" :left="leftTextActions" :right="doubleRightActions" @click="onActionClick" >
  <re-cell title="左右滑操作" note="辅助信息" :bordered="false" />

<!-- 图标操作 -->
  <re-swipe-cell class="demo-swipe-item demo-icon-text">
  <re-cell title="左滑-带图标文本双操作" note="辅助信息" :bordered="false" />
  <re-icon class="demo-icon-btn__icon" :name="ICON_EDIT" size="18px" color="#ffffff" />
  <re-icon class="demo-icon-btn__icon" :name="ICON_DELETE" size="18px" color="#ffffff" />
  <re-swipe-cell class="demo-swipe-item demo-icon-only">
  <re-cell title="左滑-仅带图标双操作" note="辅助信息" :bordered="false" />
  <re-icon class="demo-icon-only-btn__icon" :name="ICON_EDIT" size="20px" color="#ffffff" />
  <re-icon class="demo-icon-only-btn__icon" :name="ICON_DELETE" size="20px" color="#ffffff" />
  <re-swipe-cell class="demo-swipe-item demo-icon-large demo-swipe-item--last">
  <re-cell title="左滑大列表-仅带图标双操作" description="一段很长很长的内容文字" note="辅助信息" image="/static/logo.png" :bordered="false" />
  <re-icon class="demo-icon-btn__icon" :name="ICON_EDIT" size="18px" color="#ffffff" />
  <re-icon class="demo-icon-btn__icon" :name="ICON_DELETE" size="18px" color="#ffffff" />

引入

推荐使用 easycom 模式,配置后无需手动 import 即可直接使用 <re-swipe-cell />。

API

SwipeCell Props

名称类型默认值描述必传
leftArray<SwipeAction>() => as Array<SwipeAction>-N
rightArray<SwipeAction>() => as Array<SwipeAction>-N
disabledbooleanfalse是否禁用N
customStylestring''自定义样式N

SwipeCell Events

名称参数描述
clickaction: UTSJSONObject, side: string点击时触发
openside: string打开时触发
close-关闭时触发
dragstart--
dragend--

SwipeCell Slots

名称描述
left-
default默认插槽
right-