chain-saasui/components/src/STableButtons/STableButtons.md

chain-saasui

# `STableButtons` 行内操作按钮组组件

`<STableButtons />` 是一个智能化按钮组组件，支持 **操作按钮自动折叠、tooltip 提示、显示条件控制、简洁模式** 等特性，适用于表格、卡片等操作列场景。

---

## 📦 功能特性

* ✅ 超过指定数量按钮自动折叠进下拉菜单
* ✅ 支持 `tooltip` 提示信息展示
* ✅ 支持 `show` 控制按钮显示（支持布尔值和函数）
* ✅ 支持简洁图标模式与文本下拉模式切换
* ✅ 按钮属性自由传入（disabled、type、icon等）

---

## 💻 使用示例

```vue
<STableButtons :list="actionList" :row="row" :maxLength="2" moreType="more"  @action="handleAction"/>
```

### 示例按钮数据结构：

```js
actionList: [
  {
    label: '编辑',
    tip: '编辑该项',
    attrs: {
      type: 'primary',
    },
  },
  {
    label: '删除',
    tip: '不可恢复，请慎重',
    attrs: {
      type: 'danger',
      disabled: true,
    },
  },
  {
    label: '更多操作',
    show: () => true, // 支持函数
  },
];
```

---

## ⚙️ Props 参数

| 参数名         | 类型        | 默认值                      | 说明              |
| ----------- | --------- | ------------------------ | --------------- |
| `list`      | `Array`   | `[]`                     | 按钮配置数组，见下方格式说明  |
| `maxLength` | `Number`  | `2`                      | 最多显示多少个按钮，其余收起  |
| `moreType`   | `String` | ` text,more`             | 更多类型   |   
| `text`      | `String`  | `$t('buttonGroup.more')` | 下拉按钮显示文本（非简洁模式） |

---

## 📌 按钮项结构（list）

每个按钮对象的字段如下：

| 字段名       | 类型                    | 说明                        |
| --------- | --------------------- | ------------------------- |
| `label`   | `String`              | 按钮文字内容                    |
| `onClick` | `Function`            | 点击事件                      |
| `tip`     | `String`              | 鼠标悬浮提示内容，可选               |
| `show`     | `Boolean \| Function` | 控制按钮是否显示，默认 `true`        |
| `attrs`   | `Object`              | 按钮属性（type、disabled、icon等） |

---

## 🧠 show 控制说明

支持传入布尔值或函数：

```js
{
  label: '操作',
  show: true, // 或 () => user.hasPermission('xxx')
}
```

未设置 `show` 时默认为 `true`。

---

## 🎨 效果图（简化描述）

```text
[编辑] [删除] [更多 ⏷]
点击更多 ⟶
 ├── 更多操作1
 └── 更多操作2
```

---

## 💡 简洁模式 `moreType=more`

```vue
<STableButtons :list="actionList" moreType="more" />
```

折叠按钮会只展示图标（默认使用 `smart-More` 样式），适合空间有限场景。