u-dropdown.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. <template>
  2. <view class="u-dropdown">
  3. <view class="u-dropdown__menu" :style="{
  4. height: $u.addUnit(height)
  5. }" :class="{
  6. 'u-border-bottom': borderBottom
  7. }">
  8. <view class="u-dropdown__menu__item" v-for="(item, index) in menuList" :key="index" @tap.stop="menuClick(index)">
  9. <view class="u-flex">
  10. <text class="u-dropdown__menu__item__text" :style="{
  11. color: item.disabled ? '#c0c4cc' : (index === current || highlightIndex == index) ? activeColor : inactiveColor,
  12. fontSize: $u.addUnit(titleSize)
  13. }">{{item.title}}</text>
  14. <view class="u-dropdown__menu__item__arrow" :class="{
  15. 'u-dropdown__menu__item__arrow--rotate': index === current
  16. }">
  17. <u-icon :custom-style="{display: 'flex'}" name="arrow-down" size="26" :color="index === current || highlightIndex == index ? activeColor : '#c0c4cc'"></u-icon>
  18. </view>
  19. </view>
  20. </view>
  21. </view>
  22. <view class="u-dropdown__content" :style="[contentStyle, {
  23. transition: `opacity ${duration / 1000}s linear`,
  24. top: $u.addUnit(height)
  25. }]"
  26. @tap="maskClick" @touchmove.stop.prevent>
  27. <view @tap.stop.prevent class="u-dropdown__content__popup" :style="[popupStyle]">
  28. <slot></slot>
  29. </view>
  30. <view class="u-dropdown__content__mask"></view>
  31. </view>
  32. </view>
  33. </template>
  34. <script>
  35. export default {
  36. name: 'u-dropdown',
  37. props: {
  38. // 菜单标题和选项的激活态颜色
  39. activeColor: {
  40. type: String,
  41. default: '#2979ff'
  42. },
  43. // 菜单标题和选项的未激活态颜色
  44. inactiveColor: {
  45. type: String,
  46. default: '#606266'
  47. },
  48. // 点击遮罩是否关闭菜单
  49. closeOnClickMask: {
  50. type: Boolean,
  51. default: true
  52. },
  53. // 点击当前激活项标题是否关闭菜单
  54. closeOnClickSelf: {
  55. type: Boolean,
  56. default: true
  57. },
  58. // 过渡时间
  59. duration: {
  60. type: [Number, String],
  61. default: 300
  62. },
  63. // 标题菜单的高度,单位任意,数值默认为rpx单位
  64. height: {
  65. type: [Number, String],
  66. default: 80
  67. },
  68. // 是否显示下边框
  69. borderBottom: {
  70. type: Boolean,
  71. default: false
  72. },
  73. // 标题的字体大小
  74. titleSize: {
  75. type: [Number, String],
  76. default: 28
  77. }
  78. },
  79. data() {
  80. return {
  81. showDropdown: true, // 是否打开下来菜单,
  82. menuList: [], // 显示的菜单
  83. active: false, // 下拉菜单的状态
  84. // 当前是第几个菜单处于激活状态,小程序中此处不能写成false或者"",否则后续将current赋值为0,
  85. // 无能的TX没有使用===而是使用==判断,导致程序认为前后二者没有变化,从而不会触发视图更新
  86. current: 99999,
  87. // 外层内容的样式,初始时处于底层,且透明
  88. contentStyle: {
  89. zIndex: -1,
  90. opacity: 0
  91. },
  92. // 让某个菜单保持高亮的状态
  93. highlightIndex: 99999
  94. }
  95. },
  96. computed: {
  97. // 下拉出来部分的样式
  98. popupStyle() {
  99. let style = {};
  100. // 进行Y轴位移,展开状态时,恢复原位。收齐状态时,往上位移100%,进行隐藏
  101. style.transform = `translateY(${this.active ? 0 : '-100%'})`
  102. style['transition-duration'] = this.duration / 1000 + 's';
  103. return style;
  104. }
  105. },
  106. created() {
  107. // 引用所有子组件(u-dropdown-item)的this,不能在data中声明变量,否则在微信小程序会造成循环引用而报错
  108. this.children = [];
  109. },
  110. methods: {
  111. init() {
  112. // 当某个子组件内容变化时,触发父组件的init,父组件再让每一个子组件重新初始化一遍
  113. // 以保证数据的正确性
  114. this.menuList = [];
  115. this.children.map(child => {
  116. child.init();
  117. })
  118. },
  119. // 点击菜单
  120. menuClick(index) {
  121. // 判断是否被禁用
  122. if (this.menuList[index].disabled) return;
  123. // 如果点击时的索引和当前激活项索引相同,意味着点击了激活项,需要收起下拉菜单
  124. if (index === this.current && this.closeOnClickSelf) {
  125. this.close();
  126. // 等动画结束后,再移除下拉菜单中的内容,否则直接移除,也就没有下拉菜单收起的效果了
  127. setTimeout(() => {
  128. this.children[index].active = false;
  129. }, this.duration)
  130. return;
  131. }
  132. this.open(index);
  133. },
  134. // 打开下拉菜单
  135. open(index) {
  136. // 重置高亮索引,否则会造成多个菜单同时高亮
  137. // this.highlightIndex = 9999;
  138. // 展开时,设置下拉内容的样式
  139. this.contentStyle = {
  140. zIndex: 11,
  141. }
  142. // 标记展开状态以及当前展开项的索引
  143. this.active = true;
  144. this.current = index;
  145. // 历遍所有的子元素,将索引匹配的项标记为激活状态,因为子元素是通过v-if控制切换的
  146. // 之所以不是因display: none,是因为nvue没有display这个属性
  147. this.children.map((val, idx) => {
  148. val.active = index == idx ? true : false;
  149. })
  150. this.$emit('open', this.current);
  151. },
  152. // 设置下拉菜单处于收起状态
  153. close() {
  154. this.$emit('close', this.current);
  155. // 设置为收起状态,同时current归位,设置为空字符串
  156. this.active = false;
  157. this.current = 99999;
  158. // 下拉内容的样式进行调整,不透明度设置为0
  159. this.contentStyle = {
  160. zIndex: -1,
  161. opacity: 0
  162. }
  163. },
  164. // 点击遮罩
  165. maskClick() {
  166. // 如果不允许点击遮罩,直接返回
  167. if (!this.closeOnClickMask) return;
  168. this.close();
  169. },
  170. // 外部手动设置某个菜单高亮
  171. highlight(index = undefined) {
  172. this.highlightIndex = index !== undefined ? index : 99999;
  173. }
  174. }
  175. }
  176. </script>
  177. <style scoped lang="scss">
  178. @import "../../libs/css/style.components.scss";
  179. .u-dropdown {
  180. flex: 1;
  181. width: 100%;
  182. &__menu {
  183. @include vue-flex;
  184. position: relative;
  185. z-index: 11;
  186. height: 80rpx;
  187. &__item {
  188. flex: 1;
  189. @include vue-flex;
  190. justify-content: center;
  191. align-items: center;
  192. &__text {
  193. font-size: 28rpx;
  194. color: $u-content-color;
  195. }
  196. &__arrow {
  197. margin-left: 6rpx;
  198. transition: transform .3s;
  199. align-items: center;
  200. @include vue-flex;
  201. &--rotate {
  202. transform: rotate(180deg);
  203. }
  204. }
  205. }
  206. }
  207. &__content {
  208. position: absolute;
  209. z-index: 8;
  210. width: 100%;
  211. left: 0px;
  212. bottom: 0;
  213. overflow: hidden;
  214. &__mask {
  215. position: absolute;
  216. z-index: 9;
  217. background: rgba(0, 0, 0, .3);
  218. width: 100%;
  219. left: 0;
  220. top: 0;
  221. bottom: 0;
  222. }
  223. &__popup {
  224. position: relative;
  225. z-index: 10;
  226. transition: all 0.3s;
  227. transform: translate3D(0, -100%, 0);
  228. }
  229. }
  230. }
  231. </style>