en-image.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <template>
  2. <view>
  3. <view class="row image-box">
  4. <image class="image-item r-10 m-r20 m-b20" :style="[{width},{height}]" :src="item" mode="aspectFill"
  5. v-for="(item,index) in imgList" @click="onPreviewImage(item)"></image>
  6. </view>
  7. </view>
  8. </template>
  9. <script>
  10. export default {
  11. props: {
  12. is_both: {
  13. type: Boolean,
  14. default: false
  15. },
  16. width: {
  17. type: String,
  18. default: '160rpx'
  19. },
  20. height: {
  21. type: String,
  22. default: '90rpx'
  23. },
  24. img: {
  25. default: []
  26. },
  27. previewImage: {
  28. default: []
  29. }
  30. },
  31. data() {
  32. return {
  33. imgList: []
  34. }
  35. },
  36. watch: {
  37. 'img': function() {
  38. this.setImgList()
  39. }
  40. },
  41. mounted() {
  42. this.setImgList()
  43. },
  44. methods: {
  45. setImgList() {
  46. if (typeof this.img === "string") {
  47. this.imgList = [this.img]
  48. } else {
  49. this.imgList = this.img
  50. }
  51. },
  52. onPreviewImage(item) {
  53. console.log(item)
  54. this.$emit('onShowImg',item)
  55. }
  56. }
  57. }
  58. </script>
  59. <style lang="scss" scoped>
  60. .image-box {
  61. flex-wrap: wrap;
  62. }
  63. .image-item {
  64. display: block;
  65. }
  66. </style>