promotionDescModal.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  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. {{ con }}
  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. methods: {
  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">
  57. .promotionDesc-modal{
  58. .promotionDesc-con{
  59. text-align: center;
  60. }
  61. .btn-cont {
  62. text-align: center;
  63. margin: 50px 0 0px;
  64. }
  65. }
  66. </style>