hogwarts-ui 官方网站

Appearance

Data 数据组件 ​

  • h-data 组件本身无内容，只用来存储数据，数据是对象类型
  • 数据定义存储好之后，会缓存到本地，就可以在其他组件上进使用
  • 需要确保该数据组件先被使用，然后才是其他组件调用

基础用法-存储数据 ​

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

<script setup>
	const h_data_1 = {
		card_data: {
			content: [
				{
					component: 'h-card-v1',
					image:
						'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
					header: '90天产品经理实战班',
					meta: ['BAT大厂', '7200元', '三个月'],
					description: [
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
					],
					extra: [
						{ name: '查看详情', link: 'https://www.baidu.com' },
						{ name: '修改', link: 'https://www.baidu.com' }
					]
				},
				{
					component: 'h-card-v1',
					image:
						'https://ceshiren.com/uploads/default/optimized/3X/2/1/21e5a080e547c03567fd1f6930d0861fd1f78f52_2_800x450.jpeg',
					header: '90天产品经理实战班',
					meta: ['BAT大厂', '7200元', '三个月'],
					description: [
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
					],
					extra: [
						{ name: '查看详情', link: 'https://www.baidu.com' },
						{ name: '修改', link: 'https://www.baidu.com' }
					]
				},
				{
					component: 'h-card-v1',
					image:
						'https://ceshiren.com/uploads/default/original/3X/c/7/c7cb60873b493a1cd48dc8204c81c94cca8da6fc.jpeg',
					header: '90天产品经理实战班',
					meta: ['BAT大厂', '7200元', '三个月'],
					description: [
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
					],
					extra: [
						{ name: '查看详情', link: 'https://www.baidu.com' },
						{ name: '修改', link: 'https://www.baidu.com' }
					]
				},
				{
					component: 'h-card-v1',
					image:
						'https://10.idqqimg.com/qqcourse_logo_ng/ajNVdqHZLLA1P6Yjs0EDgD3ftUcFvU7ICD7Fznh3ia0Jlr8tAlYWibXe4tSp22pVSwHicc3icrVXvVI/600',
					header: '90天产品经理实战班',
					meta: ['BAT大厂', '7200元', '三个月'],
					description: [
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
					],
					extra: [
						{ name: '查看详情', link: 'https://www.baidu.com' },
						{ name: '修改', link: 'https://www.baidu.com' }
					]
				},
				{
					component: 'h-card-v1',
					image:
						'https://gitlab.ceshiren.com/ceba/hogwarts/uploads/c14b1dac4294c1f90ae4f7c6781b4b45/web%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95%E5%AD%A6%E5%91%98%E7%B3%BB%E7%BB%9F%E5%A4%B4%E5%9B%BE.png',
					header: '90天产品经理实战班',
					meta: ['BAT大厂', '7200元', '三个月'],
					description: [
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
					],
					extra: [
						{ name: '查看详情', link: 'https://www.baidu.com' },
						{ name: '修改', link: 'https://www.baidu.com' }
					]
				},
				{
					component: 'h-card-v1',
					image:
						'https://ceshiren.com/uploads/default/original/3X/e/3/e3851232ff72d99bd3b7efd228b03eb349e3d329.jpeg',
					header: '90天产品经理实战班',
					meta: ['BAT大厂', '7200元', '三个月'],
					description: [
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
					],
					extra: [
						{ name: '查看详情', link: 'https://www.baidu.com' },
						{ name: '修改', link: 'https://www.baidu.com' }
					]
				},
				{
					component: 'h-card-v1',
					image:
						'https://ceshiren.com/uploads/default/original/3X/2/c/2c0440c4cafdc9dd03a389cccf35e071b6da49b5.jpeg',
					header: '90天产品经理实战班',
					meta: ['BAT大厂', '7200元', '三个月'],
					description: [
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
					],
					extra: [
						{ name: '查看详情', link: 'https://www.baidu.com' },
						{ name: '修改', link: 'https://www.baidu.com' }
					]
				}
			]
		}
	}
</script>
<template>
	<h-data-v1 :h_data="h_data_1"></h-data-v1>
</template>

<script setup>
	const h_data_1 = {
		card_data: {
			content: [
				{
					component: 'h-card-v1',
					image:
						'https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg',
					header: '90天产品经理实战班',
					meta: ['BAT大厂', '7200元', '三个月'],
					description: [
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
					],
					extra: [
						{ name: '查看详情', link: 'https://www.baidu.com' },
						{ name: '修改', link: 'https://www.baidu.com' }
					]
				},
				{
					component: 'h-card-v1',
					image:
						'https://ceshiren.com/uploads/default/optimized/3X/2/1/21e5a080e547c03567fd1f6930d0861fd1f78f52_2_800x450.jpeg',
					header: '90天产品经理实战班',
					meta: ['BAT大厂', '7200元', '三个月'],
					description: [
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
					],
					extra: [
						{ name: '查看详情', link: 'https://www.baidu.com' },
						{ name: '修改', link: 'https://www.baidu.com' }
					]
				},
				{
					component: 'h-card-v1',
					image:
						'https://ceshiren.com/uploads/default/original/3X/c/7/c7cb60873b493a1cd48dc8204c81c94cca8da6fc.jpeg',
					header: '90天产品经理实战班',
					meta: ['BAT大厂', '7200元', '三个月'],
					description: [
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
					],
					extra: [
						{ name: '查看详情', link: 'https://www.baidu.com' },
						{ name: '修改', link: 'https://www.baidu.com' }
					]
				},
				{
					component: 'h-card-v1',
					image:
						'https://10.idqqimg.com/qqcourse_logo_ng/ajNVdqHZLLA1P6Yjs0EDgD3ftUcFvU7ICD7Fznh3ia0Jlr8tAlYWibXe4tSp22pVSwHicc3icrVXvVI/600',
					header: '90天产品经理实战班',
					meta: ['BAT大厂', '7200元', '三个月'],
					description: [
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
					],
					extra: [
						{ name: '查看详情', link: 'https://www.baidu.com' },
						{ name: '修改', link: 'https://www.baidu.com' }
					]
				},
				{
					component: 'h-card-v1',
					image:
						'https://gitlab.ceshiren.com/ceba/hogwarts/uploads/c14b1dac4294c1f90ae4f7c6781b4b45/web%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95%E5%AD%A6%E5%91%98%E7%B3%BB%E7%BB%9F%E5%A4%B4%E5%9B%BE.png',
					header: '90天产品经理实战班',
					meta: ['BAT大厂', '7200元', '三个月'],
					description: [
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
					],
					extra: [
						{ name: '查看详情', link: 'https://www.baidu.com' },
						{ name: '修改', link: 'https://www.baidu.com' }
					]
				},
				{
					component: 'h-card-v1',
					image:
						'https://ceshiren.com/uploads/default/original/3X/e/3/e3851232ff72d99bd3b7efd228b03eb349e3d329.jpeg',
					header: '90天产品经理实战班',
					meta: ['BAT大厂', '7200元', '三个月'],
					description: [
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
					],
					extra: [
						{ name: '查看详情', link: 'https://www.baidu.com' },
						{ name: '修改', link: 'https://www.baidu.com' }
					]
				},
				{
					component: 'h-card-v1',
					image:
						'https://ceshiren.com/uploads/default/original/3X/2/c/2c0440c4cafdc9dd03a389cccf35e071b6da49b5.jpeg',
					header: '90天产品经理实战班',
					meta: ['BAT大厂', '7200元', '三个月'],
					description: [
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
						'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
					],
					extra: [
						{ name: '查看详情', link: 'https://www.baidu.com' },
						{ name: '修改', link: 'https://www.baidu.com' }
					]
				}
			]
		}
	}
</script>
点击查看示例代码（yaml）
yaml
card_data:
  content:
    - component: h-card-v1
      image: >-
        https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg
      header: 90天产品经理实战班
      meta:
        - BAT大厂
        - 7200元
        - 三个月
      description:
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      extra:
        - name: 查看详情
          link: 'https://www.baidu.com'
        - name: 修改
          link: 'https://www.baidu.com'
    - component: h-card-v1
      image: >-
        https://ceshiren.com/uploads/default/optimized/3X/2/1/21e5a080e547c03567fd1f6930d0861fd1f78f52_2_800x450.jpeg
      header: 90天产品经理实战班
      meta:
        - BAT大厂
        - 7200元
        - 三个月
      description:
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      extra:
        - name: 查看详情
          link: 'https://www.baidu.com'
        - name: 修改
          link: 'https://www.baidu.com'
    - component: h-card-v1
      image: >-
        https://ceshiren.com/uploads/default/original/3X/c/7/c7cb60873b493a1cd48dc8204c81c94cca8da6fc.jpeg
      header: 90天产品经理实战班
      meta:
        - BAT大厂
        - 7200元
        - 三个月
      description:
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      extra:
        - name: 查看详情
          link: 'https://www.baidu.com'
        - name: 修改
          link: 'https://www.baidu.com'
    - component: h-card-v1
      image: >-
        https://10.idqqimg.com/qqcourse_logo_ng/ajNVdqHZLLA1P6Yjs0EDgD3ftUcFvU7ICD7Fznh3ia0Jlr8tAlYWibXe4tSp22pVSwHicc3icrVXvVI/600
      header: 90天产品经理实战班
      meta:
        - BAT大厂
        - 7200元
        - 三个月
      description:
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      extra:
        - name: 查看详情
          link: 'https://www.baidu.com'
        - name: 修改
          link: 'https://www.baidu.com'
    - component: h-card-v1
      image: >-
        https://gitlab.ceshiren.com/ceba/hogwarts/uploads/c14b1dac4294c1f90ae4f7c6781b4b45/web%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95%E5%AD%A6%E5%91%98%E7%B3%BB%E7%BB%9F%E5%A4%B4%E5%9B%BE.png
      header: 90天产品经理实战班
      meta:
        - BAT大厂
        - 7200元
        - 三个月
      description:
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      extra:
        - name: 查看详情
          link: 'https://www.baidu.com'
        - name: 修改
          link: 'https://www.baidu.com'
    - component: h-card-v1
      image: >-
        https://ceshiren.com/uploads/default/original/3X/e/3/e3851232ff72d99bd3b7efd228b03eb349e3d329.jpeg
      header: 90天产品经理实战班
      meta:
        - BAT大厂
        - 7200元
        - 三个月
      description:
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      extra:
        - name: 查看详情
          link: 'https://www.baidu.com'
        - name: 修改
          link: 'https://www.baidu.com'
    - component: h-card-v1
      image: >-
        https://ceshiren.com/uploads/default/original/3X/2/c/2c0440c4cafdc9dd03a389cccf35e071b6da49b5.jpeg
      header: 90天产品经理实战班
      meta:
        - BAT大厂
        - 7200元
        - 三个月
      description:
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      extra:
        - name: 查看详情
          link: 'https://www.baidu.com'
        - name: 修改
          link: 'https://www.baidu.com'
card_data:
  content:
    - component: h-card-v1
      image: >-
        https://ceshiren.com/uploads/default/original/3X/8/5/85cda4c046cff230f4279576c8eb98f62be379f7.jpeg
      header: 90天产品经理实战班
      meta:
        - BAT大厂
        - 7200元
        - 三个月
      description:
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      extra:
        - name: 查看详情
          link: 'https://www.baidu.com'
        - name: 修改
          link: 'https://www.baidu.com'
    - component: h-card-v1
      image: >-
        https://ceshiren.com/uploads/default/optimized/3X/2/1/21e5a080e547c03567fd1f6930d0861fd1f78f52_2_800x450.jpeg
      header: 90天产品经理实战班
      meta:
        - BAT大厂
        - 7200元
        - 三个月
      description:
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      extra:
        - name: 查看详情
          link: 'https://www.baidu.com'
        - name: 修改
          link: 'https://www.baidu.com'
    - component: h-card-v1
      image: >-
        https://ceshiren.com/uploads/default/original/3X/c/7/c7cb60873b493a1cd48dc8204c81c94cca8da6fc.jpeg
      header: 90天产品经理实战班
      meta:
        - BAT大厂
        - 7200元
        - 三个月
      description:
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      extra:
        - name: 查看详情
          link: 'https://www.baidu.com'
        - name: 修改
          link: 'https://www.baidu.com'
    - component: h-card-v1
      image: >-
        https://10.idqqimg.com/qqcourse_logo_ng/ajNVdqHZLLA1P6Yjs0EDgD3ftUcFvU7ICD7Fznh3ia0Jlr8tAlYWibXe4tSp22pVSwHicc3icrVXvVI/600
      header: 90天产品经理实战班
      meta:
        - BAT大厂
        - 7200元
        - 三个月
      description:
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      extra:
        - name: 查看详情
          link: 'https://www.baidu.com'
        - name: 修改
          link: 'https://www.baidu.com'
    - component: h-card-v1
      image: >-
        https://gitlab.ceshiren.com/ceba/hogwarts/uploads/c14b1dac4294c1f90ae4f7c6781b4b45/web%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95%E5%AD%A6%E5%91%98%E7%B3%BB%E7%BB%9F%E5%A4%B4%E5%9B%BE.png
      header: 90天产品经理实战班
      meta:
        - BAT大厂
        - 7200元
        - 三个月
      description:
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      extra:
        - name: 查看详情
          link: 'https://www.baidu.com'
        - name: 修改
          link: 'https://www.baidu.com'
    - component: h-card-v1
      image: >-
        https://ceshiren.com/uploads/default/original/3X/e/3/e3851232ff72d99bd3b7efd228b03eb349e3d329.jpeg
      header: 90天产品经理实战班
      meta:
        - BAT大厂
        - 7200元
        - 三个月
      description:
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      extra:
        - name: 查看详情
          link: 'https://www.baidu.com'
        - name: 修改
          link: 'https://www.baidu.com'
    - component: h-card-v1
      image: >-
        https://ceshiren.com/uploads/default/original/3X/2/c/2c0440c4cafdc9dd03a389cccf35e071b6da49b5.jpeg
      header: 90天产品经理实战班
      meta:
        - BAT大厂
        - 7200元
        - 三个月
      description:
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
        - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
      extra:
        - name: 查看详情
          link: 'https://www.baidu.com'
        - name: 修改
          link: 'https://www.baidu.com'

使用数据 ​

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