album.nvue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">基础使用</text>
  5. <view class="u-demo-block__content">
  6. <view class="album">
  7. <view class="album__avatar">
  8. <image
  9. src="/static/uview/common/logo.png"
  10. mode=""
  11. style="width: 32px;height: 32px;"
  12. ></image>
  13. </view>
  14. <view class="album__content">
  15. <u--text
  16. text="uView UI"
  17. type="primary"
  18. bold
  19. size="17"
  20. ></u--text>
  21. <u--text
  22. margin="0 0 8px 0"
  23. text="全面的组件和便捷的工具会让您信手拈来,如鱼得水"
  24. ></u--text>
  25. <u-album
  26. :urls="urls1"
  27. keyName="src2"
  28. ></u-album>
  29. </view>
  30. </view>
  31. </view>
  32. </view>
  33. <view class="u-demo-block">
  34. <text class="u-demo-block__title">多图模式</text>
  35. <view class="u-demo-block__content">
  36. <view class="album">
  37. <view class="album__avatar">
  38. <image
  39. src="/static/uview/common/logo.png"
  40. mode=""
  41. style="width: 32px;height: 32px;"
  42. ></image>
  43. </view>
  44. <view class="album__content">
  45. <u--text
  46. text="uView UI"
  47. type="primary"
  48. bold
  49. size="17"
  50. ></u--text>
  51. <u--text
  52. margin="0 0 8px 0"
  53. text="全面的组件和便捷的工具会让您信手拈来,如鱼得水"
  54. ></u--text>
  55. <u-album :urls="urls2"></u-album>
  56. </view>
  57. </view>
  58. </view>
  59. </view>
  60. <view class="u-demo-block">
  61. <text class="u-demo-block__title">图文对齐</text>
  62. <view class="u-demo-block__content">
  63. <view class="album">
  64. <view class="album__avatar">
  65. <image
  66. src="/static/uview/common/logo.png"
  67. mode=""
  68. style="width: 32px;height: 32px;"
  69. ></image>
  70. </view>
  71. <view class="album__content">
  72. <u--text
  73. text="uView UI"
  74. type="primary"
  75. bold
  76. size="17"
  77. ></u--text>
  78. <view :style="{
  79. marginBottom: '8px',
  80. width: albumWidth + 'px'
  81. }">
  82. <u--text
  83. text="全面的组件和便捷的工具会让您信手拈来,如鱼得水"
  84. :customStyle="{
  85. width: albumWidth + 'px'
  86. }"
  87. ></u--text>
  88. </view>
  89. <u-album
  90. :urls="urls2"
  91. @albumWidth="width => albumWidth = width"
  92. multipleSize="68"
  93. ></u-album>
  94. </view>
  95. </view>
  96. </view>
  97. </view>
  98. <view class="u-demo-block">
  99. <text class="u-demo-block__title">更改裁剪模式</text>
  100. <view class="u-demo-block__content">
  101. <view class="album">
  102. <view class="album__avatar">
  103. <image
  104. src="/static/uview/common/logo.png"
  105. mode=""
  106. style="width: 32px;height: 32px;"
  107. ></image>
  108. </view>
  109. <view class="album__content">
  110. <u--text
  111. text="uView UI"
  112. type="primary"
  113. bold
  114. size="17"
  115. ></u--text>
  116. <u--text
  117. margin="0 0 8px 0"
  118. text="全面的组件和便捷的工具会让您信手拈来,如鱼得水"
  119. ></u--text>
  120. <u-album
  121. :urls="urls3"
  122. rowCount="2"
  123. maxCount="4"
  124. multipleMode="scaleToFill"
  125. ></u-album>
  126. </view>
  127. </view>
  128. </view>
  129. </view>
  130. <view class="u-demo-block">
  131. <text class="u-demo-block__title">更改图片大小</text>
  132. <view class="u-demo-block__content">
  133. <view class="album">
  134. <view class="album__avatar">
  135. <image
  136. src="/static/uview/common/logo.png"
  137. mode=""
  138. style="width: 32px;height: 32px;"
  139. ></image>
  140. </view>
  141. <view class="album__content">
  142. <u--text
  143. text="uView UI"
  144. type="primary"
  145. bold
  146. size="17"
  147. ></u--text>
  148. <u--text
  149. margin="0 0 8px 0"
  150. text="全面的组件和便捷的工具会让您信手拈来,如鱼得水"
  151. ></u--text>
  152. <u-album
  153. :urls="urls4"
  154. rowCount="2"
  155. maxCount="4"
  156. multipleSize="50"
  157. ></u-album>
  158. </view>
  159. </view>
  160. </view>
  161. </view>
  162. </view>
  163. </template>
  164. <script>
  165. export default {
  166. data() {
  167. return {
  168. albumWidth: 0,
  169. urls1: [{
  170. src2: 'https://cdn.uviewui.com/uview/album/1.jpg',
  171. }],
  172. urls2: [
  173. 'https://cdn.uviewui.com/uview/album/1.jpg',
  174. 'https://cdn.uviewui.com/uview/album/2.jpg',
  175. 'https://cdn.uviewui.com/uview/album/3.jpg',
  176. 'https://cdn.uviewui.com/uview/album/4.jpg',
  177. 'https://cdn.uviewui.com/uview/album/5.jpg',
  178. 'https://cdn.uviewui.com/uview/album/6.jpg',
  179. 'https://cdn.uviewui.com/uview/album/7.jpg',
  180. 'https://cdn.uviewui.com/uview/album/8.jpg',
  181. 'https://cdn.uviewui.com/uview/album/9.jpg',
  182. 'https://cdn.uviewui.com/uview/album/10.jpg',
  183. ],
  184. urls3: [
  185. 'https://cdn.uviewui.com/uview/album/5.jpg',
  186. 'https://cdn.uviewui.com/uview/album/6.jpg',
  187. 'https://cdn.uviewui.com/uview/album/7.jpg',
  188. 'https://cdn.uviewui.com/uview/album/8.jpg',
  189. ],
  190. urls4: [
  191. 'https://cdn.uviewui.com/uview/album/7.jpg',
  192. 'https://cdn.uviewui.com/uview/album/8.jpg',
  193. 'https://cdn.uviewui.com/uview/album/9.jpg',
  194. 'https://cdn.uviewui.com/uview/album/10.jpg',
  195. ]
  196. }
  197. }
  198. }
  199. </script>
  200. <style lang="scss">
  201. .album {
  202. @include flex;
  203. align-items: flex-start;
  204. &__avatar {
  205. background-color: $u-bg-color;
  206. padding: 5px;
  207. border-radius: 3px;
  208. }
  209. &__content {
  210. margin-left: 10px;
  211. flex: 1;
  212. }
  213. }
  214. </style>