img-two.vue 966 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <template>
  2. <view class="img-box">
  3. <view class="img-item" v-for="(fileItem,fileIndex) in fileList">
  4. <image @click.stop="previewImage(fileIndex)" :src="fileItem" mode="aspectFill"></image>
  5. </view>
  6. </view>
  7. </template>
  8. <script>
  9. export default {
  10. name: "img-two",
  11. components: {},
  12. props: {
  13. fileList:{
  14. default:[]
  15. }
  16. },
  17. data() {
  18. return {}
  19. },
  20. watch: {},
  21. mounted() {
  22. },
  23. methods: {
  24. previewImage(index){
  25. uni.previewImage({
  26. urls: this.fileList,
  27. current:index
  28. });
  29. }
  30. }
  31. }
  32. </script>
  33. <style scoped lang="scss">
  34. .img-box{
  35. height: auto;
  36. display: flex;
  37. flex-wrap: wrap;
  38. .img-item{
  39. display: inline-block;
  40. margin-right:12rpx;
  41. image{
  42. width: calc((100vw - 200rpx)/2);
  43. height: calc((100vw - 200rpx)/2);
  44. border-radius: 16rpx;
  45. }
  46. }
  47. .img-item:nth-of-type(even){
  48. margin-right:0;
  49. }
  50. .img-item:nth-of-type(n+3){
  51. margin-top:10rpx;
  52. }
  53. }
  54. </style>