picGrid.vue 968 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <template name="picGrid">
  2. <view class="pics4-view">
  3. <image v-show="loaded" v-for="(v, k) in item.text" :key="k" v-if="v.pic" class="default slide-image" :src="v.pic" mode="aspectFill" @click="Dever.viewPic(item.text, v.pic, 'pic')" @error="onError" @load="onSuccess" styles="height:auto"></image>
  4. <ourLoading v-show="!loaded" active text="加载中..." />
  5. </view>
  6. </template>
  7. <script>
  8. export default {
  9. name: "picGrid",
  10. props: {
  11. control : {
  12. type : Object,
  13. value : null
  14. },
  15. item : {
  16. type : Object,
  17. value : null
  18. },
  19. },
  20. data() {
  21. return {
  22. position: ["tl","tr","bl","br"],
  23. loaded : false
  24. };
  25. },
  26. methods:{
  27. onSuccess : function(e) {
  28. this.loaded = true;
  29. },
  30. onError : function(e) {
  31. this.loaded = false;
  32. },
  33. },
  34. }
  35. </script>
  36. <style>
  37. .pics4-view{
  38. display: flex;
  39. flex-wrap: wrap;
  40. width: 750rpx;
  41. height: 100%;
  42. }
  43. .slide-image {
  44. height: 666rpx;
  45. width: 50%;
  46. display: block;
  47. }
  48. </style>