dz-app/pages/ie/components/picker/ie-form-picker.vue

<template>
    <view class="flex-1 fx-row fx-bet-cen mx-border-b p-10 gap-10" @click="$emit('click')">
        <text class="flex-1 text-sm text-main keep-all">{{ label }}</text>
        <view class="fx-row items-center gap-10 text-lg">
            <slot>
                <view v-if="modelValue||desc" class="fx-col items-end">
                    <text class="text-main break-all">{{ modelValue }}</text>
                    <text class="text-primary-light break-all text-4xs">{{ desc }}</text>
                </view>
                <text v-else class="text-light">{{ placeholder }}</text>
                <uv-icon v-if="!remark&&!disableArrow" color="var(--light-color)" name="arrow-right"/>
            </slot>
        </view>
        <slot name="suffix">
            <text v-if="remark" class="text-sm text-main keep-all">{{ remark }}</text>
        </slot>
    </view>
</template>

<script>
export default {
    name: "ie-form-picker",
    emits: ['click'], // 必须申明emits，否则在vue3里会响应2次click.
    props: {
        label: {
            type: String,
            default: ""
        },
        desc: {
            type: String,
            default: ''
        },
        placeholder: {
            type: String,
            default: "请选择"
        },
        modelValue: {
            type: [String, Number],
            default: ""
        },
        remark: {
            type: String,
            default: ''
        },
        disableArrow: {
            type: Boolean,
            default: false
        }
    }
}
</script>

<style scoped>

</style>