Skip to content

Card v6

基础用法

点击查看示例代码
vue
<template>
  <h-card-v6 class="h-left h-row-1" :h_data="h_data"></h-card-v6>
</template>

<script setup>
const h_data = {
  component: 'h-card-v6',
  action: [
    {
      "api": {
          "header": {}
      },
      "class": "disabled",
      "link": "https://www.baidu.com",
      "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: '90天产品经理实战班',
      meta: ['BAT大厂', '7200元', '三个月'],
      description: ['学习大厂实用方法论,做有大局观、能拿结果的产品经理', '学习大厂实用方法论,做有大局观、能拿结果的产品经理'],
    },
    {
      image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
      header: '90天产品经理实战班',
      meta: ['BAT大厂', '7200元', '三个月'],
      description: ['学习大厂实用方法论,做有大局观、能拿结果的产品经理', '学习大厂实用方法论,做有大局观、能拿结果的产品经理'],
    },
  ]
}
</script>
<template>
  <h-card-v6 class="h-left h-row-1" :h_data="h_data"></h-card-v6>
</template>

<script setup>
const h_data = {
  component: 'h-card-v6',
  action: [
    {
      "api": {
          "header": {}
      },
      "class": "disabled",
      "link": "https://www.baidu.com",
      "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: '90天产品经理实战班',
      meta: ['BAT大厂', '7200元', '三个月'],
      description: ['学习大厂实用方法论,做有大局观、能拿结果的产品经理', '学习大厂实用方法论,做有大局观、能拿结果的产品经理'],
    },
    {
      image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
      header: '90天产品经理实战班',
      meta: ['BAT大厂', '7200元', '三个月'],
      description: ['学习大厂实用方法论,做有大局观、能拿结果的产品经理', '学习大厂实用方法论,做有大局观、能拿结果的产品经理'],
    },
  ]
}
</script>