image-show.vue 777 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <view>
  3. <u-overlay :show="imageShow" @click="imageClose" :opacity="0.9">
  4. <view class="flex warp">
  5. <view class="rect" @tap.stop>
  6. <image :src="imageUrl" mode="scaleToFill"></image>
  7. </view>
  8. </view>
  9. </u-overlay>
  10. </view>
  11. </template>
  12. <script>
  13. export default {
  14. name: "image-show",
  15. props: {
  16. imageShow: {
  17. type: [Boolean],
  18. default: false
  19. },
  20. imageUrl: {
  21. type: [String, Number],
  22. default: ''
  23. }
  24. },
  25. data() {
  26. return {
  27. };
  28. },
  29. methods:{
  30. imageClose(){
  31. console.log('关闭');
  32. this.$emit('close')
  33. },
  34. }
  35. }
  36. </script>
  37. <style lang="scss" scoped>
  38. .warp {
  39. width: 100%;
  40. height: 100%;
  41. }
  42. .rect {
  43. width: 100%;
  44. max-height: 700rpx;
  45. background-color: #fff;
  46. }
  47. image{
  48. width: 100%;
  49. }
  50. </style>