commonModal.vue 2.3 KB

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