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 | 最大显示图片的数量 | 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 |