u-popup.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456
  1. <template>
  2. <view v-if="visibleSync" :style="[customStyle, {
  3. zIndex: uZindex - 1
  4. }]" class="u-drawer" hover-stop-propagation>
  5. <u-mask :duration="duration" :custom-style="maskCustomStyle" :maskClickAble="maskCloseAble" :z-index="uZindex - 2" :show="showDrawer && mask" @click="maskClick"></u-mask>
  6. <view
  7. class="u-drawer-content"
  8. @tap="modeCenterClose(mode)"
  9. :class="[
  10. safeAreaInsetBottom ? 'safe-area-inset-bottom' : '',
  11. 'u-drawer-' + mode,
  12. showDrawer ? 'u-drawer-content-visible' : '',
  13. zoom && mode == 'center' ? 'u-animation-zoom' : ''
  14. ]"
  15. @touchmove.stop.prevent
  16. @tap.stop.prevent
  17. :style="[style]"
  18. >
  19. <view class="u-mode-center-box" @tap.stop.prevent @touchmove.stop.prevent v-if="mode == 'center'" :style="[centerStyle]">
  20. <u-icon
  21. @click="close"
  22. v-if="closeable"
  23. class="u-close"
  24. :class="['u-close--' + closeIconPos]"
  25. :name="closeIcon"
  26. :color="closeIconColor"
  27. :size="closeIconSize"
  28. ></u-icon>
  29. <scroll-view class="u-drawer__scroll-view" scroll-y="true">
  30. <slot />
  31. </scroll-view>
  32. </view>
  33. <scroll-view class="u-drawer__scroll-view" scroll-y="true" v-else>
  34. <slot />
  35. </scroll-view>
  36. <view @tap="close" class="u-close" :class="['u-close--' + closeIconPos]">
  37. <u-icon
  38. v-if="mode != 'center' && closeable"
  39. :name="closeIcon"
  40. :color="closeIconColor"
  41. :size="closeIconSize"
  42. ></u-icon>
  43. </view>
  44. </view>
  45. </view>
  46. </template>
  47. <script>
  48. /**
  49. * popup 弹窗
  50. * @description 弹出层容器,用于展示弹窗、信息提示等内容,支持上、下、左、右和中部弹出。组件只提供容器,内部内容由用户自定义
  51. * @tutorial https://www.uviewui.com/components/popup.html
  52. * @property {String} mode 弹出方向(默认left)
  53. * @property {Boolean} mask 是否显示遮罩(默认true)
  54. * @property {Stringr | Number} length mode=left | 见官网说明(默认auto)
  55. * @property {Boolean} zoom 是否开启缩放动画,只在mode为center时有效(默认true)
  56. * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
  57. * @property {Boolean} mask-close-able 点击遮罩是否可以关闭弹出层(默认true)
  58. * @property {Object} custom-style 用户自定义样式
  59. * @property {Stringr | Number} negative-top 中部弹出时,往上偏移的值
  60. * @property {Numberr | String} border-radius 弹窗圆角值(默认0)
  61. * @property {Numberr | String} z-index 弹出内容的z-index值(默认1075)
  62. * @property {Boolean} closeable 是否显示关闭图标(默认false)
  63. * @property {String} close-icon 关闭图标的名称,只能uView的内置图标
  64. * @property {String} close-icon-pos 自定义关闭图标位置(默认top-right)
  65. * @property {String} close-icon-color 关闭图标的颜色(默认#909399)
  66. * @property {Number | String} close-icon-size 关闭图标的大小,单位rpx(默认30)
  67. * @event {Function} open 弹出层打开
  68. * @event {Function} close 弹出层收起
  69. * @example <u-popup v-model="show"><view>出淤泥而不染,濯清涟而不妖</view></u-popup>
  70. */
  71. export default {
  72. name: 'u-popup',
  73. props: {
  74. /**
  75. * 显示状态
  76. */
  77. show: {
  78. type: Boolean,
  79. default: false
  80. },
  81. /**
  82. * 弹出方向,left|right|top|bottom|center
  83. */
  84. mode: {
  85. type: String,
  86. default: 'left'
  87. },
  88. /**
  89. * 是否显示遮罩
  90. */
  91. mask: {
  92. type: Boolean,
  93. default: true
  94. },
  95. // 抽屉的宽度(mode=left|right),或者高度(mode=top|bottom),单位rpx,或者"auto"
  96. // 或者百分比"50%",表示由内容撑开高度或者宽度
  97. length: {
  98. type: [Number, String],
  99. default: 'auto'
  100. },
  101. // 是否开启缩放动画,只在mode=center时有效
  102. zoom: {
  103. type: Boolean,
  104. default: true
  105. },
  106. // 是否开启底部安全区适配,开启的话,会在iPhoneX机型底部添加一定的内边距
  107. safeAreaInsetBottom: {
  108. type: Boolean,
  109. default: false
  110. },
  111. // 是否可以通过点击遮罩进行关闭
  112. maskCloseAble: {
  113. type: Boolean,
  114. default: true
  115. },
  116. // 用户自定义样式
  117. customStyle: {
  118. type: Object,
  119. default() {
  120. return {};
  121. }
  122. },
  123. value: {
  124. type: Boolean,
  125. default: false
  126. },
  127. // 此为内部参数,不在文档对外使用,为了解决Picker和keyboard等融合了弹窗的组件
  128. // 对v-model双向绑定多层调用造成报错不能修改props值的问题
  129. popup: {
  130. type: Boolean,
  131. default: true
  132. },
  133. // 显示显示弹窗的圆角,单位rpx
  134. borderRadius: {
  135. type: [Number, String],
  136. default: 0
  137. },
  138. zIndex: {
  139. type: [Number, String],
  140. default: ''
  141. },
  142. // 是否显示关闭图标
  143. closeable: {
  144. type: Boolean,
  145. default: false
  146. },
  147. // 关闭图标的名称,只能uView的内置图标
  148. closeIcon: {
  149. type: String,
  150. default: 'close'
  151. },
  152. // 自定义关闭图标位置,top-left为左上角,top-right为右上角,bottom-left为左下角,bottom-right为右下角
  153. closeIconPos: {
  154. type: String,
  155. default: 'top-right'
  156. },
  157. // 关闭图标的颜色
  158. closeIconColor: {
  159. type: String,
  160. default: '#909399'
  161. },
  162. // 关闭图标的大小,单位rpx
  163. closeIconSize: {
  164. type: [String, Number],
  165. default: '30'
  166. },
  167. // 宽度,只对左,右,中部弹出时起作用,单位rpx,或者"auto"
  168. // 或者百分比"50%",表示由内容撑开高度或者宽度,优先级高于length参数
  169. width: {
  170. type: String,
  171. default: ''
  172. },
  173. // 高度,只对上,下,中部弹出时起作用,单位rpx,或者"auto"
  174. // 或者百分比"50%",表示由内容撑开高度或者宽度,优先级高于length参数
  175. height: {
  176. type: String,
  177. default: ''
  178. },
  179. // 给一个负的margin-top,往上偏移,避免和键盘重合的情况,仅在mode=center时有效
  180. negativeTop: {
  181. type: [String, Number],
  182. default: 0
  183. },
  184. // 遮罩的样式,一般用于修改遮罩的透明度
  185. maskCustomStyle: {
  186. type: Object,
  187. default() {
  188. return {}
  189. }
  190. },
  191. // 遮罩打开或收起的动画过渡时间,单位ms
  192. duration: {
  193. type: [String, Number],
  194. default: 250
  195. }
  196. },
  197. data() {
  198. return {
  199. visibleSync: false,
  200. showDrawer: false,
  201. timer: null,
  202. closeFromInner: false, // value的值改变,是发生在内部还是外部
  203. };
  204. },
  205. computed: {
  206. // 根据mode的位置,设定其弹窗的宽度(mode = left|right),或者高度(mode = top|bottom)
  207. style() {
  208. let style = {};
  209. // 如果是左边或者上边弹出时,需要给translate设置为负值,用于隐藏
  210. if (this.mode == 'left' || this.mode == 'right') {
  211. style = {
  212. width: this.width ? this.getUnitValue(this.width) : this.getUnitValue(this.length),
  213. height: '100%',
  214. transform: `translate3D(${this.mode == 'left' ? '-100%' : '100%'},0px,0px)`
  215. };
  216. } else if (this.mode == 'top' || this.mode == 'bottom') {
  217. style = {
  218. width: '100%',
  219. height: this.height ? this.getUnitValue(this.height) : this.getUnitValue(this.length),
  220. transform: `translate3D(0px,${this.mode == 'top' ? '-100%' : '100%'},0px)`
  221. };
  222. }
  223. style.zIndex = this.uZindex;
  224. // 如果用户设置了borderRadius值,添加弹窗的圆角
  225. if (this.borderRadius) {
  226. switch (this.mode) {
  227. case 'left':
  228. style.borderRadius = `0 ${this.borderRadius}rpx ${this.borderRadius}rpx 0`;
  229. break;
  230. case 'top':
  231. style.borderRadius = `0 0 ${this.borderRadius}rpx ${this.borderRadius}rpx`;
  232. break;
  233. case 'right':
  234. style.borderRadius = `${this.borderRadius}rpx 0 0 ${this.borderRadius}rpx`;
  235. break;
  236. case 'bottom':
  237. style.borderRadius = `${this.borderRadius}rpx ${this.borderRadius}rpx 0 0`;
  238. break;
  239. default:
  240. }
  241. // 不加可能圆角无效
  242. style.overflow = 'hidden';
  243. }
  244. if(this.duration) style.transition = `all ${this.duration / 1000}s linear`;
  245. return style;
  246. },
  247. // 中部弹窗的特有样式
  248. centerStyle() {
  249. let style = {};
  250. style.width = this.width ? this.getUnitValue(this.width) : this.getUnitValue(this.length);
  251. // 中部弹出的模式,如果没有设置高度,就用auto值,由内容撑开高度
  252. style.height = this.height ? this.getUnitValue(this.height) : 'auto';
  253. style.zIndex = this.uZindex;
  254. style.marginTop = `-${this.$u.addUnit(this.negativeTop)}`;
  255. if (this.borderRadius) {
  256. style.borderRadius = `${this.borderRadius}rpx`;
  257. // 不加可能圆角无效
  258. style.overflow = 'hidden';
  259. }
  260. return style;
  261. },
  262. // 计算整理后的z-index值
  263. uZindex() {
  264. return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
  265. }
  266. },
  267. watch: {
  268. value(val) {
  269. if (val) {
  270. this.open();
  271. } else if(!this.closeFromInner) {
  272. this.close();
  273. }
  274. this.closeFromInner = false;
  275. }
  276. },
  277. mounted() {
  278. // 组件渲染完成时,检查value是否为true,如果是,弹出popup
  279. this.value && this.open();
  280. },
  281. methods: {
  282. // 判断传入的值,是否带有单位,如果没有,就默认用rpx单位
  283. getUnitValue(val) {
  284. if(/(%|px|rpx|auto)$/.test(val)) return val;
  285. else return val + 'rpx'
  286. },
  287. // 遮罩被点击
  288. maskClick() {
  289. this.close();
  290. },
  291. close() {
  292. // 标记关闭是内部发生的,否则修改了value值,导致watch中对value检测,导致再执行一遍close
  293. // 造成@close事件触发两次
  294. this.closeFromInner = true;
  295. this.change('showDrawer', 'visibleSync', false);
  296. },
  297. // 中部弹出时,需要.u-drawer-content将居中内容,此元素会铺满屏幕,点击需要关闭弹窗
  298. // 让其只在mode=center时起作用
  299. modeCenterClose(mode) {
  300. if (mode != 'center' || !this.maskCloseAble) return;
  301. this.close();
  302. },
  303. open() {
  304. this.change('visibleSync', 'showDrawer', true);
  305. },
  306. // 此处的原理是,关闭时先通过动画隐藏弹窗和遮罩,再移除整个组件
  307. // 打开时,先渲染组件,延时一定时间再让遮罩和弹窗的动画起作用
  308. change(param1, param2, status) {
  309. // 如果this.popup为false,意味着为picker,actionsheet等组件调用了popup组件
  310. if (this.popup == true) {
  311. this.$emit('input', status);
  312. }
  313. this[param1] = status;
  314. if(status) {
  315. // #ifdef H5 || MP
  316. this.timer = setTimeout(() => {
  317. this[param2] = status;
  318. this.$emit(status ? 'open' : 'close');
  319. }, 50);
  320. // #endif
  321. // #ifndef H5 || MP
  322. this.$nextTick(() => {
  323. this[param2] = status;
  324. this.$emit(status ? 'open' : 'close');
  325. })
  326. // #endif
  327. } else {
  328. this.timer = setTimeout(() => {
  329. this[param2] = status;
  330. this.$emit(status ? 'open' : 'close');
  331. }, this.duration);
  332. }
  333. }
  334. }
  335. };
  336. </script>
  337. <style scoped lang="scss">
  338. @import "../../libs/css/style.components.scss";
  339. .u-drawer {
  340. /* #ifndef APP-NVUE */
  341. display: block;
  342. /* #endif */
  343. position: fixed;
  344. top: 0;
  345. left: 0;
  346. right: 0;
  347. bottom: 0;
  348. overflow: hidden;
  349. }
  350. .u-drawer-content {
  351. /* #ifndef APP-NVUE */
  352. display: block;
  353. /* #endif */
  354. position: absolute;
  355. z-index: 1003;
  356. transition: all 0.25s linear;
  357. }
  358. .u-drawer__scroll-view {
  359. width: 100%;
  360. height: 100%;
  361. }
  362. .u-drawer-left {
  363. top: 0;
  364. bottom: 0;
  365. left: 0;
  366. background-color: #ffffff;
  367. }
  368. .u-drawer-right {
  369. right: 0;
  370. top: 0;
  371. bottom: 0;
  372. background-color: #ffffff;
  373. }
  374. .u-drawer-top {
  375. top: 0;
  376. left: 0;
  377. right: 0;
  378. background-color: #ffffff;
  379. }
  380. .u-drawer-bottom {
  381. bottom: 0;
  382. left: 0;
  383. right: 0;
  384. background-color: #ffffff;
  385. }
  386. .u-drawer-center {
  387. @include vue-flex;
  388. flex-direction: column;
  389. bottom: 0;
  390. left: 0;
  391. right: 0;
  392. top: 0;
  393. justify-content: center;
  394. align-items: center;
  395. opacity: 0;
  396. z-index: 99999;
  397. }
  398. .u-mode-center-box {
  399. min-width: 100rpx;
  400. min-height: 100rpx;
  401. /* #ifndef APP-NVUE */
  402. display: block;
  403. /* #endif */
  404. position: relative;
  405. background-color: #ffffff;
  406. }
  407. .u-drawer-content-visible.u-drawer-center {
  408. transform: scale(1);
  409. opacity: 1;
  410. }
  411. .u-animation-zoom {
  412. transform: scale(1.15);
  413. }
  414. .u-drawer-content-visible {
  415. transform: translate3D(0px, 0px, 0px) !important;
  416. }
  417. .u-close {
  418. position: absolute;
  419. z-index: 3;
  420. }
  421. .u-close--top-left {
  422. top: 30rpx;
  423. left: 30rpx;
  424. }
  425. .u-close--top-right {
  426. top: 30rpx;
  427. right: 30rpx;
  428. }
  429. .u-close--bottom-left {
  430. bottom: 30rpx;
  431. left: 30rpx;
  432. }
  433. .u-close--bottom-right {
  434. right: 30rpx;
  435. bottom: 30rpx;
  436. }
  437. </style>