index.wxml 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <wxs src="../wxs/utils.wxs" module="utils" />
  2. <view class="van-uploader">
  3. <view class="van-uploader__wrapper">
  4. <!-- 预览样式 -->
  5. <view
  6. wx:if="{{ previewImage }}"
  7. wx:for="{{ lists }}"
  8. wx:key="index"
  9. class="van-uploader__preview"
  10. data-index="{{ index }}"
  11. bindtap="onClickPreview"
  12. >
  13. <image
  14. wx:if="{{ item.isImage }}"
  15. mode="{{ imageFit }}"
  16. src="{{ item.url || item.path }}"
  17. alt="{{ item.name || ('图片' + index) }}"
  18. class="van-uploader__preview-image"
  19. style="width: {{ utils.addUnit(previewSize) }}; height: {{ utils.addUnit(previewSize) }};"
  20. data-index="{{ index }}"
  21. bind:tap="onPreviewImage"
  22. />
  23. <view
  24. wx:else
  25. class="van-uploader__file"
  26. style="width: {{ utils.addUnit(previewSize) }}; height: {{ utils.addUnit(previewSize) }};"
  27. >
  28. <van-icon name="description" class="van-uploader__file-icon" />
  29. <view class="van-uploader__file-name van-ellipsis">{{ item.name || item.url || item.path }}</view>
  30. </view>
  31. <view
  32. wx:if="{{ item.status === 'uploading' || item.status === 'failed' }}"
  33. class="van-uploader__mask"
  34. >
  35. <van-icon wx:if="{{ item.status === 'failed' }}" name="warning-o" class="van-uploader__mask-icon" />
  36. <van-loading wx:else class="van-uploader__loading" />
  37. <text wx:if="{{ item.message }}" class="van-uploader__upload-text">{{ item.message }}</text>
  38. </view>
  39. <van-icon
  40. wx:if="{{ deletable }}"
  41. name="clear"
  42. class="van-uploader__preview-delete"
  43. data-index="{{ index }}"
  44. catch:tap="deleteItem"
  45. />
  46. </view>
  47. <!-- 上传样式 -->
  48. <block wx:if="{{ isInCount }}">
  49. <view class="van-uploader__slot" bind:tap="startUpload">
  50. <slot />
  51. </view>
  52. <!-- 默认上传样式 -->
  53. <view
  54. wx:if="{{ showUpload }}"
  55. class="van-uploader__upload {{ disabled ? 'van-uploader__upload--disabled': ''}}"
  56. style="width: {{ utils.addUnit(previewSize) }}; height: {{ utils.addUnit(previewSize) }};"
  57. bind:tap="startUpload"
  58. >
  59. <van-icon name="{{ uploadIcon }}" class="van-uploader__upload-icon" />
  60. <text wx:if="{{ uploadText }}" class="van-uploader__upload-text">{{ uploadText }}</text>
  61. </view>
  62. </block>
  63. </view>
  64. </view>