123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243 |
- <template>
- <view class="u-dropdown">
- <view class="u-dropdown__menu" :style="{
- height: $u.addUnit(height)
- }" :class="{
- 'u-border-bottom': borderBottom
- }">
- <view class="u-dropdown__menu__item" v-for="(item, index) in menuList" :key="index" @tap.stop="menuClick(index)">
- <view class="u-flex">
- <text class="u-dropdown__menu__item__text" :style="{
- color: item.disabled ? '#c0c4cc' : (index === current || highlightIndex == index) ? activeColor : inactiveColor,
- fontSize: $u.addUnit(titleSize)
- }">{{item.title}}</text>
- <view class="u-dropdown__menu__item__arrow" :class="{
- 'u-dropdown__menu__item__arrow--rotate': index === current
- }">
- <u-icon :custom-style="{display: 'flex'}" name="arrow-down" size="26" :color="index === current || highlightIndex == index ? activeColor : '#c0c4cc'"></u-icon>
- </view>
- </view>
- </view>
- </view>
- <view class="u-dropdown__content" :style="[contentStyle, {
- transition: `opacity ${duration / 1000}s linear`,
- top: $u.addUnit(height)
- }]"
- @tap="maskClick" @touchmove.stop.prevent>
- <view @tap.stop.prevent class="u-dropdown__content__popup" :style="[popupStyle]">
- <slot></slot>
- </view>
- <view class="u-dropdown__content__mask"></view>
- </view>
- </view>
- </template>
- <script>
- export default {
- name: 'u-dropdown',
- props: {
- // 菜单标题和选项的激活态颜色
- activeColor: {
- type: String,
- default: '#2979ff'
- },
- // 菜单标题和选项的未激活态颜色
- inactiveColor: {
- type: String,
- default: '#606266'
- },
- // 点击遮罩是否关闭菜单
- closeOnClickMask: {
- type: Boolean,
- default: true
- },
- // 点击当前激活项标题是否关闭菜单
- closeOnClickSelf: {
- type: Boolean,
- default: true
- },
- // 过渡时间
- duration: {
- type: [Number, String],
- default: 300
- },
- // 标题菜单的高度,单位任意,数值默认为rpx单位
- height: {
- type: [Number, String],
- default: 80
- },
- // 是否显示下边框
- borderBottom: {
- type: Boolean,
- default: false
- },
- // 标题的字体大小
- titleSize: {
- type: [Number, String],
- default: 28
- }
- },
- data() {
- return {
- showDropdown: true, // 是否打开下来菜单,
- menuList: [], // 显示的菜单
- active: false, // 下拉菜单的状态
- // 当前是第几个菜单处于激活状态,小程序中此处不能写成false或者"",否则后续将current赋值为0,
- // 无能的TX没有使用===而是使用==判断,导致程序认为前后二者没有变化,从而不会触发视图更新
- current: 99999,
- // 外层内容的样式,初始时处于底层,且透明
- contentStyle: {
- zIndex: -1,
- opacity: 0
- },
- // 让某个菜单保持高亮的状态
- highlightIndex: 99999
- }
- },
- computed: {
- // 下拉出来部分的样式
- popupStyle() {
- let style = {};
- // 进行Y轴位移,展开状态时,恢复原位。收齐状态时,往上位移100%,进行隐藏
- style.transform = `translateY(${this.active ? 0 : '-100%'})`
- style['transition-duration'] = this.duration / 1000 + 's';
- return style;
- }
- },
- created() {
- // 引用所有子组件(u-dropdown-item)的this,不能在data中声明变量,否则在微信小程序会造成循环引用而报错
- this.children = [];
- },
- methods: {
- init() {
- // 当某个子组件内容变化时,触发父组件的init,父组件再让每一个子组件重新初始化一遍
- // 以保证数据的正确性
- this.menuList = [];
- this.children.map(child => {
- child.init();
- })
- },
- // 点击菜单
- menuClick(index) {
- // 判断是否被禁用
- if (this.menuList[index].disabled) return;
- // 如果点击时的索引和当前激活项索引相同,意味着点击了激活项,需要收起下拉菜单
- if (index === this.current && this.closeOnClickSelf) {
- this.close();
- // 等动画结束后,再移除下拉菜单中的内容,否则直接移除,也就没有下拉菜单收起的效果了
- setTimeout(() => {
- this.children[index].active = false;
- }, this.duration)
- return;
- }
- this.open(index);
- },
- // 打开下拉菜单
- open(index) {
- // 重置高亮索引,否则会造成多个菜单同时高亮
- // this.highlightIndex = 9999;
- // 展开时,设置下拉内容的样式
- this.contentStyle = {
- zIndex: 11,
- }
- // 标记展开状态以及当前展开项的索引
- this.active = true;
- this.current = index;
- // 历遍所有的子元素,将索引匹配的项标记为激活状态,因为子元素是通过v-if控制切换的
- // 之所以不是因display: none,是因为nvue没有display这个属性
- this.children.map((val, idx) => {
- val.active = index == idx ? true : false;
- })
- this.$emit('open', this.current);
- },
- // 设置下拉菜单处于收起状态
- close() {
- this.$emit('close', this.current);
- // 设置为收起状态,同时current归位,设置为空字符串
- this.active = false;
- this.current = 99999;
- // 下拉内容的样式进行调整,不透明度设置为0
- this.contentStyle = {
- zIndex: -1,
- opacity: 0
- }
- },
- // 点击遮罩
- maskClick() {
- // 如果不允许点击遮罩,直接返回
- if (!this.closeOnClickMask) return;
- this.close();
- },
- // 外部手动设置某个菜单高亮
- highlight(index = undefined) {
- this.highlightIndex = index !== undefined ? index : 99999;
- }
- }
- }
- </script>
- <style scoped lang="scss">
- @import "../../libs/css/style.components.scss";
- .u-dropdown {
- flex: 1;
- width: 100%;
- &__menu {
- @include vue-flex;
- position: relative;
- z-index: 11;
- height: 80rpx;
- &__item {
- flex: 1;
- @include vue-flex;
- justify-content: center;
- align-items: center;
- &__text {
- font-size: 28rpx;
- color: $u-content-color;
- }
- &__arrow {
- margin-left: 6rpx;
- transition: transform .3s;
- align-items: center;
- @include vue-flex;
- &--rotate {
- transform: rotate(180deg);
- }
- }
- }
- }
- &__content {
- position: absolute;
- z-index: 8;
- width: 100%;
- left: 0px;
- bottom: 0;
- overflow: hidden;
- &__mask {
- position: absolute;
- z-index: 9;
- background: rgba(0, 0, 0, .3);
- width: 100%;
- left: 0;
- top: 0;
- bottom: 0;
- }
- &__popup {
- position: relative;
- z-index: 10;
- transition: all 0.3s;
- transform: translate3D(0, -100%, 0);
- }
- }
- }
- </style>
|