commit message

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

@@ -0,0 +1,242 @@
+<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>