hogwarts-ui 官方网站

Appearance

Images 图片组 ​

基础用法-v1版本 ​

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

<script setup>
const h_data = [
  'https://ceshiren.com/uploads/default/original/3X/6/4/64226c11ece1359d6ae48e3df0adef88c8bfef65.jpeg',
  'https://ceshiren.com/uploads/default/original/3X/9/a/9aac5a4d3619859ddbf27fb6fc4cc6a42f162dc7.jpeg',
  'https://ceshiren.com/uploads/default/original/3X/4/4/44eedc73bba7c64049653e129f838970e1f0ed37.jpeg',
  'https://ceshiren.com/uploads/default/optimized/3X/9/5/9557ddffb5158669b0dc61e3840d271d97dae522_2_800x1422.jpeg',
]
</script>
<template>
  <h-images-v1 :h_data="h_data"></h-images-v1>
</template>

<script setup>
const h_data = [
  'https://ceshiren.com/uploads/default/original/3X/6/4/64226c11ece1359d6ae48e3df0adef88c8bfef65.jpeg',
  'https://ceshiren.com/uploads/default/original/3X/9/a/9aac5a4d3619859ddbf27fb6fc4cc6a42f162dc7.jpeg',
  'https://ceshiren.com/uploads/default/original/3X/4/4/44eedc73bba7c64049653e129f838970e1f0ed37.jpeg',
  'https://ceshiren.com/uploads/default/optimized/3X/9/5/9557ddffb5158669b0dc61e3840d271d97dae522_2_800x1422.jpeg',
]
</script>

基础用法-v2版本 ​

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

<script setup>
const h_data = [
  'https://ceshiren.com/uploads/default/original/3X/6/4/64226c11ece1359d6ae48e3df0adef88c8bfef65.jpeg',
  'https://ceshiren.com/uploads/default/original/3X/9/a/9aac5a4d3619859ddbf27fb6fc4cc6a42f162dc7.jpeg',
  'https://ceshiren.com/uploads/default/original/3X/4/4/44eedc73bba7c64049653e129f838970e1f0ed37.jpeg',
  'https://ceshiren.com/uploads/default/optimized/3X/9/5/9557ddffb5158669b0dc61e3840d271d97dae522_2_800x1422.jpeg',
]
</script>
<template>
  <h-images-v2 :h_data="h_data"></h-images-v2>
</template>

<script setup>
const h_data = [
  'https://ceshiren.com/uploads/default/original/3X/6/4/64226c11ece1359d6ae48e3df0adef88c8bfef65.jpeg',
  'https://ceshiren.com/uploads/default/original/3X/9/a/9aac5a4d3619859ddbf27fb6fc4cc6a42f162dc7.jpeg',
  'https://ceshiren.com/uploads/default/original/3X/4/4/44eedc73bba7c64049653e129f838970e1f0ed37.jpeg',
  'https://ceshiren.com/uploads/default/optimized/3X/9/5/9557ddffb5158669b0dc61e3840d271d97dae522_2_800x1422.jpeg',
]
</script>