cnd-components-mcp/componentData/components/CpuMemSelector.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

---
group:
  title: 云原生业务组件
---

# CpuMemSelector CPU内存选择器 

## 代码库地址
https://code.alibaba-inc.com/cn-lowcode/cnd-cpumem-selector


## cpuMem-selector

### 使用场景
CpuMemSelector 组件适用于业务中涉及 CPU 与内存规格选择和显示功能的场景。

#### dataSource 的使用
CpuMemSelector 同时支持 dataSource 和 children 作为数据源, 如果同时设置, 则以 dataSource 为准.<br/>
注意：dataSource 数据结构为 Array，如果您的业务场景中 CPU 与内存之间关联，可以将内存的数据源作 CPU 的子项传入

#### children 的使用
children 作为数据源时，CPU 与内存之间无关联，分别传入 CPU 与内存 对应的 Arrary 即可。

### 基本使用

```tsx preview
import React from "react";
import {CpuMemSelector} from "@ali/cnd";


const Demo = () => {
  const children = {
    cpu: [
      { label: 1, value: 1 },
      { label: 1.5, value: 1.5 },
      { label: 2, value: 2, disabled: true },
      { label: 4, value: 4 },
      { label: 6, value: 6 },
      { label: 8, value: 8 },
      { label: 12, value: 12 },
      { label: 16, value: 16 },
    ],
    memory: [
      { label: 128, value: 128 },
      { label: 256, value: 256 },
      { label: 512, value: 512 },
      { label: 1024, value: 1024 },
      { label: 2048, value: 2048, disabled: true },
      { label: 4096, value: 4096 },
      { label: 8192, value: 8192 },
      { label: 16384, value: 16384 },
      { label: 32768, value: 32768 },
    ],
  };
  return (
    <div>
      <CpuMemSelector hasClear />
      <CpuMemSelector
        unit='MB'
        children={children}
        defaultValue={{ cpu: 2, memory: 2048 }}
        style={{ marginLeft: 16 }}
      />
    </div>
  );
};

export default Demo;
```


### 受控组件

```tsx preview
import React, { useState } from "react";
import {CpuMemSelector} from "@ali/cnd";

const Demo = () => {
  const [cpumem, setCpumem] = useState({ cpu: 0.5, memory: 2 });

  return (
    <CpuMemSelector
      value={cpumem}
      onChange={(v) => {
        console.log(v);
      }}
    />
  );
};

export default Demo;
```


### children 的使用

```tsx preview
import React, { useState } from "react";
import {CpuMemSelector} from "@ali/cnd";

const Demo = () => {
  const [cpumem, setCpumem] = useState({ cpu: 6, memory: 12 });
  const children = {
    cpu: [
      { label: 1, value: 1 },
      { label: 2, value: 2 },
      { label: 4, value: 4 },
      { label: 6, value: 6 },
      { label: 7, value: 7 },
      { label: 8, value: 8 },
      { label: 12, value: 12 },
      { label: 16, value: 16 },
    ],
    memory: [
      { label: 1, value: 1 },
      { label: 2, value: 2 },
      { label: 3, value: 3 },
      { label: 4, value: 4 },
      { label: 6, value: 6 },
      { label: 8, value: 8 },
      { label: 12, value: 12 },
      { label: 16, value: 16 },
      { label: 24, value: 24 },
      { label: 32, value: 32 },
    ],
  };

  return (
    <CpuMemSelector
      value={cpumem}
      children={children}
    />
  );
};

export default Demo;
```


### 显示功能

```tsx preview
import React from "react";
import {CpuMemSelector} from "@ali/cnd";

const { Preview: CpuMemPreview } = CpuMemSelector;

const Demo = () => {
  return (
    <CpuMemPreview value={{ cpu: 2, memory: 4 }} />
  );
};

export default Demo;
```


### API

| 属性     | 说明                 | 类型            | 默认值 |
| -------- | -------------------- | --------------- | ------ |
| size    | 选择器尺寸     | Enum <br/><br/>**可选值:**<br/>'small', 'medium', 'large' | 'medium'     |
| unit    | 内存单位     | Enum <br/><br/>**可选值:**<br/>'MB', 'GB' | 'GB'     |
| value    | 当前值，用于受控模式     | { cpu: number, memory: number } | -      |
| defaultValue | 初始的默认值           | { cpu: number, memory: number }          | -      |
| dataSource | 传入的数据源，cpu与内存存在关联关系  | Array:<br/>```[{ label: string | number, value: number, children: [] }]```<br/>|-      |
| children  | 传入的数据源，cpu与内存无关联关系  |Object:<br/> ```{cpu: [{ label: string | number, value: number }], memory: [{ label: string, value: number }]}``` |-      |
| onChange | CpuMemSelector发生改变时触发的回调 | Function <br/><br/>**签名:**<br/>Function(value) => void<br/>**参数:**<br/>value: 选中的值| -  |
| hasClear | 是否有清除按钮         | Boolean          |  false     |


## cpuMem-selector-field

### 使用场景
CpuMemSelectorField 组件适用于业务中涉及 CPU 与内存规格选择的表单场景。基于BaseField实现，支持校验、取值、赋值等实例方法。

### 基本使用
```tsx preview
import React from "react";
import {CpuMemSelectorField} from "@ali/cnd";

const Demo = () => {
  return (
    <div>
      <CpuMemSelectorField
        label="单实例规格"
        hasClear
        required
        name="Spec"
        help="单实例规格由CPU和内存组成"
        labelColSpan={3}
        wrapperColSpan={21}
        placeholder="请选择单实例规格"
        labelAlign="left"
        labelTextAlign="left"
        validation={[
          {
            type: 'required',
            message: '请选择单实例规格',
          }
        ]}
      />
    </div>
  );
};

export default Demo;
```

### API

| 参数名                | 说明                                                   | 必填       | 类型 | 默认值 |
| -------------------- | ----------------------------------------------------- | --------- | ---- | ------ | 
|    name              |  表单项标志                                             | true      |   string   |    -    |
|    value             |  表单值，如果传了 value 属性这组件变为受控模式               |   false   |   any   |   -   | 
|    defaultValue      |  默认值，值的类型由具体的表单项来确定                        |   false   |   any   |    -    |
|    style             |  行内样式，一般会应用到组件最外层容器上                      |   false   |   object   |    -    |
|    label             |  表单域标题，不传或传空则不渲染 label 容器                   |   false   |   string   |    -    |
|    labelAlign        |  表单域标题的位置，可选值有 left、top、inset                 |   false   |   string   |    left    |
|    labelTextAlign    |  表单域标题的对齐方式，可选值有 left、right                  |   false   |   string   |    left    |
|    labelTips         |  表单域标题提示内容，紧跟着 Label 的 Tooltip 风格提示        |   false   |   string/ReactNode/Function   |    -    |
|    labelTipsIcon     |  表单域标题提示 ICON，默认为 prompt                        |   false   |   string   |    -    |
|    labelTipsAlign    |  表单域标题提示对齐，默认为 r              |   false   |   string   |    'r'    |
|    labelColSpan      |  表单域标题占栅格数，可选值是1-24的栅格栏数目                  |   false   |   number   |    -    |
|    wrapperColSpan    |  表单域控件所占栅格数，可选值是1-24的栅格栏数目                |   false   |   number   |    -    |
|    placeholder       |  占位符输入提示                                           |   false   |   string   |    -    | 
|    tips/help         |  表单域扩展提示，显示在表单域底部，兼容 help 写法              |   false   |   string/node   |    -    |
|    size              |  规格大小，可选值有  large、small、medium                  |   false   |   string   |    medium    |
|    required          |  必填校验                                                |   false   |   false   |    -    |
|    validation        |  校验规则                                                |   false   |   array   |    -    |
|    onChange          |  值变化后的回调，当传入了 value 之后必须实现并回写 value 属性   |   false   |   func   |    -    |
|    field             |  手动传入 Field 实例，自己负责 Field 初始化和维护，不建议在日常场景下使用 |   false   |   object   |    -    |