u-modal.vue 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
  1. <template>
  2. <view>
  3. <u-popup :zoom="zoom" mode="center" :popup="false" :z-index="uZIndex" v-model="value" :length="width"
  4. :mask-close-able="maskCloseAble" :border-radius="borderRadius" @close="popupClose" :negative-top="negativeTop">
  5. <view class="u-model">
  6. <view v-if="showTitle" class="u-model__title u-line-1" :style="[titleStyle]">{{ title }}</view>
  7. <view class="u-model__content">
  8. <view :style="[contentStyle]" v-if="$slots.default || $slots.$default">
  9. <slot />
  10. </view>
  11. <view v-else class="u-model__content__message" :style="[contentStyle]">{{ content }}</view>
  12. </view>
  13. <view class="u-model__footer u-border-top" v-if="showCancelButton || showConfirmButton">
  14. <view v-if="showCancelButton" :hover-stay-time="100" hover-class="u-model__btn--hover" class="u-model__footer__button"
  15. :style="[cancelBtnStyle]" @tap="cancel">
  16. {{cancelText}}
  17. </view>
  18. <view v-if="showConfirmButton || $slots['confirm-button']" :hover-stay-time="100" :hover-class="asyncClose ? 'none' : 'u-model__btn--hover'"
  19. class="u-model__footer__button hairline-left" :style="[confirmBtnStyle]" @tap="confirm">
  20. <slot v-if="$slots['confirm-button']" name="confirm-button"></slot>
  21. <block v-else>
  22. <u-loading mode="circle" :color="confirmColor" v-if="loading"></u-loading>
  23. <block v-else>
  24. {{confirmText}}
  25. </block>
  26. </block>
  27. </view>
  28. </view>
  29. </view>
  30. </u-popup>
  31. </view>
  32. </template>
  33. <script>
  34. /**
  35. * modal 模态框
  36. * @description 弹出模态框,常用于消息提示、消息确认、在当前页面内完成特定的交互操作
  37. * @tutorial https://www.uviewui.com/components/modal.html
  38. * @property {Boolean} value 是否显示模态框
  39. * @property {String | Number} z-index 层级
  40. * @property {String} title 模态框标题(默认"提示")
  41. * @property {String | Number} width 模态框宽度(默认600)
  42. * @property {String} content 模态框内容(默认"内容")
  43. * @property {Boolean} show-title 是否显示标题(默认true)
  44. * @property {Boolean} async-close 是否异步关闭,只对确定按钮有效(默认false)
  45. * @property {Boolean} show-confirm-button 是否显示确认按钮(默认true)
  46. * @property {Stringr | Number} negative-top modal往上偏移的值
  47. * @property {Boolean} show-cancel-button 是否显示取消按钮(默认false)
  48. * @property {Boolean} mask-close-able 是否允许点击遮罩关闭modal(默认false)
  49. * @property {String} confirm-text 确认按钮的文字内容(默认"确认")
  50. * @property {String} cancel-text 取消按钮的文字内容(默认"取消")
  51. * @property {String} cancel-color 取消按钮的颜色(默认"#606266")
  52. * @property {String} confirm-color 确认按钮的文字内容(默认"#2979ff")
  53. * @property {String | Number} border-radius 模态框圆角值,单位rpx(默认16)
  54. * @property {Object} title-style 自定义标题样式,对象形式
  55. * @property {Object} content-style 自定义内容样式,对象形式
  56. * @property {Object} cancel-style 自定义取消按钮样式,对象形式
  57. * @property {Object} confirm-style 自定义确认按钮样式,对象形式
  58. * @property {Boolean} zoom 是否开启缩放模式(默认true)
  59. * @event {Function} confirm 确认按钮被点击
  60. * @event {Function} cancel 取消按钮被点击
  61. * @example <u-modal :src="title" :content="content"></u-modal>
  62. */
  63. export default {
  64. name: 'u-modal',
  65. props: {
  66. // 是否显示Modal
  67. value: {
  68. type: Boolean,
  69. default: false
  70. },
  71. // 层级z-index
  72. zIndex: {
  73. type: [Number, String],
  74. default: ''
  75. },
  76. // 标题
  77. title: {
  78. type: [String],
  79. default: '提示'
  80. },
  81. // 弹窗宽度,可以是数值(rpx),百分比,auto等
  82. width: {
  83. type: [Number, String],
  84. default: 600
  85. },
  86. // 弹窗内容
  87. content: {
  88. type: String,
  89. default: '内容'
  90. },
  91. // 是否显示标题
  92. showTitle: {
  93. type: Boolean,
  94. default: true
  95. },
  96. // 是否显示确认按钮
  97. showConfirmButton: {
  98. type: Boolean,
  99. default: true
  100. },
  101. // 是否显示取消按钮
  102. showCancelButton: {
  103. type: Boolean,
  104. default: false
  105. },
  106. // 确认文案
  107. confirmText: {
  108. type: String,
  109. default: '确认'
  110. },
  111. // 取消文案
  112. cancelText: {
  113. type: String,
  114. default: '取消'
  115. },
  116. // 确认按钮颜色
  117. confirmColor: {
  118. type: String,
  119. default: '#2979ff'
  120. },
  121. // 取消文字颜色
  122. cancelColor: {
  123. type: String,
  124. default: '#606266'
  125. },
  126. // 圆角值
  127. borderRadius: {
  128. type: [Number, String],
  129. default: 16
  130. },
  131. // 标题的样式
  132. titleStyle: {
  133. type: Object,
  134. default () {
  135. return {}
  136. }
  137. },
  138. // 内容的样式
  139. contentStyle: {
  140. type: Object,
  141. default () {
  142. return {}
  143. }
  144. },
  145. // 取消按钮的样式
  146. cancelStyle: {
  147. type: Object,
  148. default () {
  149. return {}
  150. }
  151. },
  152. // 确定按钮的样式
  153. confirmStyle: {
  154. type: Object,
  155. default () {
  156. return {}
  157. }
  158. },
  159. // 是否开启缩放效果
  160. zoom: {
  161. type: Boolean,
  162. default: true
  163. },
  164. // 是否异步关闭,只对确定按钮有效
  165. asyncClose: {
  166. type: Boolean,
  167. default: false
  168. },
  169. // 是否允许点击遮罩关闭modal
  170. maskCloseAble: {
  171. type: Boolean,
  172. default: false
  173. },
  174. // 给一个负的margin-top,往上偏移,避免和键盘重合的情况
  175. negativeTop: {
  176. type: [String, Number],
  177. default: 0
  178. }
  179. },
  180. data() {
  181. return {
  182. loading: false, // 确认按钮是否正在加载中
  183. }
  184. },
  185. computed: {
  186. cancelBtnStyle() {
  187. return Object.assign({
  188. color: this.cancelColor
  189. }, this.cancelStyle);
  190. },
  191. confirmBtnStyle() {
  192. return Object.assign({
  193. color: this.confirmColor
  194. }, this.confirmStyle);
  195. },
  196. uZIndex() {
  197. return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
  198. }
  199. },
  200. watch: {
  201. // 如果是异步关闭时,外部修改v-model的值为false时,重置内部的loading状态
  202. // 避免下次打开的时候,状态混乱
  203. value(n) {
  204. if (n === true) this.loading = false;
  205. }
  206. },
  207. methods: {
  208. confirm() {
  209. // 异步关闭
  210. if (this.asyncClose) {
  211. this.loading = true;
  212. } else {
  213. this.$emit('input', false);
  214. }
  215. this.$emit('confirm');
  216. },
  217. cancel() {
  218. this.$emit('cancel');
  219. this.$emit('input', false);
  220. // 目前popup弹窗关闭有一个延时操作,此处做一个延时
  221. // 避免确认按钮文字变成了"确定"字样,modal还没消失,造成视觉不好的效果
  222. setTimeout(() => {
  223. this.loading = false;
  224. }, 300);
  225. },
  226. // 点击遮罩关闭modal,设置v-model的值为false,否则无法第二次弹起modal
  227. popupClose() {
  228. this.$emit('input', false);
  229. },
  230. // 清除加载中的状态
  231. clearLoading() {
  232. this.loading = false;
  233. }
  234. }
  235. };
  236. </script>
  237. <style lang="scss" scoped>
  238. @import "../../libs/css/style.components.scss";
  239. .u-model {
  240. height: auto;
  241. overflow: hidden;
  242. font-size: 32rpx;
  243. background-color: #fff;
  244. &__btn--hover {
  245. background-color: rgb(230, 230, 230);
  246. }
  247. &__title {
  248. padding-top: 48rpx;
  249. font-weight: 500;
  250. text-align: center;
  251. color: $u-main-color;
  252. }
  253. &__content {
  254. &__message {
  255. padding: 48rpx;
  256. font-size: 30rpx;
  257. text-align: center;
  258. color: $u-content-color;
  259. }
  260. }
  261. &__footer {
  262. @include vue-flex;
  263. &__button {
  264. flex: 1;
  265. height: 100rpx;
  266. line-height: 100rpx;
  267. font-size: 32rpx;
  268. box-sizing: border-box;
  269. cursor: pointer;
  270. text-align: center;
  271. border-radius: 4rpx;
  272. }
  273. }
  274. }
  275. </style>