picModal.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <template>
  2. <div class='picDia'>
  3. <el-dialog :visible.sync='dialogVisible' width='90%' :close-on-click-modal='false' :show-close='false'>
  4. <!-- <img
  5. src='https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1592807833&di=5adf17cda9f46c37696da5b1d0aec9dc&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg'
  6. alt
  7. />-->
  8. <rotation :size='sizePic' :key='key' :type='3' v-if='rotationImg.length>0' :rotationImg='rotationImg' style='height:100%;width:100%'></rotation>
  9. <span class='close' @click='close'>X</span>
  10. </el-dialog>
  11. </div>
  12. </template>
  13. <script>
  14. export default {
  15. data() {
  16. return {
  17. dialogVisible: false,
  18. mode: 'top',
  19. rotationImg: [],
  20. key: 1,
  21. sizePic: '',
  22. imgInfo: {}
  23. }
  24. },
  25. methods: {
  26. showModal(params) {
  27. this.key++
  28. this.dialogVisible = true
  29. this.rotationImg = params
  30. if (this.rotationImg.length > 0) {
  31. let img = new Image()
  32. img.src = this.rotationImg[0].url
  33. const vm = this
  34. img.onload = function() {
  35. vm.$set(vm.imgInfo, 'width', img.width)
  36. vm.$set(vm.imgInfo, 'height', img.height)
  37. if (vm.imgInfo.width > vm.imgInfo.height) {
  38. vm.sizePic = 'width'
  39. } else {
  40. vm.sizePic = 'height'
  41. }
  42. console.log(vm.sizePic)
  43. }
  44. }
  45. },
  46. close() {
  47. this.dialogVisible = false
  48. }
  49. }
  50. }
  51. </script>
  52. <style lang="less" scoped>
  53. .picDia {
  54. img {
  55. width: 100%;
  56. height: 100%;
  57. }
  58. }
  59. .close {
  60. display: block;
  61. position: absolute;
  62. right: -40px;
  63. font-size: 20px;
  64. color: #fff;
  65. top: -30px;
  66. z-index: 10;
  67. cursor: pointer;
  68. }
  69. </style>
  70. <style lang='less'>
  71. .picDia {
  72. .el-dialog {
  73. height: 88%;
  74. margin-top: 5vh !important;
  75. position: relative;
  76. .el-dialog__header {
  77. padding: 0;
  78. }
  79. .el-dialog__body {
  80. padding: 0;
  81. height: 100%;
  82. }
  83. }
  84. }
  85. </style>