common-ui/docs/components/info/base.md

CommonInfo 公共文本头部

基础用法

:::demo

<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	标题编辑	--