AIoT前端公共UI

CommonCard 公共卡片

基础用法

:::demo


<template>
  <common-card-group
    :cardNumbers="cardNumbers"
    :cardInfos="cardInfos"
    :span="12"
    :btns="btns"
    :cards="cards"
    @handel-click-create-card="handelClickCreateCard"
  ></common-card-group>
</template>

<script setup >
// import { ElMessage } from 'element-plus';
// import { ref } from 'vue';

function edit() {
  // ElMessage('编辑');
}
function start() {}
//
const cardNumbers = [
  { label: '信息1', name: 'name1' },
  { label: '信息2', name: 'name2' },
  { label: '信息3', name: 'name3' }
];

const cardInfos = [{ label: '厂商', name: 'name' }];
const btns = [
  {
    label: '启用',
    name: 'start',
    icon: 'common-bianji',
    color: '#7b93a7',
    onClick: start
  },
  {
    label: '编辑',
    name: 'edit',
    icon: 'common-bianji',
    onClick: edit
  },
  {
    label: '删除',
    name: 'delete',
    icon: 'tool-baocun',
    color: '#7b93a7',
    onClick: edit
  }
];
const cards = [
  {
    url: '',
    title:
      '大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题',
    subTitle: '2022-12-24c12:12:12',
    tags: [
      { label: '成功', type: 'success' },
      { label: '失败', type: 'error' }
    ],

    desc: '这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行',
    infos: {
      name: '海康威视'
    },
    numbers: {
      name1: 1,
      name2: 2,
      name3: 3
    }
  },
  {
    url: '',
    title:
      '大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题',
    subTitle: '2022-12-24c12:12:12',
    tags: [
      { label: '成功', type: 'success' },
      { label: '失败', type: 'error' }
    ],

    desc: '这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行',
    infos: {
      name: '海康威视'
    },
    numbers: {
      name1: 1,
      name2: 2,
      name3: 3
    }
  },
  {
    url: '',
    title:
      '大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题',
    subTitle: '2022-12-24c12:12:12',
    tags: [
      { label: '成功', type: 'success' },
      { label: '失败', type: 'error' }
    ],

    desc: '这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行这个是描述信息，可以有最多三行',
    infos: {
      name: '海康威视'
    },
    numbers: {
      name1: 1,
      name2: 2,
      name3: 3
    }
  }
];

// 添加新卡片
function handelClickCreateCard() {
  // ElMessage('123131233');
}
</script>

<style scoped lang="scss"></style>

:::

配置参数

参数	说明	类型	是否必须
cards	卡片需要渲染的数组	Array[Object]，其中卡片内部字段	true
----url	卡片中图片url	String	false
----title	卡片标题	String	false
----subTitle	卡片副标题	String	false
----desc	卡片描述信息	String	false
----infos	卡片简介信息，与cardInfos数组中的元素对应展示	Object	false
----numbers	卡片数据展示，与cardNumbers数组中的元素对应展示	Object	false
----tags	卡片状态展示，需要自己处理后台获取的数据并以此形式进行传递	Array	false
hasAdd	是否有新增卡片	Boolean	false
span	卡片栅格化布局，共分为24分，默认为 6 即4列	Number	false
gutter	卡片栅格化布局卡片间隔，默认为 20	Number	false
cardText	卡片新增模块文字展示，默认’新增‘	String	false
cardInfos	卡片展示的信息列表，用于卡片的信息展示	Array	false
----label	简介信息title	String	false
----name	简介信息name，必须与infos（后台获取需要展示的数据的key对应）	String	false
layer	卡片内部布局，分别为row/col/row-col，默认col，row时左侧为图片，右侧为卡片整体信息，col时上部为图片，下部为整体信息，row-col时，上部为左图右title，下部为其余信息	String	false
cardNumbers	卡片数据展示区域	Array	false
----label	卡片数据title	String	false
----name	卡片数据name，必须与numbers（后台获取需要展示的数据的key对应）	String	false
btns	卡片下部按钮	Array	false
----label	按钮的label	String	true
----name	按钮的name，用于按钮区分	String	true
----icon	按钮展示的icon	String	false
----color	按钮icon颜色	String	false
----onClick	按钮事件回调	Function	true

事件

事件名称	说明	回调
handelClickCreateCard	点击新增时，触发回调函数	--

base.md 5.7KB 永久链接 文件历史 原始文件

CommonCard 公共卡片

基础用法

配置参数

事件

base.md 5.7KB

永久链接文件历史原始文件