commonModal.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <template>
  2. <a-modal
  3. centered
  4. class="common-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. v-model="isShow"
  8. :title="modalTit"
  9. :bodyStyle="{padding: modalTit?'25px 32px 20px':'50px 32px 15px'}"
  10. @cancel="isShow=false"
  11. :width="416">
  12. <a-spin :spinning="spinning" tip="Loading...">
  13. <div class="common-main" v-html="modalHtml"></div>
  14. <slot></slot>
  15. <div class="btn-box">
  16. <a-button type="default" class="button-warning" @click="handleCommonCancel" v-if="isCancel">{{ cancelText }}</a-button>
  17. <a-button type="primary" class="button-info" @click="handleCommonOk">{{ okText }}</a-button>
  18. </div>
  19. </a-spin>
  20. </a-modal>
  21. </template>
  22. <script>
  23. export default {
  24. name: 'CommonModal',
  25. props: {
  26. openModal: { // 弹框显示状态
  27. type: Boolean,
  28. default: false
  29. },
  30. modalTit: { // 弹框标题
  31. type: String,
  32. default: null
  33. },
  34. modalHtml: {
  35. type: String,
  36. default: ''
  37. },
  38. okText: { // 确定 按钮文字
  39. type: String,
  40. default: '确定'
  41. },
  42. cancelText: { // 取消 按钮文字
  43. type: String,
  44. default: '取消'
  45. },
  46. isCancel: { // 是否显示 取消 按钮
  47. type: Boolean,
  48. default: true
  49. },
  50. spinning: { // 加载中
  51. type: Boolean,
  52. default: false
  53. }
  54. },
  55. data () {
  56. return {
  57. isShow: this.openModal // 是否打开弹框
  58. }
  59. },
  60. methods: {
  61. // 确定
  62. handleCommonOk () {
  63. this.$emit('ok')
  64. },
  65. // 取消
  66. handleCommonCancel () {
  67. this.$emit('cancel')
  68. this.$emit('close')
  69. }
  70. },
  71. watch: {
  72. // 父页面传过来的弹框状态
  73. openModal (newValue, oldValue) {
  74. this.isShow = newValue
  75. },
  76. // 重定义的弹框状态
  77. isShow (newValue, oldValue) {
  78. if (!newValue) {
  79. this.$emit('close')
  80. }
  81. }
  82. }
  83. }
  84. </script>
  85. <style lang="less">
  86. .common-modal{
  87. .common-main{
  88. display: flex;
  89. line-height: 24px;
  90. .common-cont{
  91. .common-tit{
  92. color: rgba(0, 0, 0);
  93. font-weight: 500;
  94. font-size: 16px;
  95. line-height: 1.4;
  96. margin: 0;
  97. }
  98. .common-txt{
  99. margin: 8px 0 0;
  100. color: rgba(0, 0, 0);
  101. font-size: 14px;
  102. line-height: 1.5;
  103. }
  104. }
  105. }
  106. .btn-box{
  107. text-align: center;
  108. margin-top: 40px;
  109. button{
  110. margin: 0 10px;
  111. }
  112. }
  113. }
  114. </style>