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>
|