avatar.nvue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  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. <u-avatar :src="src1"></u-avatar>
  7. </view>
  8. </view>
  9. <view class="u-demo-block">
  10. <text class="u-demo-block__title">头像形状</text>
  11. <view class="u-demo-block__content">
  12. <view class="u-avatar-item">
  13. <u-avatar
  14. :src="src2"
  15. shape="circle"
  16. @click="click"
  17. ></u-avatar>
  18. </view>
  19. <view class="u-avatar-item">
  20. <u-avatar
  21. :src="src3"
  22. shape="square"
  23. ></u-avatar>
  24. </view>
  25. </view>
  26. </view>
  27. <view class="u-demo-block">
  28. <text class="u-demo-block__title">头像尺寸</text>
  29. <view class="u-demo-block__content">
  30. <view class="u-avatar-item">
  31. <u-avatar
  32. :src="src4"
  33. size="30"
  34. ></u-avatar>
  35. </view>
  36. <view class="u-avatar-item">
  37. <u-avatar
  38. :src="src5"
  39. size="40"
  40. ></u-avatar>
  41. </view>
  42. <view class="u-avatar-item">
  43. <u-avatar
  44. :src="src6"
  45. size="50"
  46. ></u-avatar>
  47. </view>
  48. </view>
  49. </view>
  50. <view class="u-demo-block">
  51. <text class="u-demo-block__title">图标头像</text>
  52. <view class="u-demo-block__content">
  53. <view class="u-avatar-item">
  54. <u-avatar
  55. icon="red-packet-fill"
  56. fontSize="22"
  57. ></u-avatar>
  58. </view>
  59. <view class="u-avatar-item">
  60. <u-avatar
  61. icon="star-fill"
  62. fontSize="22"
  63. ></u-avatar>
  64. </view>
  65. </view>
  66. </view>
  67. <view class="u-demo-block">
  68. <text class="u-demo-block__title">文字头像(自动背景色)</text>
  69. <view class="u-demo-block__content">
  70. <view class="u-avatar-item">
  71. <u-avatar
  72. text="U"
  73. fontSize="20"
  74. randomBgColor
  75. :colorIndex="0"
  76. ></u-avatar>
  77. </view>
  78. <view class="u-avatar-item">
  79. <u-avatar
  80. text="邓"
  81. fontSize="18"
  82. randomBgColor
  83. ></u-avatar>
  84. </view>
  85. <view class="u-avatar-item">
  86. <u-avatar
  87. text="张"
  88. fontSize="18"
  89. randomBgColor
  90. ></u-avatar>
  91. </view>
  92. <view class="u-avatar-item">
  93. <u-avatar
  94. text="王"
  95. fontSize="18"
  96. randomBgColor
  97. ></u-avatar>
  98. </view>
  99. </view>
  100. </view>
  101. <view class="u-demo-block">
  102. <text class="u-demo-block__title">图片加载失败(显示默认头像)</text>
  103. <view class="u-demo-block__content">
  104. <u-avatar :src="src7"></u-avatar>
  105. </view>
  106. </view>
  107. <!-- #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU -->
  108. <view class="u-demo-block">
  109. <text class="u-demo-block__title">小程序开放能力</text>
  110. <view class="u-demo-block__content">
  111. <view class="u-avatar-item">
  112. <u-avatar
  113. mpAvatar
  114. size="60"
  115. ></u-avatar>
  116. </view>
  117. </view>
  118. </view>
  119. <!-- #endif -->
  120. <view class="u-demo-block">
  121. <text class="u-demo-block__title">头像组</text>
  122. <view class="u-demo-block__content">
  123. <u-avatar-group
  124. :urls="urls"
  125. size="35"
  126. gap="0.4"
  127. ></u-avatar-group>
  128. </view>
  129. <view class="u-demo-block__content" style="margin-top: 20px">
  130. <u-avatar-group
  131. :urls="urls"
  132. size="35"
  133. gap="0.6"
  134. ></u-avatar-group>
  135. </view>
  136. </view>
  137. </view>
  138. </template>
  139. <script>
  140. export default {
  141. data() {
  142. return {
  143. src1: 'https://cdn.uviewui.com/uview/album/1.jpg',
  144. src2: 'https://cdn.uviewui.com/uview/album/2.jpg',
  145. src3: 'https://cdn.uviewui.com/uview/album/3.jpg',
  146. src4: 'https://cdn.uviewui.com/uview/album/4.jpg',
  147. src5: 'https://cdn.uviewui.com/uview/album/5.jpg',
  148. src6: 'https://cdn.uviewui.com/uview/album/6.jpg',
  149. src7: 'https://cdn.uviewui.com/uview/album/noExist.jpg',
  150. urls: [
  151. 'https://cdn.uviewui.com/uview/album/1.jpg',
  152. 'https://cdn.uviewui.com/uview/album/2.jpg',
  153. 'https://cdn.uviewui.com/uview/album/3.jpg',
  154. 'https://cdn.uviewui.com/uview/album/4.jpg',
  155. 'https://cdn.uviewui.com/uview/album/7.jpg',
  156. 'https://cdn.uviewui.com/uview/album/6.jpg',
  157. 'https://cdn.uviewui.com/uview/album/5.jpg'
  158. ]
  159. }
  160. },
  161. onLoad() {
  162. },
  163. methods: {
  164. click(name) {
  165. console.log('click', name);
  166. }
  167. },
  168. }
  169. </script>
  170. <style lang="scss">
  171. .u-demo-block__content {
  172. @include flex;
  173. align-items: center;
  174. }
  175. .u-avatar-item {
  176. margin-right: 30px;
  177. }
  178. </style>