yihuo/components/select.vue

<template>
    <view class="select-box">
        <!-- 下拉选项 -->
        <view class="select-current relative" @tap="toggleDropdown">
            <text class="current-name">{{ selectedOption.name }}</text>
            <image class="image" :src="resource.wow_all_active" />
            <!-- <view class="select_line" :class="activeTab == 0 ? 'line' : 'line-none'"></view> -->
        </view>
        <view class="option-list" v-if="dropdownOpen">
            <text
                class="option"
                v-for="option in options"
                :key="option.id"
                @tap="selectOption(option)"
            >
                {{ option.name }}
            </text>
        </view>
    </view>
</template>

  <script>
import resource from '@/utils/resource'

export default {
    props: {
        activeTab: {
            Type: Number,
            default: 0
        }
    },
    data() {
        return {
            resource,
            options: [
                { id: 0, name: '全部' },
                { id: 1, name: '现货' },
                { id: 2, name: '预售' }
            ],
            selectedOption: { id: 0, name: '全部' },
            dropdownOpen: false
        }
    },
    methods: {
        toggleDropdown() {
            this.dropdownOpen = !this.dropdownOpen
        },
        selectOption(option) {
            this.selectedOption = option
            this.dropdownOpen = false
            // 触发选项变更事件，将选项的信息传递给父组件
            this.$emit('change', option.id)
        }
    }
}
</script>

  <style lang="scss" scoped>
.select-box {
    width: 100rpx;
    height: 60rpx;
    display: inline-block;
}

.select-current {
    padding: 10rpx;
    vertical-align: baseline;
    .image {
        position: absolute;
        top: 18rpx;
        left: 68rpx;
        width: 24rpx;
        height: 24rpx;
        margin-right: 8rpx;
    }
    .current-name {
        position: absolute;
        top: 10rpx;
        left: 5rpx;
    }
    .select_line {
        position: absolute;
        top: 50rpx;
        left: 30%;
    }
}

.option-list {
    position: absolute;
    top: 65rpx;
    left: 6rpx;
    width: 90rpx;
    display: flex;
    flex-direction: column;
    color: #fff;
    background-color: $color-theme;
    border-radius: 4rpx;
}

.option {
    padding: 10px;
    cursor: pointer;
}
.line {
    width: 35rpx;
    height: 5rpx;
    margin: 5rpx auto 0;
    border-radius: 5rpx;
    background: #a76ef4;
}
.line-none {
    width: 3rpx;
    height: 5rpx;
    margin: 5rpx auto 0;
    border-radius: 5rpx;
    background: #222335;
}
</style>