259 lines
9.7 KiB
259 lines
9.7 KiB
9 months ago
|
<template>
|
||
|
|
<view class="u-album">
|
||
|
|
<view
|
||
|
|
class="u-album__row"
|
||
|
|
ref="u-album__row"
|
||
|
|
v-for="(arr, index) in showUrls"
|
||
|
|
:forComputedUse="albumWidth"
|
||
|
|
:key="index"
|
||
|
|
>
|
||
|
|
<view
|
||
|
|
class="u-album__row__wrapper"
|
||
|
|
v-for="(item, index1) in arr"
|
||
|
|
:key="index1"
|
||
|
|
:style="[imageStyle(index + 1, index1 + 1)]"
|
||
|
|
@tap="previewFullImage ? onPreviewTap(getSrc(item)) : ''"
|
||
|
|
>
|
||
|
|
<image
|
||
|
|
:src="getSrc(item)"
|
||
|
|
:mode="
|
||
|
|
urls.length === 1
|
||
|
|
? imageHeight > 0
|
||
|
|
? singleMode
|
||
|
|
: 'widthFix'
|
||
|
|
: multipleMode
|
||
|
|
"
|
||
|
|
:style="[
|
||
|
|
{
|
||
|
|
width: imageWidth,
|
||
|
|
height: imageHeight
|
||
|
|
}
|
||
|
|
]"
|
||
|
|
></image>
|
||
|
|
<view
|
||
|
|
v-if="
|
||
|
|
showMore &&
|
||
|
|
urls.length > rowCount * showUrls.length &&
|
||
|
|
index === showUrls.length - 1 &&
|
||
|
|
index1 === showUrls[showUrls.length - 1].length - 1
|
||
|
|
"
|
||
|
|
class="u-album__row__wrapper__text"
|
||
|
|
>
|
||
|
|
<u--text
|
||
|
|
:text="`+${urls.length - maxCount}`"
|
||
|
|
color="#fff"
|
||
|
|
:size="multipleSize * 0.3"
|
||
|
|
align="center"
|
||
|
|
customStyle="justify-content: center"
|
||
|
|
></u--text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import props from './props.js'
|
||
|
|
// #ifdef APP-NVUE
|
||
|
|
// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
|
||
|
|
const dom = uni.requireNativePlugin('dom')
|
||
|
|
// #endif
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Album 相册
|
||
|
|
* @description 本组件提供一个类似相册的功能，让开发者开发起来更加得心应手。减少重复的模板代码
|
||
|
|
* @tutorial https://www.uviewui.com/components/album.html
|
||
|
|
*
|
||
|
|
* @property {Array} urls 图片地址列表 Array<String>|Array<Object>形式
|
||
|
|
* @property {String} keyName 指定从数组的对象元素中读取哪个属性作为图片地址
|
||
|
|
* @property {String | Number} singleSize 单图时，图片长边的长度 （默认 180 ）
|
||
|
|
* @property {String | Number} multipleSize 多图时，图片边长 （默认 70 ）
|
||
|
|
* @property {String | Number} space 多图时，图片水平和垂直之间的间隔 （默认 6 ）
|
||
|
|
* @property {String} singleMode 单图时，图片缩放裁剪的模式 （默认 'scaleToFill' ）
|
||
|
|
* @property {String} multipleMode 多图时，图片缩放裁剪的模式 （默认 'aspectFill' ）
|
||
|
|
* @property {String | Number} maxCount 取消按钮的提示文字 （默认 9 ）
|
||
|
|
* @property {Boolean} previewFullImage 是否可以预览图片 （默认 true ）
|
||
|
|
* @property {String | Number} rowCount 每行展示图片数量，如设置，singleSize和multipleSize将会无效 （默认 3 ）
|
||
|
|
* @property {Boolean} showMore 超出maxCount时是否显示查看更多的提示 （默认 true ）
|
||
|
|
*
|
||
|
|
* @event {Function} albumWidth 某些特殊的情况下，需要让文字与相册的宽度相等，这里事件的形式对外发送 （回调参数 width ）
|
||
|
|
* @example <u-album :urls="urls2" @albumWidth="width => albumWidth = width" multipleSize="68" ></u-album>
|
||
|
|
*/
|
||
|
|
export default {
|
||
|
|
name: 'u-album',
|
||
|
|
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
// 单图的宽度
|
||
|
|
singleWidth: 0,
|
||
|
|
// 单图的高度
|
||
|
|
singleHeight: 0,
|
||
|
|
// 单图时，如果无法获取图片的尺寸信息，让图片宽度默认为容器的一定百分比
|
||
|
|
singlePercent: 0.6
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
urls: {
|
||
|
|
immediate: true,
|
||
|
|
handler(newVal) {
|
||
|
|
if (newVal.length === 1) {
|
||
|
|
this.getImageRect()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
imageStyle() {
|
||
|
|
return (index1, index2) => {
|
||
|
|
const { space, rowCount, multipleSize, urls } = this,
|
||
|
|
{ addUnit, addStyle } = uni.$u,
|
||
|
|
rowLen = this.showUrls.length,
|
||
|
|
allLen = this.urls.length
|
||
|
|
const style = {
|
||
|
|
marginRight: addUnit(space),
|
||
|
|
marginBottom: addUnit(space)
|
||
|
|
}
|
||
|
|
// 如果为最后一行，则每个图片都无需下边框
|
||
|
|
if (index1 === rowLen) style.marginBottom = 0
|
||
|
|
// 每行的最右边一张和总长度的最后一张无需右边框
|
||
|
|
if (
|
||
|
|
index2 === rowCount ||
|
||
|
|
(index1 === rowLen &&
|
||
|
|
index2 === this.showUrls[index1 - 1].length)
|
||
|
|
)
|
||
|
|
style.marginRight = 0
|
||
|
|
return style
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 将数组划分为二维数组
|
||
|
|
showUrls() {
|
||
|
|
const arr = []
|
||
|
|
this.urls.map((item, index) => {
|
||
|
|
// 限制最大展示数量
|
||
|
|
if (index + 1 <= this.maxCount) {
|
||
|
|
// 计算该元素为第几个素组内
|
||
|
|
const itemIndex = Math.floor(index / this.rowCount)
|
||
|
|
// 判断对应的索引是否存在
|
||
|
|
if (!arr[itemIndex]) {
|
||
|
|
arr[itemIndex] = []
|
||
|
|
}
|
||
|
|
arr[itemIndex].push(item)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
return arr
|
||
|
|
},
|
||
|
|
imageWidth() {
|
||
|
|
return uni.$u.addUnit(
|
||
|
|
this.urls.length === 1 ? this.singleWidth : this.multipleSize
|
||
|
|
)
|
||
|
|
},
|
||
|
|
imageHeight() {
|
||
|
|
return uni.$u.addUnit(
|
||
|
|
this.urls.length === 1 ? this.singleHeight : this.multipleSize
|
||
|
|
)
|
||
|
|
},
|
||
|
|
// 此变量无实际用途，仅仅是为了利用computed特性，让其在urls长度等变化时，重新计算图片的宽度
|
||
|
|
// 因为用户在某些特殊的情况下，需要让文字与相册的宽度相等，所以这里事件的形式对外发送
|
||
|
|
albumWidth() {
|
||
|
|
let width = 0
|
||
|
|
if (this.urls.length === 1) {
|
||
|
|
width = this.singleWidth
|
||
|
|
} else {
|
||
|
|
width =
|
||
|
|
this.showUrls[0].length * this.multipleSize +
|
||
|
|
this.space * (this.showUrls[0].length - 1)
|
||
|
|
}
|
||
|
|
this.$emit('albumWidth', width)
|
||
|
|
return width
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 预览图片
|
||
|
|
onPreviewTap(url) {
|
||
|
|
const urls = this.urls.map((item) => {
|
||
|
|
return this.getSrc(item)
|
||
|
|
})
|
||
|
|
uni.previewImage({
|
||
|
|
current: url,
|
||
|
|
urls
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 获取图片的路径
|
||
|
|
getSrc(item) {
|
||
|
|
return uni.$u.test.object(item)
|
||
|
|
? (this.keyName && item[this.keyName]) || item.src
|
||
|
|
: item
|
||
|
|
},
|
||
|
|
// 单图时，获取图片的尺寸
|
||
|
|
// 在小程序中，需要将网络图片的的域名添加到小程序的download域名才可能获取尺寸
|
||
|
|
// 在没有添加的情况下，让单图宽度默认为盒子的一定宽度(singlePercent)
|
||
|
|
getImageRect() {
|
||
|
|
const src = this.getSrc(this.urls[0])
|
||
|
|
uni.getImageInfo({
|
||
|
|
src,
|
||
|
|
success: (res) => {
|
||
|
|
// 判断图片横向还是竖向展示方式
|
||
|
|
const isHorizotal = res.width >= res.height
|
||
|
|
this.singleWidth = isHorizotal
|
||
|
|
? this.singleSize
|
||
|
|
: (res.width / res.height) * this.singleSize
|
||
|
|
this.singleHeight = !isHorizotal
|
||
|
|
? this.singleSize
|
||
|
|
: (res.height / res.width) * this.singleWidth
|
||
|
|
},
|
||
|
|
fail: () => {
|
||
|
|
this.getComponentWidth()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 获取组件的宽度
|
||
|
|
async getComponentWidth() {
|
||
|
|
// 延时一定时间，以获取dom尺寸
|
||
|
|
await uni.$u.sleep(30)
|
||
|
|
// #ifndef APP-NVUE
|
||
|
|
this.$uGetRect('.u-album__row').then((size) => {
|
||
|
|
this.singleWidth = size.width * this.singlePercent
|
||
|
|
})
|
||
|
|
// #endif
|
||
|
|
|
||
|
|
// #ifdef APP-NVUE
|
||
|
|
// 这里ref="u-album__row"所在的标签为通过for循环出来，导致this.$refs['u-album__row']是一个数组
|
||
|
|
const ref = this.$refs['u-album__row'][0]
|
||
|
|
ref &&
|
||
|
|
dom.getComponentRect(ref, (res) => {
|
||
|
|
this.singleWidth = res.size.width * this.singlePercent
|
||
|
|
})
|
||
|
|
// #endif
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import '../../libs/css/components.scss';
|
||
|
|
|
||
|
|
.u-album {
|
||
|
|
@include flex(column);
|
||
|
|
|
||
|
|
&__row {
|
||
|
|
@include flex(row);
|
||
|
|
flex-wrap: wrap;
|
||
|
|
|
||
|
|
&__wrapper {
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
&__text {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background-color: rgba(0, 0, 0, 0.3);
|
||
|
|
@include flex(row);
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|