picModal.vue 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  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 :type='1' 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. }
  21. },
  22. methods: {
  23. showModal(params) {
  24. this.dialogVisible = true
  25. this.rotationImg = params
  26. },
  27. close() {
  28. this.dialogVisible = false
  29. }
  30. }
  31. }
  32. </script>
  33. <style lang="less" scoped>
  34. .picDia {
  35. img {
  36. width: 100%;
  37. height: 100%;
  38. }
  39. }
  40. .close {
  41. display: block;
  42. position: absolute;
  43. right: -40px;
  44. font-size: 20px;
  45. color: #fff;
  46. top: -30px;
  47. z-index: 10;
  48. cursor: pointer;
  49. }
  50. </style>
  51. <style lang='less'>
  52. .picDia {
  53. .el-dialog {
  54. height: 88%;
  55. margin-top: 5vh !important;
  56. position: relative;
  57. .el-dialog__header {
  58. padding: 0;
  59. }
  60. .el-dialog__body {
  61. padding: 0;
  62. height: 100%;
  63. }
  64. }
  65. }
  66. </style>