minnan/src/common/components/SimpleDropDownPicker.vue

<template>
  <view 
    class="simple-dropdown-box" 
    @click="show=true"
  >
    {{ dispayText }} ▼
  </view>
  <u-picker 
    :show="show" 
    :columns="[columns]" 
    keyName="name"
    @cancel="show=false"
    @confirm="confirm"
  />
</template>

<script setup lang="ts">
import { computed, ref, type PropType } from 'vue';

export interface SimpleDropDownPickerItem {
  id: number,
  name: string,
}

const props = defineProps({	
  columns: {
    type: Object as PropType<SimpleDropDownPickerItem[]|null>,
    default: null,
  },
  modelValue: {
    type: Number,
    default: null,
  },
  defaultText: {
    type: String,
    default: '请选择',
  },
})

const emit = defineEmits([
  'update:modelValue', 
])

const show = ref(false);
const dispayText = computed(() => {
  if (props.columns) 
    return props.columns.find(item => item.id == props.modelValue)?.name || props.defaultText;
  return props.defaultText;
});

function confirm(e: { value: SimpleDropDownPickerItem[] }) {
  show.value = false;
  emit('update:modelValue', e.value[0].id);
}
</script>

<style lang="scss">
.simple-dropdown-box {
  position: relative;
  padding: 16rpx 18rpx;
  border-radius: 30rpx;
  background: #FFFFFF;
}
</style>