Cell 单元格

通用列表项单元格组件，用于列表展示、系统设置菜单、信息展示及高频交互导航。支持图标、标题描述、右侧自定义组件插槽以及原生流畅的手势左滑删除与多动作菜单。

---

代码示例

1. 基础用法 (Basic)

包含左侧标题 title、右侧内容文案 value 以及跳转箭头 arrow（或 is-link）。

<template>
  <div class="card">
    <mu-cell title="单元格标题" value="内容文案" />
    <mu-cell title="个人资料管理" arrow value="去修改" @click="handleClick('个人资料')" />
    <mu-cell title="账号安全与隐私" arrow @click="handleClick('账号安全')" />
  </div>
</template>

---

2. 前置矢量图标 (Icon)

通过 icon 指定 Lucide 矢量图标名称，同时支持通过 icon-color 与 icon-size 自定义图标样式。

<template>
  <div class="card">
    <mu-cell title="用户中心" icon="user" icon-color="#3B82F6" arrow />
    <mu-cell title="系统设置" icon="setting" icon-color="#10B981" value="V1.2.0" arrow />
    <mu-cell title="消息通知" icon="notification" icon-color="#F59E0B" arrow />
    <mu-cell title="我的收藏" icon="bookmark" icon-color="#EC4899" arrow no-border />
  </div>
</template>

---

3. 副标题与描述信息 (Label)

使用 label 属性在标题下方展示详细的说明文案。

<template>
  <div class="card">
    <mu-cell title="存储空间" label="已使用 84.2 GB / 256 GB" value="查看详情" arrow />
    <mu-cell title="双重身份验证" label="通过手机验证码或身份验证器加强安全保护" arrow no-border />
  </div>
</template>

---

4. 必填标识与禁用状态 (Required & Disabled)

设置 required 展现红色必填星号，设置 disabled 开启置灰与禁止点击状态。

<template>
  <div class="card">
    <mu-cell title="真实姓名" required value="张三" />
    <mu-cell title="手机号码" required value="138****8888" arrow />
    <mu-cell title="公司名称 (不可修改)" disabled value="木智宇科技" />
  </div>
</template>

---

5. 右侧自定义插槽 (Right Slot)

通过 template #right 轻松嵌合 Switch 开关、Tag 标签或 Badge 徽标等交互控件。

<template>
  <div class="card">
    <mu-cell title="推送通知开关" icon="bell">
      <template #right>
        <mu-switch v-model="switchVal" size="small" />
      </template>
    </mu-cell>
    
    <mu-cell title="VIP 会员状态" icon="crown" icon-color="#F59E0B">
      <template #right>
        <mu-tag type="warning" size="small" shape="rounded">超级会员</mu-tag>
      </template>
    </mu-cell>
    
    <mu-cell title="未读消息" icon="message" icon-color="#3B82F6" arrow no-border>
      <template #right>
        <mu-badge content="99+" type="danger" />
      </template>
    </mu-cell>
  </div>
</template>

---

6. 手势左滑菜单动作 (Swipe Actions)

开启 swipe 属性即可启用丝滑的原生触控左滑菜单。支持自定义多按钮菜单配置与快捷删除。

<template>
  <div class="card">
    <!-- 默认左滑删除 -->
    <mu-cell
      title="可左滑项目"
      label="向左拖拽滑动查看删除按钮"
      swipe
      @delete="handleDelete"
    />
    
    <!-- 自定义多按钮左滑菜单 -->
    <mu-cell
      title="多按钮左滑菜单"
      label="配置置顶、标记与删除等自定义菜单操作"
      swipe
      :swipe-actions="customActions"
      @click-swipe="handleSwipeClick"
    />
  </div>
</template>

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

const customActions = ref([
  { text: '置顶', bg: '#3B82F6' },
  { text: '标记', bg: '#F59E0B' },
  { text: '删除', bg: '#F43F5E', type: 'danger' }
])

const handleDelete = () => {
  console.log('触发删除')
}

const handleSwipeClick = ({ index, action }) => {
  console.log('点击了菜单按钮:', action.text)
}
</script>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
title	左侧标题文案	String	-	''
label	标题下方的二级描述信息	String	-	''
value	右侧展示的内容文案	String	-	''
icon	前置图标 (支持矢量图标名或图片 URL)	String	-	''
iconSize	前置图标大小 (px/rpx)	Number | String	-	20
iconColor	前置矢量图标颜色	String	-	''
arrow	是否显示右侧跳转箭头 (同 isLink)	Boolean	true | false	false
disabled	是否禁用点击交互与视觉置灰	Boolean	true | false	false
required	是否显示必填红色星号	Boolean	true | false	false
divider	是否显示底部分割线	Boolean	true | false	true
noBorder	是否隐藏底部分割边框	Boolean	true | false	false
center	垂直方向是否居中对齐	Boolean	true | false	false
url	点击后自动跳转的页面路径	String	-	''
swipe	是否开启手势左滑菜单	Boolean	true | false	false
swipeActions	左滑动作按钮数组列表	Array	-	[{ text: '删除', bg: '#F43F5E' }]
buttonWidth	每个左滑按钮的宽度 (rpx)	Number	-	130
background	单元格背景颜色	String	-	''
padding	单元格内边距（CSS padding 语法）	String	-	''

---

插槽说明 (Slots)

插槽名	说明
default	自定义标题区域内容
label	自定义二级描述信息内容
value	自定义右侧文案区域
icon	自定义前置图标区域
right	自定义右侧整个展示区域 (可放入 Switch、Badge、Tag 等)

---

事件说明 (Events)

事件名	说明	回调参数
click	点击单元格时触发	(e: Event)
click-swipe	点击左滑菜单按钮时触发	({ index: number, action: Object })
delete	点击左滑删除类按钮时触发	({ index: number, action: Object })