uni-drawer.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. <template>
  2. <view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear">
  3. <view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" />
  4. <view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}" :style="{width:drawerWidth+'px'}">
  5. <slot />
  6. </view>
  7. </view>
  8. </template>
  9. <script>
  10. /**
  11. * Drawer 抽屉
  12. * @description 抽屉侧滑菜单
  13. * @tutorial https://ext.dcloud.net.cn/plugin?id=26
  14. * @property {Boolean} mask = [true | false] 是否显示遮罩
  15. * @property {Boolean} maskClick = [true | false] 点击遮罩是否关闭
  16. * @property {Boolean} mode = [left | right] Drawer 滑出位置
  17. * @value left 从左侧滑出
  18. * @value right 从右侧侧滑出
  19. * @property {Number} width 抽屉的宽度 ,仅 vue 页面生效
  20. * @event {Function} close 组件关闭时触发事件
  21. */
  22. export default {
  23. name: 'UniDrawer',
  24. props: {
  25. /**
  26. * 显示模式(左、右),只在初始化生效
  27. */
  28. mode: {
  29. type: String,
  30. default: ''
  31. },
  32. /**
  33. * 蒙层显示状态
  34. */
  35. mask: {
  36. type: Boolean,
  37. default: true
  38. },
  39. /**
  40. * 遮罩是否可点击关闭
  41. */
  42. maskClick: {
  43. type: Boolean,
  44. default: true
  45. },
  46. /**
  47. * 抽屉宽度
  48. */
  49. width: {
  50. type: Number,
  51. default: 220
  52. }
  53. },
  54. data() {
  55. return {
  56. visibleSync: false,
  57. showDrawer: false,
  58. rightMode: false,
  59. watchTimer: null,
  60. drawerWidth: 220
  61. }
  62. },
  63. created() {
  64. // #ifndef APP-NVUE
  65. this.drawerWidth = this.width
  66. // #endif
  67. this.rightMode = this.mode === 'right'
  68. },
  69. methods: {
  70. clear() {},
  71. close(type) {
  72. // fixed by mehaotian 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑
  73. if ((type === 'mask' && !this.maskClick) || !this.visibleSync) return
  74. this._change('showDrawer', 'visibleSync', false)
  75. },
  76. open() {
  77. // fixed by mehaotian 处理重复点击打开的事件
  78. if (this.visibleSync) return
  79. this._change('visibleSync', 'showDrawer', true)
  80. },
  81. _change(param1, param2, status) {
  82. this[param1] = status
  83. if (this.watchTimer) {
  84. clearTimeout(this.watchTimer)
  85. }
  86. this.watchTimer = setTimeout(() => {
  87. this[param2] = status
  88. this.$emit('change', status)
  89. }, status ? 50 : 300)
  90. }
  91. }
  92. }
  93. </script>
  94. <style scoped>
  95. .uni-drawer {
  96. /* #ifndef APP-NVUE */
  97. display: block;
  98. /* #endif */
  99. position: fixed;
  100. top: 0;
  101. left: 0;
  102. right: 0;
  103. bottom: 0;
  104. overflow: hidden;
  105. z-index: 999;
  106. }
  107. .uni-drawer__content {
  108. /* #ifndef APP-NVUE */
  109. display: block;
  110. /* #endif */
  111. position: absolute;
  112. top: 0;
  113. width: 220px;
  114. bottom: 0;
  115. background-color: #ffffff;
  116. transition: transform 0.3s ease;
  117. }
  118. .uni-drawer--left {
  119. left: 0;
  120. /* #ifdef APP-NVUE */
  121. transform: translateX(-220px);
  122. /* #endif */
  123. /* #ifndef APP-NVUE */
  124. transform: translateX(-100%);
  125. /* #endif */
  126. }
  127. .uni-drawer--right {
  128. right: 0;
  129. /* #ifdef APP-NVUE */
  130. transform: translateX(220px);
  131. /* #endif */
  132. /* #ifndef APP-NVUE */
  133. transform: translateX(100%);
  134. /* #endif */
  135. }
  136. .uni-drawer__content--visible {
  137. transform: translateX(0px);
  138. }
  139. .uni-drawer__mask {
  140. /* #ifndef APP-NVUE */
  141. display: block;
  142. /* #endif */
  143. opacity: 0;
  144. position: absolute;
  145. top: 0;
  146. left: 0;
  147. bottom: 0;
  148. right: 0;
  149. background-color: rgba(0, 0, 0, 0.4);
  150. transition: opacity 0.3s;
  151. }
  152. .uni-drawer__mask--visible {
  153. /* #ifndef APP-NVUE */
  154. display: block;
  155. /* #endif */
  156. opacity: 1;
  157. }
  158. </style>