image.nvue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  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="u-page__image-item">
  7. <u--image
  8. :showLoading="true"
  9. :src="src"
  10. width="80px"
  11. height="80px"
  12. @click="click"
  13. ></u--image>
  14. </view>
  15. </view>
  16. </view>
  17. <view class="u-demo-block">
  18. <text class="u-demo-block__title">自定义形状</text>
  19. <view class="u-demo-block__content">
  20. <view class="u-page__image-item">
  21. <u--image
  22. shape="circle"
  23. :src="src"
  24. width="80px"
  25. height="80px"
  26. ></u--image>
  27. </view>
  28. </view>
  29. </view>
  30. <view class="u-demo-block">
  31. <text class="u-demo-block__title">自定义圆角</text>
  32. <view class="u-demo-block__content">
  33. <view class="u-page__image-item">
  34. <u--image
  35. radius="4"
  36. :src="src"
  37. width="80px"
  38. height="80px"
  39. ></u--image>
  40. </view>
  41. </view>
  42. </view>
  43. <view class="u-demo-block">
  44. <text class="u-demo-block__title">图片模式(widthFit)</text>
  45. <view class="u-demo-block__content">
  46. <view class="u-page__image-item">
  47. <u--image
  48. :src="src"
  49. width="80px"
  50. height="80px"
  51. mode="widthFit"
  52. ></u--image>
  53. </view>
  54. </view>
  55. </view>
  56. <view class="u-demo-block">
  57. <text class="u-demo-block__title">自定义图片加载插槽</text>
  58. <view class="u-demo-block__content">
  59. <view class="u-page__image-item">
  60. <u--image
  61. :src="src1"
  62. width="80px"
  63. height="80px"
  64. mode="widthFit"
  65. >
  66. <template v-slot:loading>
  67. <u-loading-icon color="red"></u-loading-icon>
  68. </template>
  69. </u--image>
  70. </view>
  71. </view>
  72. </view>
  73. </view>
  74. </template>
  75. <script>
  76. export default {
  77. data() {
  78. return {
  79. src: 'https://cdn.uviewui.com/uview/album/1.jpg',
  80. src1:''
  81. }
  82. },
  83. onLoad() {
  84. setTimeout(()=>{
  85. this.src1 = this.src
  86. },3000)
  87. },
  88. methods: {
  89. click() {
  90. console.log('click');
  91. }
  92. }
  93. }
  94. </script>
  95. <style lang="scss">
  96. </style>