Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

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