commonModal.vue 2.3 KB

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