javascript
<template>
<view class="uni-dropdown">
<view class="trigger" @tap="toggleDropdown">{{ showlabel }}</view>
<view class="dropdown-content" v-if="isOpen">
<view class="" style="position: relative;">
<text class="blk blk-a-xialakuang-xiala"></text>
</view>
<view style="max-height: 150px;overflow-y: auto;">
<view v-for="(item, index) in options" :key="index" :class="['dropdown-item', item.isred ? 'red' : '']"
@tap="selectOption(item)">
{{ item[labelkey] }}
</view>
</view>
</view>
</view>
</template>
<script setup>
import {
ref,
watch,
} from 'vue';
const props = defineProps({
options: {
type: Array,
default: () => []
},
modelValue: {
type: [String, Number],
default: ''
},
valuekey: {
type: String,
default: 'id'
},
labelkey: {
type: String,
default: 'name'
},
isredkey: {
type: String,
default: 'isred'
}
});
let emit = defineEmits(['update:modelValue', 'change'])
const isOpen = ref(false);
const showlabel = ref('请选择'); // 初始化显示文本
const toggleDropdown = () => {
isOpen.value = !isOpen.value;
};
const selectOption = (item) => {
emit('update:modelValue', item[props.valuekey]); // 发出更新事件
emit('change', item[props.valuekey])
isOpen.value = false; // 关闭下拉
// 同时更新显示的标签(如果需要)
showlabel.value = item[props.labelkey];
};
watch(() => props.modelValue, (newVal) => {
const selectedOption = props.options.find(opt => opt[props.valuekey] === newVal);
if (selectedOption) {
// 注意这里应该是selectedOption而不是selectOption
showlabel.value = selectedOption[props.labelkey];
} else {
// 如果找不到匹配的选项,可以重置为默认文本或其他逻辑
showlabel.value = '请选择';
}
},{
immediate:true
});
</script>
<style scoped>
.uni-dropdown {
position: relative;
}
.trigger {
padding: 5rpx;
border: 1px solid #ccc;
cursor: pointer;
overflow-x: scroll;
width: 100%;
border-radius: 4px;
}
.dropdown-content {
box-sizing: border-box;
position: absolute;
top: calc(100% + 5px);
left: 0;
width: 100%;
background-color: #fff;
border: 1px solid #ebeef5;
border-radius: 6px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
z-index: 3;
padding: 4px 0;
font-size: 20rpx;
}
.blk-a-xialakuang-xiala {
position: absolute;
left: 20%;
top: -14px;
color: #fff;
border-top-width: 0;
border-bottom-color: #ebeef5;
}
.dropdown-item {
padding: 5rpx;
cursor: pointer;
}
.dropdown-item.red {
color: red;
}
.dropdown-item:hover {
background-color: #f0f0f0;
}
</style>
使用方式
html
<selectBom v-if="!isOnlyRead&&supplies_detail_item.type_biaoshi==3&&item?.bom_list?.length"
v-model="item.bom_versions" :options="item.bom_list" labelkey='bom_versions'
valuekey='bom_versions'
@change="handle_change_boom($event,item,index,idx,item.bom_list)"></selectBom>