---
title: 多操作 Link 业务组件
sidemenu: true
---

## 多操作 Link 业务组件

这个组件把多个操作糅合在一起了，同时，如果存在 loading 操作，那么就能让它保持加载。

```tsx
/**
 * background: '#f0f2f5'
 */
import React from 'react';
import { Space, Input } from 'antd';
import CustomLink from '@/components/CustomLink';

export default () => (
  <Space direction="vertical">
    <CustomLink conf={{ label: '加载中', loading: true }} />
    <CustomLink conf={{ label: '正常单个Link' }} />
    <CustomLink
      conf={{
        label: '多个Link',
        groupTitle: '分组标题',
        childrens: [{ label: 'link 1', disabled: true }, { 
          label: 'link 2 弹窗', 
          type:"modal", 
          modalItems:[
            {
              label: '姓名',
              name: 'test', 
              rules: [{required: true, message: '必填'}],
              render: ()=> <Input />
            }
          ]  
        }, { label: 'link 3' }],
      }}
    />
    <CustomLink conf={{ 
      label: '带弹窗的form', 
      type:"modal", 
      modalItems:[
        {
          initialValue: 'test',
          label: '姓名',
          name: 'test', 
          rules: [{required: true, message: '必填'}],
          render: ()=> <Input />
        }
      ] 
    }} />
  </Space>
);
```

<API src="./index.tsx"></API>

### CustomLinkItem

| 参数       | 说明                               | 类型               | 默认值     |
| ---------- | ---------------------------------- | ------------------ | ---------- |
| label      | 输入框的值                         | `any`              | (required) |
| childrens  | 值修改后触发                       | `CustomLinkItem[]` | -          |
| key        | 查询后触发                         | `any`              | -          |
| loading    | 选项菜单的的列表                   | `boolean`          | -          |
| isNotGroup | 输入框默认是否显示，只有第一次生效 | `boolean`          | -          |
| groupTitle | 输入框是否显示                     | `string`           | -          |
| type | 点击弹开的类型 | `'modal' | 'popconfirm'`          | -          |
| modalItems | 弹窗的form表单配置 | `{ name: string; rules?: {}[]; render: (form: any) => React.ReactNode }[]`| -          |
| onClick    | 输入框显示隐藏的回调函数           | `() => void`       | -          |