You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

456 lines
12 KiB

3 years ago
  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>