hogwarts-ui 官方网站

Appearance

Items 列表项 ​

将信息聚合在卡片容器中展示。 卡片包含图片image，头部header，标签meta，描述description和拓展action 每个内容均未可选，不传对应数据时展示为空

基础用法 ​

点击查看示例代码
vue
<template>
  <h-items-v1 :h_data="h_items_1"></h-items-v1>
</template>

<script setup>
const h_items_1 = {
    meta:[
      {
          name: 'status1',
          selector: [
              { name: '开放中', value: 'all1' },
              { name: '已关闭', value: 'success1' },
              { name: '全部', value: 'doing1' },
          ]
      },
      {
          name: 'status2',
          selector: [
              { name: '全部', value: 'all2' },
              { name: '已完成', value: 'success2' },
              { name: '处理中', value: 'doing2' },
          ]
      }
    ],
    extra: [
    {
      "api": {
          "header": {}
      },
      "link": "#/issues/:id",
      "display_name": "去考试"
    },
    {
      "api": {
          "header": {}
      },
      "link": "#/issues/:id",
      "display_name": "去考试"
    },
    {
      "api": {
          "header": {}
      },
      "link": "#/issues/:id",
      "display_name": "去考试"
    },
  ],
  action: [
    {
      "api": {
          "header": {}
      },
      "link": "#/issues/:id",
      "display_name": "去考试"
    },
    {
      "api": {
          "header": {}
      },
      "link": "#/issues/:id",
      "display_name": "去考试"
    },
    {
      "api": {
          "header": {}
      },
      "link": "#/issues/:id",
      "display_name": "去考试"
    },
  ],
  content: [
    {
      image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
      header: '0912-中原工学院-AD-测试行业介绍【14:30-16】',
      meta: ['全日制2期','高校实训'],
      description: ['#676 由 飞儿(feier)_fangyuan 创建于 3 days ago',],
      id: 123,
      event: '更新于21 minutes ago'
    },
        {
      image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
      header: '0912-中原工学院-AD-测试行业介绍【14:30-16】',
      meta: ['全日制2期','高校实训'],
      description: ['#676 由 飞儿(feier)_fangyuan 创建于 3 days ago',],
      id: 123,
      event: '更新于21 minutes ago'
    },
        {
      image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
      header: '0912-中原工学院-AD-测试行业介绍【14:30-16】',
      meta: ['全日制2期','高校实训'],
      description: ['#676 由 飞儿(feier)_fangyuan 创建于 3 days ago',],
      id: 123,
      event: '更新于21 minutes ago'
    },
        {
      image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
      header: '0912-中原工学院-AD-测试行业介绍【14:30-16】',
      meta: ['全日制2期','高校实训'],
      description: ['#676 由 飞儿(feier)_fangyuan 创建于 3 days ago',],
      id: 123,
      event: '更新于21 minutes ago'
    },
  ]
}
</script>
<template>
  <h-items-v1 :h_data="h_items_1"></h-items-v1>
</template>

<script setup>
const h_items_1 = {
    meta:[
      {
          name: 'status1',
          selector: [
              { name: '开放中', value: 'all1' },
              { name: '已关闭', value: 'success1' },
              { name: '全部', value: 'doing1' },
          ]
      },
      {
          name: 'status2',
          selector: [
              { name: '全部', value: 'all2' },
              { name: '已完成', value: 'success2' },
              { name: '处理中', value: 'doing2' },
          ]
      }
    ],
    extra: [
    {
      "api": {
          "header": {}
      },
      "link": "#/issues/:id",
      "display_name": "去考试"
    },
    {
      "api": {
          "header": {}
      },
      "link": "#/issues/:id",
      "display_name": "去考试"
    },
    {
      "api": {
          "header": {}
      },
      "link": "#/issues/:id",
      "display_name": "去考试"
    },
  ],
  action: [
    {
      "api": {
          "header": {}
      },
      "link": "#/issues/:id",
      "display_name": "去考试"
    },
    {
      "api": {
          "header": {}
      },
      "link": "#/issues/:id",
      "display_name": "去考试"
    },
    {
      "api": {
          "header": {}
      },
      "link": "#/issues/:id",
      "display_name": "去考试"
    },
  ],
  content: [
    {
      image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
      header: '0912-中原工学院-AD-测试行业介绍【14:30-16】',
      meta: ['全日制2期','高校实训'],
      description: ['#676 由 飞儿(feier)_fangyuan 创建于 3 days ago',],
      id: 123,
      event: '更新于21 minutes ago'
    },
        {
      image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
      header: '0912-中原工学院-AD-测试行业介绍【14:30-16】',
      meta: ['全日制2期','高校实训'],
      description: ['#676 由 飞儿(feier)_fangyuan 创建于 3 days ago',],
      id: 123,
      event: '更新于21 minutes ago'
    },
        {
      image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
      header: '0912-中原工学院-AD-测试行业介绍【14:30-16】',
      meta: ['全日制2期','高校实训'],
      description: ['#676 由 飞儿(feier)_fangyuan 创建于 3 days ago',],
      id: 123,
      event: '更新于21 minutes ago'
    },
        {
      image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
      header: '0912-中原工学院-AD-测试行业介绍【14:30-16】',
      meta: ['全日制2期','高校实训'],
      description: ['#676 由 飞儿(feier)_fangyuan 创建于 3 days ago',],
      id: 123,
      event: '更新于21 minutes ago'
    },
  ]
}
</script>