From 66d2c8d8c97e19fdbd969f97dd3d6a28f27c415f Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Wed, 01 Nov 2023 16:07:03 +0800 Subject: [PATCH] fix:小程序分享功能和秒级数据 --- uni_modules/uview-ui/components/u-album/u-album.vue | 259 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 259 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-album/u-album.vue b/uni_modules/uview-ui/components/u-album/u-album.vue new file mode 100644 index 0000000..687e2d5 --- /dev/null +++ b/uni_modules/uview-ui/components/u-album/u-album.vue @@ -0,0 +1,259 @@ +<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> \ No newline at end of file -- Gitblit v1.8.0