Tuniao UI Uniapp V3TnPhotoAlbum-相册
该组件一般用户展示图片列表
组件位置
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 | 最大显示图片的数量 | Number | 9 | - |
| column | 一行显示的图片数量 | Number | 3 | - |
| img-mode | 图片显示模式 | String | aspectFill | scaleToFill / aspectFit / aspectFit / widthFix / heightFix / top / bottom / center / left / right / top left / top right / bottom left / bottom right |
| lazy-load | 是否开启懒加载 | Boolean | true | false |
| preview | 点击图片进行预览 | Boolean | true | false |
Emits
| 事件名 | 说明 | 类型 |
|---|---|---|
| click | 图片点击事件 | (index: number) => void |