PicComp.vue 662 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <template>
  2. <view class="pic-comp-container">
  3. <image
  4. class="pic-comp-image"
  5. :src="src"
  6. mode="aspectFill"
  7. @click="handleClick"
  8. />
  9. </view>
  10. </template>
  11. <script>
  12. export default {
  13. name: 'PicComp',
  14. props: {
  15. src: {
  16. type: String,
  17. default: ''
  18. }
  19. },
  20. methods: {
  21. handleClick() {
  22. this.$emit('needPreviewPic', this.src)
  23. }
  24. }
  25. }
  26. </script>
  27. <style scoped lang="scss">
  28. .pic-comp-container {
  29. width: 100%;
  30. height: 100%;
  31. box-sizing: border-box;
  32. overflow: hidden;
  33. border-radius: 30rpx;
  34. }
  35. .pic-comp-image {
  36. width: 100% !important;
  37. height: 100% !important;
  38. object-fit: cover;
  39. }
  40. </style>