# CommonInfo 公共文本头部

### 基础用法

:::demo
```vue
<template>
  <common-panel :layer="'row'">
    <template #left>
      <div class="tree">
        <common-tree></common-tree>
      </div>
    </template>
    <template #right>
      <div class="__common-info-content">
        <common-info
          :extras="extras"
          :title="title"
          :desc-data="descData"
          :descriptions="descriptions"
        ></common-info>
      </div>
    </template>
  </common-panel>
</template>

<script setup lang="ts">
import { ref } from 'vue';

function deleteFn() {}
function editFn() {}
const extras = ref<any>([
  { name: 'delete', type: 'danger', label: '删除', onCick: deleteFn },
  { name: 'edit', label: '编辑', onCick: editFn }
]);

const title = ref<any>('光伏板资产模型');

const descriptions = ref<any>([
  { label: '描述1', name: 'desc1', type: '', delete: true },
  { label: '描述2', name: 'desc2', type: '' },
  { label: '描述3', name: 'desc3', type: '' },
  { label: '描述4', name: 'desc4', type: '' },
  { label: '描述5', name: 'desc5', type: '' },
  { label: '描述6', name: 'desc6', type: '' },
  { label: '描述7', name: 'desc7', type: '' }
]);

const descData = ref<any>({
  desc1: '描述信息',
  desc2: '描述信息',
  desc3: '描述信息',
  desc4: '描述信息',
  desc5: '描述信息',
  desc6: '描述信息',
  desc7: '描述信息'
});
</script>

```
:::


### 配置参数

| 参数                | 说明                     | 类型             | 是否必须 |
| :------------------ | :-------------------- | :--------------- | :------- |
|title|  标题  |Object[]|false|
|extras| 描述头部右侧扩展项， 目前暂时支持button形式扩展  |Array[]|false|
| ----label | 扩展按钮名称 | String | true |
| ----type | 扩展按钮类型/danger/info/warning/primary, 默认primary | String | true |
| ----name | 按钮对应名称key | String | false |
| ----onClick | icon大小，仅为icon时生效 | String | false |
|descriptions| 是否要搜索框，默认为true |Boolean |false|
|editIcon| 搜索框内placeholder文案 |String[]|false|
|saveIcon| 树组件数据 |Array[]|true|
|url| 新增按钮文字 |Srtring[]|false|
|descData| 新增按钮文字 |Srtring[]|false|
|hasIcon| 新增按钮文字 |Srtring[]|false|



### 事件

| 事件名称   | 说明       | 回调     |
| :--------| :-------- | :--------------- | 
| editTitle |  标题编辑 | -- |