Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.

u-popup.vue 11 KiB

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