u-popup.vue 14 KB

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