crm-mobile/components/wk-drop/wk-drop.vue

<template>
  <view class="drop" @click.stop>
    <view class="drop-control" @click="handleOpenFilter">
      <view class="drop-label">
        {{ activeLabel }}
      </view>
      <view ref="icon" class="drop-icon">
        <text class="wk wk-arrow-right icon" />
      </view>
    </view>

    <uni-popup
      ref="popupBottom"
      radius="10rpx 10rpx 0 0"
      type="bottom">
      <view class="filter-popup">
        <view class="popup-header">
          <view class="text">
            {{ title }}
          </view>
          <text class="wk wk-close icon" @click="handleCloseFilter" />
        </view>
        <view class="popup-content">
          <view class="list">
            <view
              v-for="item in list"
              :key="item[valueField]"
              :class="{active: value === item[valueField]}"
              class="list-item"
              @click="handleSelect(item)">
              <text class="text">
                {{ item[labelField] }}
              </text>
              <text v-show="value === item[valueField]" class="wk wk-check icon" />
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  export default {
    name: 'WkDropDown',
    props: {
      list: {
        type: Array,
        default: () => []
      },
      labelField: {
        type: String,
        default: 'label'
      },
      valueField: {
        type: String,
        default: 'value'
      },
      value: {
        type: [Object, String, Array, Number],
        default: null
      },
      title: {
        type: String,
        default: '筛选'
      }
    },
    data() {
      return {}
    },
    computed: {
      activeLabel() {
        if (this.value) {
          const findRes = this.list.find(o => o[this.valueField] === this.value)
          if (findRes) {
            return findRes[this.labelField]
          } else {
            this.emitValue(this.list[0])
          }
        } else {
          this.emitValue(this.list[0])
        }
        return ''
      }
    },
    methods: {
      handleOpenFilter() {
        this.$refs.popupBottom.open()
      },

      handleCloseFilter() {
        this.$refs.popupBottom.close()
        this.$emit('close')
      },

      emitValue(item) {
        const value = item[this.valueField]
        this.$emit('input', value)
        this.$emit('change', value)
      },

      handleSelect(item) {
        this.emitValue(item)
        this.handleCloseFilter()
      }
    }
  }
</script>

<style scoped lang="scss">
  .drop {
    position: relative;
    font-size: 26rpx;
    .drop-control {
			background-color: #F5F5F5;
			border-radius: 4rpx;
			padding: 8rpx 15rpx;
      @include left;
      .drop-label {
        color: $gray;
        margin-right: 15rpx;
        line-height: 1;
      }
      .drop-icon {
				will-change: transform;
				transition: all ease .2s;
				@include center;
        .icon {
					line-height: 1;
          font-size: 24rpx;
					transform: rotate(90deg);
        }
				&.active {
					transform: rotate(180deg);
				}
      }
    }

    .filter-popup {
			padding: 36rpx;

			.popup-header {
				position: relative;
				@include center;
				.text {
					font-size: $wk-font-large;
				}
				.icon {
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					color: $gray;
					font-size: $wk-font-medium;
				}
			}

			.popup-content {
				width: 100%;
				min-height: 500rpx;
				max-height: 700rpx;
				overflow: auto;
				margin-top: 38rpx;

				.list {
					width: 100%;
					.list-item {
						color: $dark;
						font-size: $wk-font-base;
						border-bottom: 1rpx solid $border-color;
						padding: 22rpx 0;
						@include left;

						.text {
							flex: 1;
						}
						.icon {
							font-size: $wk-font-medium;
							color: inherit;
							line-height: 1;
						}

						&.active {
							color: $theme-color;
						}
					}
				}
			}
    }
  }
</style>