u-dropdown.vue 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  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="menuIcon" :size="$u.addUnit(menuIconSize)" :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. height: contentHeight + 'px'
  26. }]"
  27. @tap="maskClick" @touchmove.stop.prevent>
  28. <view @tap.stop.prevent class="u-dropdown__content__popup" :style="[popupStyle]">
  29. <slot></slot>
  30. </view>
  31. <view class="u-dropdown__content__mask"></view>
  32. </view>
  33. </view>
  34. </template>
  35. <script>
  36. /**
  37. * dropdown 下拉菜单
  38. * @description 该组件一般用于向下展开菜单,同时可切换多个选项卡的场景
  39. * @tutorial http://uviewui.com/components/dropdown.html
  40. * @property {String} active-color 标题和选项卡选中的颜色(默认#2979ff)
  41. * @property {String} inactive-color 标题和选项卡未选中的颜色(默认#606266)
  42. * @property {Boolean} close-on-click-mask 点击遮罩是否关闭菜单(默认true)
  43. * @property {Boolean} close-on-click-self 点击当前激活项标题是否关闭菜单(默认true)
  44. * @property {String | Number} duration 选项卡展开和收起的过渡时间,单位ms(默认300)
  45. * @property {String | Number} height 标题菜单的高度,单位任意(默认80)
  46. * @property {String | Number} border-radius 菜单展开内容下方的圆角值,单位任意(默认0)
  47. * @property {Boolean} border-bottom 标题菜单是否显示下边框(默认false)
  48. * @property {String | Number} title-size 标题的字体大小,单位任意,数值默认为rpx单位(默认28)
  49. * @event {Function} open 下拉菜单被打开时触发
  50. * @event {Function} close 下拉菜单被关闭时触发
  51. * @example <u-dropdown></u-dropdown>
  52. */
  53. export default {
  54. name: 'u-dropdown',
  55. props: {
  56. // 菜单标题和选项的激活态颜色
  57. activeColor: {
  58. type: String,
  59. default: '#2979ff'
  60. },
  61. // 菜单标题和选项的未激活态颜色
  62. inactiveColor: {
  63. type: String,
  64. default: '#606266'
  65. },
  66. // 点击遮罩是否关闭菜单
  67. closeOnClickMask: {
  68. type: Boolean,
  69. default: true
  70. },
  71. // 点击当前激活项标题是否关闭菜单
  72. closeOnClickSelf: {
  73. type: Boolean,
  74. default: true
  75. },
  76. // 过渡时间
  77. duration: {
  78. type: [Number, String],
  79. default: 300
  80. },
  81. // 标题菜单的高度,单位任意,数值默认为rpx单位
  82. height: {
  83. type: [Number, String],
  84. default: 80
  85. },
  86. // 是否显示下边框
  87. borderBottom: {
  88. type: Boolean,
  89. default: false
  90. },
  91. // 标题的字体大小
  92. titleSize: {
  93. type: [Number, String],
  94. default: 28
  95. },
  96. // 下拉出来的内容部分的圆角值
  97. borderRadius: {
  98. type: [Number, String],
  99. default: 0
  100. },
  101. // 菜单右侧的icon图标
  102. menuIcon: {
  103. type: String,
  104. default: 'arrow-down'
  105. },
  106. // 菜单右侧图标的大小
  107. menuIconSize: {
  108. type: [Number, String],
  109. default: 26
  110. }
  111. },
  112. data() {
  113. return {
  114. showDropdown: true, // 是否打开下来菜单,
  115. menuList: [], // 显示的菜单
  116. active: false, // 下拉菜单的状态
  117. // 当前是第几个菜单处于激活状态,小程序中此处不能写成false或者"",否则后续将current赋值为0,
  118. // 无能的TX没有使用===而是使用==判断,导致程序认为前后二者没有变化,从而不会触发视图更新
  119. current: 99999,
  120. // 外层内容的样式,初始时处于底层,且透明
  121. contentStyle: {
  122. zIndex: -1,
  123. opacity: 0
  124. },
  125. // 让某个菜单保持高亮的状态
  126. highlightIndex: 99999,
  127. contentHeight: 0
  128. }
  129. },
  130. computed: {
  131. // 下拉出来部分的样式
  132. popupStyle() {
  133. let style = {};
  134. // 进行Y轴位移,展开状态时,恢复原位。收齐状态时,往上位移100%,进行隐藏
  135. style.transform = `translateY(${this.active ? 0 : '-100%'})`
  136. style['transition-duration'] = this.duration / 1000 + 's';
  137. style.borderRadius = `0 0 ${this.$u.addUnit(this.borderRadius)} ${this.$u.addUnit(this.borderRadius)}`;
  138. return style;
  139. }
  140. },
  141. created() {
  142. // 引用所有子组件(u-dropdown-item)的this,不能在data中声明变量,否则在微信小程序会造成循环引用而报错
  143. this.children = [];
  144. },
  145. mounted() {
  146. this.getContentHeight();
  147. },
  148. methods: {
  149. init() {
  150. // 当某个子组件内容变化时,触发父组件的init,父组件再让每一个子组件重新初始化一遍
  151. // 以保证数据的正确性
  152. this.menuList = [];
  153. this.children.map(child => {
  154. child.init();
  155. })
  156. },
  157. // 点击菜单
  158. menuClick(index) {
  159. // 判断是否被禁用
  160. if (this.menuList[index].disabled) return;
  161. // 如果点击时的索引和当前激活项索引相同,意味着点击了激活项,需要收起下拉菜单
  162. if (index === this.current && this.closeOnClickSelf) {
  163. this.close();
  164. // 等动画结束后,再移除下拉菜单中的内容,否则直接移除,也就没有下拉菜单收起的效果了
  165. setTimeout(() => {
  166. this.children[index].active = false;
  167. }, this.duration)
  168. return;
  169. }
  170. this.open(index);
  171. },
  172. // 打开下拉菜单
  173. open(index) {
  174. // 重置高亮索引,否则会造成多个菜单同时高亮
  175. // this.highlightIndex = 9999;
  176. // 展开时,设置下拉内容的样式
  177. this.contentStyle = {
  178. zIndex: 11,
  179. }
  180. // 标记展开状态以及当前展开项的索引
  181. this.active = true;
  182. this.current = index;
  183. // 历遍所有的子元素,将索引匹配的项标记为激活状态,因为子元素是通过v-if控制切换的
  184. // 之所以不是因display: none,是因为nvue没有display这个属性
  185. this.children.map((val, idx) => {
  186. val.active = index == idx ? true : false;
  187. })
  188. this.$emit('open', this.current);
  189. },
  190. // 设置下拉菜单处于收起状态
  191. close() {
  192. this.$emit('close', this.current);
  193. // 设置为收起状态,同时current归位,设置为空字符串
  194. this.active = false;
  195. this.current = 99999;
  196. // 下拉内容的样式进行调整,不透明度设置为0
  197. this.contentStyle = {
  198. zIndex: -1,
  199. opacity: 0
  200. }
  201. },
  202. // 点击遮罩
  203. maskClick() {
  204. // 如果不允许点击遮罩,直接返回
  205. if (!this.closeOnClickMask) return;
  206. this.close();
  207. },
  208. // 外部手动设置某个菜单高亮
  209. highlight(index = undefined) {
  210. this.highlightIndex = index !== undefined ? index : 99999;
  211. },
  212. // 获取下拉菜单内容的高度
  213. getContentHeight() {
  214. // 这里的原理为,因为dropdown组件是相对定位的,它的下拉出来的内容,必须给定一个高度
  215. // 才能让遮罩占满菜单一下,直到屏幕底部的高度
  216. // this.$u.sys()为uView封装的获取设备信息的方法
  217. let windowHeight = this.$u.sys().windowHeight;
  218. this.$uGetRect('.u-dropdown__menu').then(res => {
  219. // 这里获取的是dropdown的尺寸,在H5上,uniapp获取尺寸是有bug的(以前提出修复过,后来又出现了此bug,目前hx2.8.11版本)
  220. // H5端bug表现为元素尺寸的top值为导航栏底部到到元素的上边沿的距离,但是元素的bottom值确是导航栏顶部到元素底部的距离
  221. // 二者是互相矛盾的,本质原因是H5端导航栏非原生,uni的开发者大意造成
  222. // 这里取菜单栏的botton值合理的,不能用res.top,否则页面会造成滚动
  223. this.contentHeight = windowHeight - res.bottom;
  224. })
  225. }
  226. }
  227. }
  228. </script>
  229. <style scoped lang="scss">
  230. @import "../../libs/css/style.components.scss";
  231. .u-dropdown {
  232. flex: 1;
  233. width: 100%;
  234. position: relative;
  235. &__menu {
  236. @include vue-flex;
  237. position: relative;
  238. z-index: 11;
  239. height: 80rpx;
  240. &__item {
  241. flex: 1;
  242. @include vue-flex;
  243. justify-content: center;
  244. align-items: center;
  245. &__text {
  246. font-size: 28rpx;
  247. color: $u-content-color;
  248. }
  249. &__arrow {
  250. margin-left: 6rpx;
  251. transition: transform .3s;
  252. align-items: center;
  253. @include vue-flex;
  254. &--rotate {
  255. transform: rotate(180deg);
  256. }
  257. }
  258. }
  259. }
  260. &__content {
  261. position: absolute;
  262. z-index: 8;
  263. width: 100%;
  264. left: 0px;
  265. bottom: 0;
  266. overflow: hidden;
  267. &__mask {
  268. position: absolute;
  269. z-index: 9;
  270. background: rgba(0, 0, 0, .3);
  271. width: 100%;
  272. left: 0;
  273. top: 0;
  274. bottom: 0;
  275. }
  276. &__popup {
  277. position: relative;
  278. z-index: 10;
  279. transition: all 0.3s;
  280. transform: translate3D(0, -100%, 0);
  281. overflow: hidden;
  282. }
  283. }
  284. }
  285. </style>