en-image.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <template>
  2. <view>
  3. <view class="row">
  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(index) {
  53. uni.previewImage({
  54. urls: this.previewImage?this.previewImage:this.imgList,
  55. current: index
  56. });
  57. }
  58. }
  59. }
  60. </script>
  61. <style lang="scss" scoped>
  62. .image-item {
  63. display: block;
  64. }
  65. </style>