u-modal.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. <template>
  2. <u-popup
  3. mode="center"
  4. :zoom="zoom"
  5. :show="show"
  6. :customStyle="{
  7. borderRadius: '6px',
  8. overflow: 'hidden',
  9. marginTop: `-${$u.addUnit(negativeTop)}`
  10. }"
  11. :closeOnClickOverlay="closeOnClickOverlay"
  12. :safeAreaInsetBottom="false"
  13. :duration="400"
  14. @click="clickHandler"
  15. >
  16. <view
  17. class="u-modal"
  18. :style="{
  19. width: $u.addUnit(width),
  20. }"
  21. >
  22. <text
  23. class="u-modal__title"
  24. v-if="title"
  25. >{{ title }}</text>
  26. <view
  27. class="u-modal__content"
  28. :style="{
  29. paddingTop: `${title ? 12 : 25}px`
  30. }"
  31. >
  32. <slot>
  33. <text class="u-modal__content__text">{{ content }}</text>
  34. </slot>
  35. </view>
  36. <view
  37. class="u-modal__button-group--confirm-button"
  38. v-if="$slots.confirmButton"
  39. >
  40. <slot name="confirmButton"></slot>
  41. </view>
  42. <template v-else>
  43. <u-line></u-line>
  44. <view
  45. class="u-modal__button-group"
  46. :style="{
  47. flexDirection: buttonReverse ? 'row-reverse' : 'row'
  48. }"
  49. >
  50. <view
  51. class="u-modal__button-group__wrapper u-modal__button-group__wrapper--cancel"
  52. :hover-stay-time="150"
  53. hover-class="u-modal__button-group__wrapper--hover"
  54. :class="[showCancelButton && !showConfirmButton && 'u-modal__button-group__wrapper--only-cancel']"
  55. v-if="showCancelButton"
  56. @tap="cancelHandler"
  57. >
  58. <text
  59. class="u-modal__button-group__wrapper__text"
  60. :style="{
  61. color: cancelColor
  62. }"
  63. >{{ cancelText }}</text>
  64. </view>
  65. <u-line
  66. direction="column"
  67. v-if="showConfirmButton && showCancelButton"
  68. ></u-line>
  69. <view
  70. class="u-modal__button-group__wrapper u-modal__button-group__wrapper--confirm"
  71. :hover-stay-time="150"
  72. hover-class="u-modal__button-group__wrapper--hover"
  73. :class="[!showCancelButton && showConfirmButton && 'u-modal__button-group__wrapper--only-confirm']"
  74. v-if="showConfirmButton"
  75. @tap="confirmHandler"
  76. >
  77. <u-loading-icon v-if="loading"></u-loading-icon>
  78. <text
  79. v-else
  80. class="u-modal__button-group__wrapper__text"
  81. :style="{
  82. color: confirmColor
  83. }"
  84. >{{ confirmText }}</text>
  85. </view>
  86. </view>
  87. </template>
  88. </view>
  89. </u-popup>
  90. </template>
  91. <script>
  92. import props from './props.js';
  93. /**
  94. * Modal 模态框
  95. * @description 弹出模态框,常用于消息提示、消息确认、在当前页面内完成特定的交互操作。
  96. * @tutorial https://www.uviewui.com/components/modul.html
  97. * @property {Boolean} show 是否显示模态框,请赋值给show (默认 false
  98. * @property {String} title 标题内容
  99. * @property {String} content 模态框内容,如传入slot内容,则此参数无效
  100. * @property {String} confirmText 确认按钮的文字 (默认 '确认'
  101. * @property {String} cancelText 取消按钮的文字 (默认 '取消'
  102. * @property {Boolean} showConfirmButton 是否显示确认按钮 (默认 true
  103. * @property {Boolean} showCancelButton 是否显示取消按钮 (默认 false
  104. * @property {String} confirmColor 确认按钮的颜色 (默认 '#2979ff'
  105. * @property {String} cancelColor 取消按钮的颜色 (默认 '#606266'
  106. * @property {Boolean} buttonReverse 对调确认和取消的位置 (默认 false
  107. * @property {Boolean} zoom 是否开启缩放模式 (默认 true
  108. * @property {Boolean} asyncClose 是否异步关闭,只对确定按钮有效,见上方说明 (默认 false
  109. * @property {Boolean} closeOnClickOverlay 是否允许点击遮罩关闭Modal (默认 false
  110. * @property {String | Number} negativeTop 往上偏移的值,给一个负的margin-top,往上偏移,避免和键盘重合的情况,单位任意,数值则默认为px单位 (默认 0 )
  111. * @property {String | Number} width modal宽度,不支持百分比,可以数值,px,rpx单位 (默认 '650rpx'
  112. * @property {String} confirmButtonShape 确认按钮的样式,如设置,将不会显示取消按钮
  113. * @event {Function} confirm 点击确认按钮时触发
  114. * @event {Function} cancel 点击取消按钮时触发
  115. * @event {Function} close 点击遮罩关闭出发,closeOnClickOverlay为true有效
  116. * @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
  117. */
  118. export default {
  119. name: 'u-modal',
  120. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  121. data() {
  122. return {
  123. loading: false
  124. }
  125. },
  126. watch: {
  127. show(n) {
  128. // 为了避免第一次打开modal,又使用了异步关闭的loading
  129. // 第二次打开modal时,loading依然存在的情况
  130. if (n && this.loading) this.loading = false
  131. }
  132. },
  133. methods: {
  134. // 点击确定按钮
  135. confirmHandler() {
  136. // 如果配置了异步关闭,将按钮值为loading状态
  137. if (this.asyncClose) {
  138. this.loading = true;
  139. }
  140. this.$emit('confirm')
  141. },
  142. // 点击取消按钮
  143. cancelHandler() {
  144. this.$emit('cancel')
  145. },
  146. // 点击遮罩
  147. // 从原理上来说,modal的遮罩点击,并不是真的点击到了遮罩
  148. // 因为modal依赖于popup的中部弹窗类型,中部弹窗比较特殊,虽有然遮罩,但是为了让弹窗内容能flex居中
  149. // 多了一个透明的遮罩,此透明的遮罩会覆盖在灰色的遮罩上,所以实际上是点击不到灰色遮罩的,popup内部在
  150. // 透明遮罩的子元素做了.stop处理,所以点击内容区,也不会导致误触发
  151. clickHandler() {
  152. if (this.closeOnClickOverlay) {
  153. this.$emit('close')
  154. }
  155. }
  156. }
  157. }
  158. </script>
  159. <style lang="scss" scoped>
  160. @import "../../libs/css/components.scss";
  161. $u-modal-border-radius: 6px;
  162. .u-modal {
  163. width: 650rpx;
  164. border-radius: $u-modal-border-radius;
  165. overflow: hidden;
  166. &__title {
  167. font-size: 16px;
  168. font-weight: bold;
  169. color: $u-content-color;
  170. text-align: center;
  171. padding-top: 25px;
  172. }
  173. &__content {
  174. padding: 12px 25px 25px 25px;
  175. @include flex;
  176. justify-content: center;
  177. &__text {
  178. font-size: 15px;
  179. color: $u-content-color;
  180. flex: 1;
  181. }
  182. }
  183. &__button-group {
  184. @include flex;
  185. &--confirm-button {
  186. flex-direction: column;
  187. padding: 0px 25px 15px 25px;
  188. }
  189. &__wrapper {
  190. flex: 1;
  191. @include flex;
  192. justify-content: center;
  193. align-items: center;
  194. height: 48px;
  195. &--confirm,
  196. &--only-cancel {
  197. border-bottom-right-radius: $u-modal-border-radius;
  198. }
  199. &--cancel,
  200. &--only-confirm {
  201. border-bottom-left-radius: $u-modal-border-radius;
  202. }
  203. &--hover {
  204. background-color: $u-bg-color;
  205. }
  206. &__text {
  207. color: $u-content-color;
  208. font-size: 16px;
  209. text-align: center;
  210. }
  211. }
  212. }
  213. }
  214. </style>