fission-star-applet-250304/components/base/suspendDropdown.vue

<template>
  <view class="drop-down">
    <button class="btn-simple" plain @click="openPicker" >
      <slot>
        <image src="../../static/image/record/filter.png" style="width: 30rpx; height: 30rpx; margin: 10rpx;"></image>
      </slot>
    </button>

    <template v-if="popupVisible">
      <view class="drop-down-overlay" @click="closePicker"></view>
      
      <view class="card drop-down-popup">
        <view 
          v-for="item in options" 
          class="drop-down-option" 
          :class="[item.value === value ? 'is-active' : '']"
          :key="item.value"
          @click="onSelect(item.value)"
        >
          <text>{{ item.label }}</text>
        </view>
      </view>
    </template>
  </view>
</template>


<script>
	export default {
    props: {
      value: {
        type: String | Number,
        default: null,
      },
      options: {
        type: Array,
        default() {
          return []
        }
      }
    },
		data() {
      return {
        popupVisible: false,
      }
    },
    methods: {
      openPicker() {
        this.popupVisible = true
      },
      closePicker() {
        this.popupVisible = false
      },
			onSelect(val) {
				const selected = this.value
        const newVal = selected === val ? null : val
        
        this.$emit('input', newVal)
        this.$emit('change', newVal)
			},
    },
  }
</script>

<style scoped lang="scss">
.drop-down {
  position: relative;
  clear: both;

  &-overlay {
    position: fixed;
    width: 100vw;
    height: calc(100vh - #{$navbar-height} - var(--status-bar-height) - 20rpx);
    background: transparent;
    bottom: 0;
    left: 0;
    font-size: 0;
  }

  &-popup {
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    padding: 16rpx 40rpx;
    position: absolute;
    z-index: 99;
    right: -14rpx;
    margin-top: 28rpx;

    &:before {
      content: ' ';
      position: absolute;
      top: -28rpx;
      right: 14rpx;
      width: 0;
      height: 0;
      border: 14rpx solid transparent;
      border-bottom-color: #FFFFFF;
    }

  }

  &-option {
    color: #999999;
    font-size: 28rpx;

    white-space: nowrap;

    &.is-active {
      color: #1B1B1B;
      font-weight: 700;
    }

    & + & {
      margin-top: 16rpx;
    }
  }
}
</style>