gxt_app/components/select-picker/select-picker.uvue

<template>
    <view class="select-picker">
        <view class="select-item" :class="{'no-margin': !showLabel}">
            <text class="select-label" v-if="showLabel && label.length > 0" :style="{ width: labelWidth }">{{ label }}</text>
            <view class="select-input-box" @click="showPicker = true">
                <text class="select-input-text" :class="{'placeholder': modelValue.length == 0}">{{ displayText }}</text>
                <view class="select-input-icons">
                    <image v-if="clearable && modelValue.length > 0" class="select-input-clear" src="/static/images/common/2.png" mode="aspectFit" @click.stop="handleClear"></image>
                    <image class="select-input-arrow" src="/static/images/common/1.png" mode="aspectFit"></image>
                </view>
            </view>
        </view>

        <!-- 选择器弹窗 -->
        <l-popup v-model="showPicker" position="bottom">
            <l-picker 
                cancel-btn="取消" 
                confirm-btn="确定" 
                :title="title"
                title-style="font-size: 32rpx; font-weight: 500; color: #000000;"
                cancel-style="font-size: 32rpx; color: #888888;"
                confirm-style="font-size: 32rpx; color: #1890ff;"
                @cancel="showPicker = false" 
                @confirm="handleConfirm">
                <l-picker-item :options="options"></l-picker-item>
            </l-picker>
        </l-popup>
    </view>
</template>

<script setup lang="uts">
    import { ref, computed } from 'vue'
    import type { PickerColumn, PickerConfirmEvent } from '@/uni_modules/lime-picker'

    // Props 定义
    type Props = {
        modelValue: string
        label?: string
        placeholder?: string
        title?: string
        options: PickerColumn
        labelWidth?: string
        showLabel?: boolean
        clearable?: boolean
    }

    const props = withDefaults(defineProps<Props>(), {
        label: '',
        placeholder: '请选择',
        title: '请选择',
        labelWidth: '140rpx',
        showLabel: true,
        clearable: true
    })

    // Emits 定义
    const emit = defineEmits<{
        (e: 'update:modelValue', value: string): void
    }>()

    // 弹窗显示状态
    const showPicker = ref<boolean>(false)

    // 显示文本
    const displayText = computed<string>(() => {
        return props.modelValue.length > 0 ? props.modelValue : props.placeholder
    })

    // 确认选择
    const handleConfirm = (e: PickerConfirmEvent): void => {
        if (e.values.length > 0) {
            emit('update:modelValue', e.values[0] as string)
        }
        showPicker.value = false
    }

    // 清除选择
    const handleClear = (): void => {
        emit('update:modelValue', '')
    }
</script>

<style lang="scss">
    .select-picker {
        .select-item {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 24rpx;

            &.no-margin {
                margin-bottom: 0;
            }

            .select-label {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                font-weight: 400;
                font-size: 28rpx;
                color: #6e7580;
            }

            .select-input-box {
                flex: 1;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                padding: 20rpx;
                background-color: #f5f7fa;
                border-radius: 8rpx;

                .select-input-text {
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #131415;
                    flex: 1;

                    &.placeholder {
                        color: #999999;
                    }
                }

                .select-input-icons {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    margin-left: 20rpx;

                    .select-input-clear {
                        width: 28rpx;
                        height: 28rpx;
                        margin-right: 12rpx;
                    }

                    .select-input-arrow {
                        width: 24rpx;
                        height: 24rpx;
                    }
                }
            }
        }
    }
</style>