80 lines
1.7 KiB
Vue
80 lines
1.7 KiB
Vue
<template>
|
|
<picker
|
|
:range="pickerList"
|
|
:range-key="props?.key || 'name'"
|
|
:disabled="props?.disabled"
|
|
@change="onChange"
|
|
>
|
|
<view class="picker_select_btn">
|
|
<view class="label">{{ selectValue || props?.placeholder }}</view>
|
|
<uni-icons type="down" color="#333" size="12" />
|
|
</view>
|
|
</picker>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { getApiLoading } from '@/common/libraries/apiLoading'
|
|
import { onMounted, ref, watch } from 'vue'
|
|
const props = defineProps([
|
|
'Enums',
|
|
'title',
|
|
'pickerIndex',
|
|
'value',
|
|
'borderTop',
|
|
'required',
|
|
'disabled',
|
|
'tip',
|
|
'key',
|
|
'des',
|
|
'padding',
|
|
'valueModel',
|
|
'placeholder',
|
|
'Apis'
|
|
])
|
|
const pickerList = ref<any>([])
|
|
const selectValue = ref('')
|
|
const emit = defineEmits(['change', 'update:valueModel'])
|
|
const onChange = (e: any) => {
|
|
let selectData: any = pickerList.value[e?.detail.value]
|
|
selectValue.value = selectData?.name
|
|
emit('update:valueModel', selectData?.id || '')
|
|
emit('change', selectData)
|
|
}
|
|
|
|
const getPickerList = () => {
|
|
getApiLoading(props?.Apis, {}).then(res => {
|
|
pickerList.value = [...[{ name: props?.placeholder, id: 0 }], ...res?.data]
|
|
console.log(res)
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
getPickerList()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.picker_select_btn {
|
|
background-color: #eee;
|
|
padding: 14rpx 20rpx;
|
|
border-radius: 100rpx;
|
|
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #333;
|
|
margin-left: 30rpx;
|
|
|
|
text {
|
|
padding-right: 10rpx;
|
|
}
|
|
.label {
|
|
white-space: nowrap; /* 防止文本换行 */
|
|
overflow: hidden; /* 隐藏超出部分的内容 */
|
|
text-overflow: ellipsis;
|
|
min-width: 100rpx;
|
|
max-width: 200rpx;
|
|
}
|
|
}
|
|
</style>
|