lilishop-uniapp/uview-ui/components/u-dropdown-list/u-dropdown-list.vue

<template>
  <view class="dropdown-list-wapper u-flex u-flex-1">
    <view
      v-for="(drop, index) in dropdownListFromFather"
      :key="drop.name"
      :show="drop.show"
      class="u-selected-class u-dropdown-list"
      :style="{ zIndex: zIndex + 1 }"
    >
      <slot name="selectionbox">
        <view
          :style="{ height: top + 'rpx' }"
          class="drop-item u-flex u-justify-center"
          @click="handleDropClick(drop)"
        >
          <text :style="{ color: drop.show ? activeColor : '#999' }">
            {{ getTitle(drop.options) }}
          </text>
          <view
            class="u-animation"
            :class="[drop.show ? 'u-animation-show' : '']"
          >
            <u-icon
              v-if="drop.show"
              name="arrow-up-fill"
              :size="18"
              :color="activeColor"
            ></u-icon>
            <u-icon v-else name="arrow-down-fill" :size="18"></u-icon>
          </view>
        </view>
      </slot>
      <view
        class="u-dropdown-view"
        :class="[drop.show ? 'u-dropdownlist-show' : '']"
        :style="{
          background: bgcolor,
          height: drop.show ? 'auto' : 0,
          top: top + 'rpx'
        }"
      >
        <slot name="dropdownbox">
          <view class="u-selected-list">
            <view
              class="select-item u-flex u-align-center u-border-bottom u-align-between"
              :style="{ color: select.select ? activeColor : '#666666' }"
              @tap="handleSelected(select, drop.options)"
              v-for="(select, n) in drop.options"
              :key="n"
            >
              <text>{{ select.text }}</text>
              <u-icon
                v-if="select.select"
                class="select-icon"
                :color="activeColor"
                size="35"
                name="checkmark"
              ></u-icon>
            </view>
          </view>
        </slot>
      </view>
    </view>
    <u-mask
      duration="100"
      :show="dropdownShow"
      @click="closeMask"
      :z-index="zIndex"
    ></u-mask>
  </view>
</template>

<script>
const dropdownOption1 = [
  { id: 0, text: '类型', value: '', select: false },
  { id: 1, text: '全场券', value: 1, select: false },
  { id: 2, text: '品类券', value: 2, select: false },
  { id: 3, text: '单品券', value: 3, select: false },
  { id: 4, text: '业务券', value: 4, select: false }
]
const dropdownOption2 = [
  { id: 5, text: '状态', value: '', select: false },
  { id: 6, text: '可使用', value: 1, select: false },
  { id: 7, text: '已过期', value: 2, select: false }
]
const dropdownOption3 = [
  { id: 8, text: '优惠力度', value: '', select: false },
  { id: 9, text: '满100-20', value: 1, select: false },
  { id: 10, text: '满100-50', value: 2, select: false }
]

export default {
  props: {
    // 下拉框数据
    dropdownList: {
      type: Array,
      default: () => [
        { show: false, options: dropdownOption1 },
        { show: false, options: dropdownOption2 },
        { show: false, options: dropdownOption3 }
      ],
      required: true,
      validator: value =>
        value.every(item => Array.isArray(item.options) && item.options.length)
    },
    //背景颜色
    bgcolor: {
      type: String,
      default: 'none'
    },
    //top rpx 选择框高度也用这个值
    top: {
      type: Number,
      default: 90
    },
    // 菜单标题和选项的选中态颜色
    activeColor: {
      type: String,
      default: '#e7141a'
    },
    // mask和下拉列表的z-index
    zIndex: {
      type: [String, Number],
      default: 21
    }
  },
  data() {
    return {
      dropdownShow: false,
      dropdownListFromFather: this.dropdownList
    }
  },
  computed: {},
  methods: {
    getTitle(item = []) {
      const obj = item.find(v => v.select) || {}
      if (obj.select) {
        return obj.text
      } else {
        if (item[0]) {
          item[0].select = true
          return item[0].text
        }
      }
      return ''
    },
    handleDropClick(item) {
      if (item.show) {
        item.show = false
        this.dropdownShow = false
        return
      }
      this.dropdownListFromFather.map(item => {
        item.show = false
      })
      const t = setTimeout(() => {
        item.show = true
        this.dropdownShow = true
        clearTimeout(t)
      }, 100)
    },
    closeMask() {
      this.dropdownShow = false
      this.dropdownListFromFather.map(item => {
        item.show = false
      })
    },
    handleSelected(select, options) {
      options.map(item => {
        item.select = false
      })
      select.select = true
      this.closeMask()
      // 返回选中对象和下拉列表数组
      this.$emit('change', select, options)
    }
  },
  watch: {
    dropdownList: {
      handler(v) {
        this.dropdownListFromFather = v
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";
.dropdown-list-wapper {
  position: relative;
}
.u-dropdown-view {
  width: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 9999;
  left: 0;
  right: 0;
  /* opacity: 0; */
  visibility: hidden;
  transition: height 0.5s ease-in-out;
  .u-selected-list {
    background-color: #fff;
    .select-item {
      color: #666666;
      font-size: 28rpx;
      padding: 30rpx 54rpx 30rpx 30rpx;
      margin-left: 30rpx;
    }
    .select-item.selectActive {
      color: #e7141a;
    }
  }
}

.u-dropdownlist-show {
  /* opacity: 1; */
  visibility: visible;
}
.u-dropdown-list {
  flex: 1;
  // z-index: 22;
  background: #fff;
  position: static;
}
.drop-item {
  justify-content: center;
  color: #999999;
  font-size: 30rpx;
  > text {
    margin-right: 10rpx;
  }
  /deep/ {
    .uicon {
      position: relative;
      top: -2rpx;
    }
  }
}
</style>