imgShowModal.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template>
  2. <a-modal
  3. centered
  4. class="imgShow-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="预览"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="500">
  11. <div class="imgShow-con">
  12. <img :src="mainContent" alt="图片走丢了" />
  13. </div>
  14. <div class="btn-cont">
  15. <a-button id="imgShow-modal-back" @click="isShow = false">关闭</a-button>
  16. </div>
  17. </a-modal>
  18. </template>
  19. <script>
  20. import { commonMixin } from '@/utils/mixin'
  21. export default {
  22. name: 'ImgShowModal',
  23. mixins: [commonMixin],
  24. props: {
  25. openModal: { // 弹框显示状态
  26. type: Boolean,
  27. default: false
  28. }
  29. },
  30. data () {
  31. return {
  32. isShow: this.openModal, // 是否打开弹框
  33. mainContent: '' // 主要显示内容
  34. }
  35. },
  36. methods: {
  37. // 初始化
  38. pageInit (url) {
  39. this.mainContent = url
  40. }
  41. },
  42. watch: {
  43. // 父页面传过来的弹框状态
  44. openModal (newValue, oldValue) {
  45. this.isShow = newValue
  46. },
  47. // 重定义的弹框状态
  48. isShow (newValue, oldValue) {
  49. if (!newValue) {
  50. this.$emit('close')
  51. }
  52. }
  53. }
  54. }
  55. </script>
  56. <style lang="less" scoped>
  57. .imgShow-modal{
  58. .imgShow-con{
  59. width:90%;
  60. margin:0 auto;
  61. max-height:700px;
  62. overflow-y:scroll;
  63. scrollbar-width: none;
  64. img{
  65. width:100%;
  66. height:auto;
  67. object-fit:cover;
  68. }
  69. }
  70. .btn-cont {
  71. text-align: center;
  72. margin: 30px 0 0px;
  73. }
  74. }
  75. </style>