Skip to content
12:13

TnPhotoAlbum-相册

该组件一般用户展示图片列表

组件位置

typescript
import TnPhotoAlbum from '@tuniao/tnui-vue3-uniapp/components/photo-album/src/photo-album.vue'
import TnPhotoAlbum from '@tuniao/tnui-vue3-uniapp/components/photo-album/src/photo-album.vue'
typescript
import TnPhotoAlbum from '@/uni_modules/tuniaoui-vue3/components/photo-album/src/photo-album.vue'
import TnPhotoAlbum from '@/uni_modules/tuniaoui-vue3/components/photo-album/src/photo-album.vue'

平台差异说明

App(vue)H5微信小程序支付宝小程序...
适配中

基础使用

通过data传递图片Url地址数组

vue
<script lang="ts" setup>
const imageData = [
  'https://tnuiimage.tnkjapp.com/swiper/ad1.jpg',
  'https://tnuiimage.tnkjapp.com/swiper/ad2.jpg',
  'https://tnuiimage.tnkjapp.com/swiper/ad3.jpg',
  'https://tnuiimage.tnkjapp.com/swiper/ad4.jpg',
  'https://tnuiimage.tnkjapp.com/swiper/ad5.jpg',
]
</script>

<template>
  <TnPhotoAlbum :data="imageData" />
</template>
<script lang="ts" setup>
const imageData = [
  'https://tnuiimage.tnkjapp.com/swiper/ad1.jpg',
  'https://tnuiimage.tnkjapp.com/swiper/ad2.jpg',
  'https://tnuiimage.tnkjapp.com/swiper/ad3.jpg',
  'https://tnuiimage.tnkjapp.com/swiper/ad4.jpg',
  'https://tnuiimage.tnkjapp.com/swiper/ad5.jpg',
]
</script>

<template>
  <TnPhotoAlbum :data="imageData" />
</template>

修改一行显示图片的数量

通过column属性修改一行显示图片的数量

vue
<template>
  <TnPhotoAlbum :data="imageData" :column="4" />
</template>
<template>
  <TnPhotoAlbum :data="imageData" :column="4" />
</template>

API

Props

属性名说明类型默认值可选值
data图片地址数据Array<string>[]-
max最大显示图片的数量Number9-
column一行显示的图片数量Number3-
img-mode图片显示模式StringaspectFillscaleToFill / aspectFit / aspectFit / widthFix / heightFix / top / bottom / center / left / right / top left / top right / bottom left / bottom right
lazy-load是否开启懒加载Booleantruefalse
preview点击图片进行预览Booleantruefalse

Emits

事件名说明类型
click图片点击事件(index: number) => void

Tuniao UI