SwipeCell 滑动单元格

高阶手势侧滑单元格组件，支持向左或向右滑动展示自定义操作菜单（置顶、标为已读、编辑、删除等），全量适配微信小程序、H5 与 App 触控跟手体验。

---

代码示例

1. 基础右侧滑动 (Right Actions)

传入 right-actions 数组快速生成右侧侧滑菜单按钮。

<template>
  <view class="list">
    <mu-swipe-cell :right-actions="rightActions" @click-action="onActionClick">
      <mu-cell title="微信消息通知" label="Muzhiyu UI 极奢设计系统" icon="message-square" is-link />
    </mu-swipe-cell>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const rightActions = ref([
  { text: '置顶', bg: '#475569', icon: 'arrow-up' },
  { text: '删除', bg: '#F43F5E', icon: 'trash-2' }
])

function onActionClick({ action, position }) {
  console.log('点击操作按键:', action.text, position)
}
</script>

---

2. 双向侧滑 (Left & Right Actions)

同时配置 left-actions 与 right-actions，可支持向右滑（例如：标为已读）和向左滑（例如：编辑、删除）两个方向的侧滑菜单。

<template>
  <mu-swipe-cell
    :left-actions="leftActions"
    :right-actions="rightActions"
    @click-action="onActionClick"
  >
    <view class="msg-item">
      <text class="title">向右滑动已读，向左滑动删除</text>
    </view>
  </mu-swipe-cell>
</template>

<script setup>
import { ref } from 'vue'

const leftActions = ref([
  { text: '标为已读', bg: '#10B981', icon: 'check', width: 150 }
])

const rightActions = ref([
  { text: '编辑', bg: '#3B82F6', icon: 'edit', width: 130 },
  { text: '删除', bg: '#F43F5E', icon: 'trash-2', width: 130 }
])
</script>

---

3. 自定义插槽按键 (#left & #right)

如果需要完全自定义按键排版、图标或渐变背景，可以使用 #left 或 #right 插槽。

<template>
  <mu-swipe-cell>
    <template #right>
      <view class="action-btn bg-amber" @click="onStar">
        <mu-icon name="star" :size="20" color="#fff" />
        <text>收藏</text>
      </view>
      <view class="action-btn bg-red" @click="onDelete">
        <mu-icon name="trash-2" :size="20" color="#fff" />
        <text>删除</text>
      </view>
    </template>

    <view class="content-box">自定义插槽内容</view>
  </mu-swipe-cell>
</template>

---

4. Ref 实例方法控制 (Ref Control)

可以通过 ref 获取组件实例，调用 open('right' | 'left') 或 close() 方法进行编程式控制。

<template>
  <view>
    <mu-button type="primary" size="small" @click="swipeRef.open('right')">展开右侧</mu-button>
    <mu-button plain size="small" @click="swipeRef.close()">收起</mu-button>

    <mu-swipe-cell ref="swipeRef" :right-actions="rightActions">
      <mu-cell title="编程式控制测试" />
    </mu-swipe-cell>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const swipeRef = ref(null)
const rightActions = ref([
  { text: '删除', bg: '#F43F5E', icon: 'trash-2' }
])
</script>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
leftActions	左侧滑动按钮配置列表	Array	-	[]
rightActions	右侧滑动按钮配置列表	Array	-	[]
buttonWidth	单个按钮默认宽度 (单位 rpx)	Number | String	-	130
disabled	是否禁用侧滑	Boolean	true | false	false
autoClose	点击按钮后是否自动收起侧滑菜单	Boolean	true | false	true
threshold	触发展开的手势滑动比例阈值	Number	0 ~ 1	0.3 (即滑动 30% 释放自动开)

Action 按钮配置项对象 (Action Object)

leftActions / rightActions 数组中各项可以包含如下字段：

属性名	说明	类型	示例值
text	按钮文本内容	String	'删除'
bg / bgColor	按钮背景颜色	String	'#F43F5E'
color	按钮文字及图标颜色	String	'#FFFFFF'
icon	按钮左侧图标名称	String	'trash-2'
width	当前按钮自定义宽度 (rpx)	Number | String	140

---

事件说明 (Events)

事件名	说明	回调参数
click-action	点击滑动菜单按钮时触发	({ action, index, position })
open	侧滑展开完成时触发	(position: 'left' | 'right')
close	侧滑完全收起时触发	-
click	点击单元格主体内容区时触发	(event: MouseEvent)

---

插槽说明 (Slots)

插槽名	说明
default	单元格主体展示内容插槽
left	左侧自定义侧滑菜单插槽
right	右侧自定义侧滑菜单插槽

---

实例方法 (Expose Methods)

获取组件 ref 实例后可调用：

方法名	说明	参数
open(position)	打开/展开滑块	position: 'left' | 'right'（默认 'right'）
close()	关闭/收起滑块	-