app-img.vue 883 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <template>
  2. <block>
  3. <!-- #ifdef H5 -->
  4. <img class="app-img" v-lazy="src" :alt="alt" :title="title" :mode="mode" />
  5. <!-- #endif -->
  6. <!-- #ifndef H5 -->
  7. <image class="app-img" :src="src" :alt="alt" :title="title" :lazy-load="true" :mode="mode" :style="{height: height + 'rpx'}" ></image>
  8. <!-- #endif -->
  9. </block>
  10. </template>
  11. <script>
  12. import Vue from 'vue'
  13. import VueLazyload from 'vue-lazyload'
  14. Vue.use(VueLazyload)
  15. export default {
  16. name: 'app-img',
  17. props: {
  18. src: {
  19. type: String,
  20. default: ''
  21. },
  22. alt: {
  23. type: String,
  24. default: ''
  25. },
  26. title: {
  27. type: String,
  28. default: ''
  29. },
  30. // #ifdef H5
  31. mode: {
  32. type: String,
  33. default: 'scaleToFill'
  34. },
  35. // #endif
  36. // #ifndef H5
  37. mode: {
  38. type: String,
  39. default: 'widthFix'
  40. },
  41. // #endif
  42. height: {
  43. type: Number,
  44. default: 346
  45. }
  46. }
  47. }
  48. </script>
  49. <style lang="scss" scoped>
  50. </style>