AIoT前端基础组件文档

Appearance

Return to top
On this page

CommonInfo 公共文本头部

基础用法

暂无数据
光伏板资产模型
描述1：描述信息描述2：描述信息描述3：描述信息
描述4：描述信息描述5：描述信息描述6：描述信息
描述7：描述信息
<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>


<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扩展按钮名称Stringtrue
----type扩展按钮类型/danger/info/warning/primary, 默认primaryStringtrue
----name按钮对应名称keyStringfalse
----onClickicon大小，仅为icon时生效Stringfalse
descriptions是否要搜索框，默认为trueBooleanfalse
editIcon搜索框内placeholder文案String[]false
saveIcon树组件数据Array[]true
url新增按钮文字Srtring[]false
descData新增按钮文字Srtring[]false
hasIcon新增按钮文字Srtring[]false

事件

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