学员端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

258 lines
9.7 KiB

1 year ago
  1. <template>
  2. <view class="u-album">
  3. <view
  4. class="u-album__row"
  5. ref="u-album__row"
  6. v-for="(arr, index) in showUrls"
  7. :forComputedUse="albumWidth"
  8. :key="index"
  9. >
  10. <view
  11. class="u-album__row__wrapper"
  12. v-for="(item, index1) in arr"
  13. :key="index1"
  14. :style="[imageStyle(index + 1, index1 + 1)]"
  15. @tap="previewFullImage ? onPreviewTap(getSrc(item)) : ''"
  16. >
  17. <image
  18. :src="getSrc(item)"
  19. :mode="
  20. urls.length === 1
  21. ? imageHeight > 0
  22. ? singleMode
  23. : 'widthFix'
  24. : multipleMode
  25. "
  26. :style="[
  27. {
  28. width: imageWidth,
  29. height: imageHeight
  30. }
  31. ]"
  32. ></image>
  33. <view
  34. v-if="
  35. showMore &&
  36. urls.length > rowCount * showUrls.length &&
  37. index === showUrls.length - 1 &&
  38. index1 === showUrls[showUrls.length - 1].length - 1
  39. "
  40. class="u-album__row__wrapper__text"
  41. >
  42. <u--text
  43. :text="`+${urls.length - maxCount}`"
  44. color="#fff"
  45. :size="multipleSize * 0.3"
  46. align="center"
  47. customStyle="justify-content: center"
  48. ></u--text>
  49. </view>
  50. </view>
  51. </view>
  52. </view>
  53. </template>
  54. <script>
  55. import props from './props.js'
  56. // #ifdef APP-NVUE
  57. // 由于weex为阿里的KPI业绩考核的产物,所以不支持百分比单位,这里需要通过dom查询组件的宽度
  58. const dom = uni.requireNativePlugin('dom')
  59. // #endif
  60. /**
  61. * Album 相册
  62. * @description 本组件提供一个类似相册的功能让开发者开发起来更加得心应手减少重复的模板代码
  63. * @tutorial https://www.uviewui.com/components/album.html
  64. *
  65. * @property {Array} urls 图片地址列表 Array<String>|Array<Object>形式
  66. * @property {String} keyName 指定从数组的对象元素中读取哪个属性作为图片地址
  67. * @property {String | Number} singleSize 单图时图片长边的长度 默认 180
  68. * @property {String | Number} multipleSize 多图时图片边长 默认 70
  69. * @property {String | Number} space 多图时图片水平和垂直之间的间隔 默认 6
  70. * @property {String} singleMode 单图时图片缩放裁剪的模式 默认 'scaleToFill'
  71. * @property {String} multipleMode 多图时图片缩放裁剪的模式 默认 'aspectFill'
  72. * @property {String | Number} maxCount 取消按钮的提示文字 默认 9
  73. * @property {Boolean} previewFullImage 是否可以预览图片 默认 true
  74. * @property {String | Number} rowCount 每行展示图片数量如设置singleSize和multipleSize将会无效 默认 3
  75. * @property {Boolean} showMore 超出maxCount时是否显示查看更多的提示 默认 true
  76. *
  77. * @event {Function} albumWidth 某些特殊的情况下需要让文字与相册的宽度相等这里事件的形式对外发送 回调参数 width
  78. * @example <u-album :urls="urls2" @albumWidth="width => albumWidth = width" multipleSize="68" ></u-album>
  79. */
  80. export default {
  81. name: 'u-album',
  82. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  83. data() {
  84. return {
  85. // 单图的宽度
  86. singleWidth: 0,
  87. // 单图的高度
  88. singleHeight: 0,
  89. // 单图时,如果无法获取图片的尺寸信息,让图片宽度默认为容器的一定百分比
  90. singlePercent: 0.6
  91. }
  92. },
  93. watch: {
  94. urls: {
  95. immediate: true,
  96. handler(newVal) {
  97. if (newVal.length === 1) {
  98. this.getImageRect()
  99. }
  100. }
  101. }
  102. },
  103. computed: {
  104. imageStyle() {
  105. return (index1, index2) => {
  106. const { space, rowCount, multipleSize, urls } = this,
  107. { addUnit, addStyle } = uni.$u,
  108. rowLen = this.showUrls.length,
  109. allLen = this.urls.length
  110. const style = {
  111. marginRight: addUnit(space),
  112. marginBottom: addUnit(space)
  113. }
  114. // 如果为最后一行,则每个图片都无需下边框
  115. if (index1 === rowLen) style.marginBottom = 0
  116. // 每行的最右边一张和总长度的最后一张无需右边框
  117. if (
  118. index2 === rowCount ||
  119. (index1 === rowLen &&
  120. index2 === this.showUrls[index1 - 1].length)
  121. )
  122. style.marginRight = 0
  123. return style
  124. }
  125. },
  126. // 将数组划分为二维数组
  127. showUrls() {
  128. const arr = []
  129. this.urls.map((item, index) => {
  130. // 限制最大展示数量
  131. if (index + 1 <= this.maxCount) {
  132. // 计算该元素为第几个素组内
  133. const itemIndex = Math.floor(index / this.rowCount)
  134. // 判断对应的索引是否存在
  135. if (!arr[itemIndex]) {
  136. arr[itemIndex] = []
  137. }
  138. arr[itemIndex].push(item)
  139. }
  140. })
  141. return arr
  142. },
  143. imageWidth() {
  144. return uni.$u.addUnit(
  145. this.urls.length === 1 ? this.singleWidth : this.multipleSize
  146. )
  147. },
  148. imageHeight() {
  149. return uni.$u.addUnit(
  150. this.urls.length === 1 ? this.singleHeight : this.multipleSize
  151. )
  152. },
  153. // 此变量无实际用途,仅仅是为了利用computed特性,让其在urls长度等变化时,重新计算图片的宽度
  154. // 因为用户在某些特殊的情况下,需要让文字与相册的宽度相等,所以这里事件的形式对外发送
  155. albumWidth() {
  156. let width = 0
  157. if (this.urls.length === 1) {
  158. width = this.singleWidth
  159. } else {
  160. width =
  161. this.showUrls[0].length * this.multipleSize +
  162. this.space * (this.showUrls[0].length - 1)
  163. }
  164. this.$emit('albumWidth', width)
  165. return width
  166. }
  167. },
  168. methods: {
  169. // 预览图片
  170. onPreviewTap(url) {
  171. const urls = this.urls.map((item) => {
  172. return this.getSrc(item)
  173. })
  174. uni.previewImage({
  175. current: url,
  176. urls
  177. })
  178. },
  179. // 获取图片的路径
  180. getSrc(item) {
  181. return uni.$u.test.object(item)
  182. ? (this.keyName && item[this.keyName]) || item.src
  183. : item
  184. },
  185. // 单图时,获取图片的尺寸
  186. // 在小程序中,需要将网络图片的的域名添加到小程序的download域名才可能获取尺寸
  187. // 在没有添加的情况下,让单图宽度默认为盒子的一定宽度(singlePercent)
  188. getImageRect() {
  189. const src = this.getSrc(this.urls[0])
  190. uni.getImageInfo({
  191. src,
  192. success: (res) => {
  193. // 判断图片横向还是竖向展示方式
  194. const isHorizotal = res.width >= res.height
  195. this.singleWidth = isHorizotal
  196. ? this.singleSize
  197. : (res.width / res.height) * this.singleSize
  198. this.singleHeight = !isHorizotal
  199. ? this.singleSize
  200. : (res.height / res.width) * this.singleWidth
  201. },
  202. fail: () => {
  203. this.getComponentWidth()
  204. }
  205. })
  206. },
  207. // 获取组件的宽度
  208. async getComponentWidth() {
  209. // 延时一定时间,以获取dom尺寸
  210. await uni.$u.sleep(30)
  211. // #ifndef APP-NVUE
  212. this.$uGetRect('.u-album__row').then((size) => {
  213. this.singleWidth = size.width * this.singlePercent
  214. })
  215. // #endif
  216. // #ifdef APP-NVUE
  217. // 这里ref="u-album__row"所在的标签为通过for循环出来,导致this.$refs['u-album__row']是一个数组
  218. const ref = this.$refs['u-album__row'][0]
  219. ref &&
  220. dom.getComponentRect(ref, (res) => {
  221. this.singleWidth = res.size.width * this.singlePercent
  222. })
  223. // #endif
  224. }
  225. }
  226. }
  227. </script>
  228. <style lang="scss" scoped>
  229. @import '../../libs/css/components.scss';
  230. .u-album {
  231. @include flex(column);
  232. &__row {
  233. @include flex(row);
  234. flex-wrap: wrap;
  235. &__wrapper {
  236. position: relative;
  237. &__text {
  238. position: absolute;
  239. top: 0;
  240. left: 0;
  241. right: 0;
  242. bottom: 0;
  243. background-color: rgba(0, 0, 0, 0.3);
  244. @include flex(row);
  245. justify-content: center;
  246. align-items: center;
  247. }
  248. }
  249. }
  250. }
  251. </style>