picModal.vue 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <template>
  2. <div class='picDia'>
  3. <el-dialog :visible.sync='dialogVisible' width='75%' :close-on-click-modal='false' :show-close='false'>
  4. <pic-view-rotation
  5. :picType='picType'
  6. :size='sizePic'
  7. :key='key'
  8. v-if='rotationImg.length>0'
  9. :rotationImg='rotationImg'
  10. style='height:100%;width:100%'
  11. ></pic-view-rotation>
  12. <span class='close' @click='close'>X</span>
  13. </el-dialog>
  14. </div>
  15. </template>
  16. <script>
  17. import PicViewRotation from './picViewRotation'
  18. export default {
  19. data() {
  20. return {
  21. dialogVisible: false,
  22. mode: 'top',
  23. rotationImg: [], //要展示的大图
  24. picType: null, //图片类型 1 区位图 2 鸟瞰图
  25. key: 1,
  26. sizePic: '', //横向||纵向展示 width 横向展示 height 纵向展示
  27. imgInfo: {}, //返回图片信息
  28. }
  29. },
  30. methods: {
  31. showModal(params, type) {
  32. this.key++
  33. this.dialogVisible = true
  34. this.rotationImg = params
  35. this.picType = type
  36. if (this.rotationImg.length > 0) {
  37. let img = new Image()
  38. img.src = this.rotationImg[0].url
  39. const vm = this
  40. img.onload = function () {
  41. vm.$set(vm.imgInfo, 'width', img.width)
  42. vm.$set(vm.imgInfo, 'height', img.height)
  43. if (vm.imgInfo.width > vm.imgInfo.height) {
  44. vm.sizePic = 'width'
  45. } else {
  46. vm.sizePic = 'height'
  47. }
  48. }
  49. }
  50. },
  51. close() {
  52. this.dialogVisible = false
  53. },
  54. },
  55. components: {
  56. PicViewRotation,
  57. },
  58. }
  59. </script>
  60. <style lang="less" scoped>
  61. .picDia {
  62. img {
  63. width: 100%;
  64. height: 100%;
  65. }
  66. }
  67. .close {
  68. display: block;
  69. position: absolute;
  70. right: -40px;
  71. font-size: 20px;
  72. color: #fff;
  73. top: -30px;
  74. z-index: 10;
  75. cursor: pointer;
  76. }
  77. </style>
  78. <style lang='less'>
  79. .picDia {
  80. .el-dialog {
  81. height: 88%;
  82. margin-top: 5vh !important;
  83. position: relative;
  84. .el-dialog__header {
  85. padding: 0;
  86. }
  87. .el-dialog__body {
  88. padding: 0;
  89. height: 100%;
  90. }
  91. }
  92. }
  93. </style>