Skip to content
On this page

CommonCard 公共卡片

基础用法

新增

大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题

成功失败
2022-12-24c12:12:12
  • 厂商:海康威视
这个是描述信息,可以有最多三行这个是描述信息,可以有最多三行这个是描述信息,可以有最多三行这个是描述信息,可以有最多三行这个是描述信息,可以有最多三行这个是描述信息,可以有最多三行这个是描述信息,可以有最多三行这个是描述信息,可以有最多三行
信息1
1
信息2
2
信息3
3
启用
编辑
删除

大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题

成功失败
2022-12-24c12:12:12
  • 厂商:海康威视
这个是描述信息,可以有最多三行这个是描述信息,可以有最多三行这个是描述信息,可以有最多三行这个是描述信息,可以有最多三行这个是描述信息,可以有最多三行这个是描述信息,可以有最多三行这个是描述信息,可以有最多三行这个是描述信息,可以有最多三行
信息1
1
信息2
2
信息3
3
启用
编辑
删除

大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题大标题

成功失败
2022-12-24c12:12:12
  • 厂商:海康威视
这个是描述信息,可以有最多三行这个是描述信息,可以有最多三行这个是描述信息,可以有最多三行这个是描述信息,可以有最多三行这个是描述信息,可以有最多三行这个是描述信息,可以有最多三行这个是描述信息,可以有最多三行这个是描述信息,可以有最多三行
信息1
1
信息2
2
信息3
3
启用
编辑
删除

<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>


<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卡片中图片urlStringfalse
----title卡片标题Stringfalse
----subTitle卡片副标题Stringfalse
----desc卡片描述信息Stringfalse
----infos卡片简介信息,与cardInfos数组中的元素对应展示Objectfalse
----numbers卡片数据展示,与cardNumbers数组中的元素对应展示Objectfalse
----tags卡片状态展示,需要自己处理后台获取的数据并以此形式进行传递Arrayfalse
hasAdd是否有新增卡片Booleanfalse
span卡片栅格化布局,共分为24分,默认为 6 即4列Numberfalse
gutter卡片栅格化布局卡片间隔,默认为 20Numberfalse
cardText卡片新增模块文字展示,默认’新增‘Stringfalse
cardInfos卡片展示的信息列表,用于卡片的信息展示Arrayfalse
----label简介信息titleStringfalse
----name简介信息name,必须与infos(后台获取需要展示的数据的key对应)Stringfalse
layer卡片内部布局,分别为row/col/row-col, 默认col,row时左侧为图片,右侧为卡片整体信息,col时上部为图片,下部为整体信息,row-col时,上部为左图右title,下部为其余信息Stringfalse
cardNumbers卡片数据展示区域Arrayfalse
----label卡片数据titleStringfalse
----name卡片数据name,必须与numbers(后台获取需要展示的数据的key对应)Stringfalse
btns卡片下部按钮Arrayfalse
----label按钮的labelStringtrue
----name按钮的name,用于按钮区分Stringtrue
----icon按钮展示的iconStringfalse
----color按钮icon颜色Stringfalse
----onClick按钮事件回调Functiontrue

事件

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