promotionDescModal.vue 1.5 KB

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