hogwarts-ui 官方网站

Appearance

Accordion 手风琴 ​

基础用法 ​

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

<script setup>
const h_data = {
  component: 'h-accordion-v1',
  items: [
    {
      display_name: 'v2卡片组',
      component: 'h-card-v2',
      header: '90天产品经理实战班',
      content: [
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        }
      ]
    },
    {
      display_name: 'v2卡片组',
      component: 'h-card-v2',
      class: 'h-left h-row-1',
      header: '90天产品经理实战班',
      content: [
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        }
      ]
    },
    {
      display_name: 'v2卡片组',
      component: 'h-card-v2',
      class: 'h-right h-row-2',
      header: '90天产品经理实战班',
      content: [
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        }
      ]
    },
  ],
}
</script>
<template>
  <h-accordion-v1 :h_data="h_data"></h-accordion-v1>
</template>

<script setup>
const h_data = {
  component: 'h-accordion-v1',
  items: [
    {
      display_name: 'v2卡片组',
      component: 'h-card-v2',
      header: '90天产品经理实战班',
      content: [
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        }
      ]
    },
    {
      display_name: 'v2卡片组',
      component: 'h-card-v2',
      class: 'h-left h-row-1',
      header: '90天产品经理实战班',
      content: [
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        }
      ]
    },
    {
      display_name: 'v2卡片组',
      component: 'h-card-v2',
      class: 'h-right h-row-2',
      header: '90天产品经理实战班',
      content: [
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        },
        {
          image: 'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
          header: '90天产品经理实战班',
          meta: ['BAT大厂', '7200元', '三个月'],
          description: ['学习大厂实用方法论，做有大局观、能拿结果的产品经理', '学习大厂实用方法论，做有大局观、能拿结果的产品经理'],
          extra: [{ name: '查看详情', link: 'https://www.baidu.com' }, { name: '修改', link: 'https://www.baidu.com' }],
        }
      ]
    },
  ],
}
</script>