commonModal.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. <template>
  2. <u-mask class="commonModal" :show="isShow" :mask-click-able="false" z-index="999998">
  3. <view class="modal-con">
  4. <u-icon v-if="isClose" @click="isShow=false" class="close-icon" name="close-circle" size="40" color="#999"></u-icon>
  5. <view class="modal-title" v-if="showTitle">{{title}}</view>
  6. <view class="modal-main">
  7. {{content}}
  8. <slot></slot>
  9. </view>
  10. <view class="modal-footer">
  11. <view class="button-cancel" v-if="isCancel" @click="handleCancel">{{cancelText}}</view>
  12. <view class="button-confirm" @click="handleConfirm">{{confirmText}}</view>
  13. </view>
  14. </view>
  15. </u-mask>
  16. </template>
  17. <script>
  18. export default {
  19. props: {
  20. openModal: { // 弹框显示状态
  21. type: Boolean,
  22. default: false
  23. },
  24. title: { // 标题
  25. type: String,
  26. default: '提示'
  27. },
  28. content: { // 内容
  29. type: String,
  30. default: ''
  31. },
  32. isCancel: { // 是否有取消按钮
  33. type: Boolean,
  34. default: true
  35. },
  36. isClose: { // 是否有关闭按钮
  37. type: Boolean,
  38. default: false
  39. },
  40. confirmText: { // 确认按钮内容
  41. type: String,
  42. default: '确认'
  43. },
  44. cancelText: { // 取消按钮内容
  45. type: String,
  46. default: '取消'
  47. },
  48. showTitle:{ // 是否显示标题
  49. type: Boolean,
  50. default: true
  51. },
  52. },
  53. data() {
  54. return {
  55. isShow: this.openModal, // 是否打开弹框
  56. }
  57. },
  58. methods: {
  59. // 确认
  60. handleConfirm(){
  61. this.$emit('confirm')
  62. },
  63. // 取消
  64. handleCancel(){
  65. this.isShow = false
  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="scss">
  84. .commonModal{
  85. width: 100%;
  86. height: 100vh;
  87. z-index: 10000;
  88. display: flex;
  89. flex-direction: column;
  90. align-items: center;
  91. justify-content: center;
  92. .modal-con{
  93. width: 70%;
  94. background-color: #fff;
  95. border-radius: 24upx;
  96. position: relative;
  97. .close-icon{
  98. position: absolute;
  99. right: 6upx;
  100. top: 6upx;
  101. }
  102. .modal-title{
  103. text-align: center;
  104. font-size: 30upx;
  105. color: #000;
  106. padding: 30upx 30upx 0;
  107. }
  108. .modal-main{
  109. text-align: center;
  110. font-size: 28upx;
  111. color: #222;
  112. line-height: 1.5em;
  113. padding: 30upx 30upx 40upx;
  114. }
  115. .modal-footer{
  116. font-size: 30upx;
  117. display: flex;
  118. justify-content: space-between;
  119. align-items: center;
  120. text-align: center;
  121. border-top: 1upx solid #E5E5E5;
  122. .button-cancel{
  123. color: #999;
  124. border-right: 1upx solid #E5E5E5;
  125. flex-grow: 1;
  126. padding: 20upx 0;
  127. width: 50%;
  128. }
  129. .button-confirm{
  130. color: #2A86F4;
  131. flex-grow: 1;
  132. padding: 20upx 0;
  133. width: 50%;
  134. }
  135. }
  136. }
  137. }
  138. </style>