index.vue 3.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <template>
  2. <uni-shadow-root class="weapp-lib-image-index"><view :style="computed.rootStyle({ width, height, radius })" :class="'custom-class '+(utils.bem('image', { round }))" @click="onClick">
  3. <image v-if="(!error)" :src="src" :mode="computed.mode(fit)" :lazy-load="lazyLoad" :webp="webp" class="image-class van-image__img" :show-menu-by-longpress="showMenuByLongpress" @load="onImageLoad" @error="onImageError"></image>
  4. <view v-if="loading && showLoading" class="loading-class van-image__loading">
  5. <slot v-if="useLoadingSlot" name="loading"></slot>
  6. <van-icon v-else name="photo" custom-class="van-image__loading-icon"></van-icon>
  7. </view>
  8. <view v-if="error && showError" class="error-class van-image__error">
  9. <slot v-if="useErrorSlot" name="error"></slot>
  10. <van-icon v-else name="photo-fail" custom-class="van-image__error-icon"></van-icon>
  11. </view>
  12. </view></uni-shadow-root>
  13. </template>
  14. <wxs src="../wxs/utils.wxs" module="utils"></wxs><wxs src="./index.wxs" module="computed"></wxs>
  15. <script>
  16. import VanIcon from '../icon/index.vue'
  17. import VanLoading from '../loading/index.vue'
  18. global['__wxVueOptions'] = {components:{'van-icon': VanIcon,'van-loading': VanLoading}}
  19. global['__wxRoute'] = 'weapp/lib/image/index'
  20. "use strict";
  21. Object.defineProperty(exports, "__esModule", { value: true });
  22. var component_1 = require("../common/component");
  23. var button_1 = require("../mixins/button");
  24. (0, component_1.VantComponent)({
  25. mixins: [button_1.button],
  26. classes: ['custom-class', 'loading-class', 'error-class', 'image-class'],
  27. props: {
  28. src: {
  29. type: String,
  30. observer: function () {
  31. this.setData({
  32. error: false,
  33. loading: true,
  34. });
  35. },
  36. },
  37. round: Boolean,
  38. width: null,
  39. height: null,
  40. radius: null,
  41. lazyLoad: Boolean,
  42. useErrorSlot: Boolean,
  43. useLoadingSlot: Boolean,
  44. showMenuByLongpress: Boolean,
  45. fit: {
  46. type: String,
  47. value: 'fill',
  48. },
  49. webp: {
  50. type: Boolean,
  51. value: false,
  52. },
  53. showError: {
  54. type: Boolean,
  55. value: true,
  56. },
  57. showLoading: {
  58. type: Boolean,
  59. value: true,
  60. },
  61. },
  62. data: {
  63. error: false,
  64. loading: true,
  65. viewStyle: '',
  66. },
  67. methods: {
  68. onImageLoad: function (event) {
  69. this.setData({
  70. loading: false,
  71. });
  72. this.$emit('load', event.detail);
  73. },
  74. onImageError: function (event) {
  75. this.setData({
  76. loading: false,
  77. error: true,
  78. });
  79. this.$emit('error', event.detail);
  80. },
  81. onClick: function (event) {
  82. this.$emit('click', event.detail);
  83. },
  84. },
  85. });
  86. export default global['__wxComponents']['weapp/lib/image/index']
  87. </script>
  88. <style platform="mp-weixin">
  89. @import '../common/index.css';.van-image{display:inline-block;position:relative}.van-image--round{border-radius:50%;overflow:hidden}.van-image--round .van-image__img{border-radius:inherit}.van-image__error,.van-image__img,.van-image__loading{display:block;height:100%;width:100%}.van-image__error,.van-image__loading{align-items:center;background-color:var(--image-placeholder-background-color,#f7f8fa);color:var(--image-placeholder-text-color,#969799);display:flex;flex-direction:column;font-size:var(--image-placeholder-font-size,14px);justify-content:center;left:0;position:absolute;top:0}.van-image__loading-icon{color:var(--image-loading-icon-color,#dcdee0);font-size:var(--image-loading-icon-size,32px)!important}.van-image__error-icon{color:var(--image-error-icon-color,#dcdee0);font-size:var(--image-error-icon-size,32px)!important}
  90. </style>