picModal.vue 1.6 KB

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