Browse Source

修改自定义下拉框报错问题

pull/87/head^2
zq 2 days ago
parent
commit
5c06fbf79c
  1. 46
      src/components/CustomDropdown.vue

46
src/components/CustomDropdown.vue

@ -3,7 +3,7 @@
<!-- 触发按钮 -->
<div class="select-trigger" @click="toggleDropdown">
<slot name="trigger">
{{ selectedItem ? selectedItem[displayKey] : placeholder }}
{{ selectedItem && selectedItem[displayKey] ? selectedItem[displayKey] : placeholder }}
</slot>
<img class="arrow-icon" :src="isOpen? require('../assets/dropDown_open.png'):require('../assets/dropDown_expand.png')" alt="">
</div>
@ -12,16 +12,16 @@
<transition name="slide-fade">
<div v-if="isOpen" class="select-dropdown">
<slot v-if="isOpen" name="normal"></slot>
<div v-if="options">
<div v-for="(item, index) in options" :key="index" class="dropdown-item "
<div v-if="options && options.length">
<div v-for="(item, index) in options" :key="index" class="dropdown-item"
:class="{ 'is-selected': isSelected(item) }" @click="selectItem(item)">
<slot name="item" :item="item" >
<div class="flex-between">
<slot name="item" :item="item">
<div class="flex-between" v-if="item">
<div class="left">
<p class="one">{{ item[displayKey] }}</p>
</div>
<div class="right">
<img v-if="selectedItem[displayKey] == item[displayKey]"
<img v-if="selectedItem && selectedItem[displayKey] === item[displayKey]"
src="../assets/register/drop-selected.svg" alt="">
</div>
</div>
@ -53,6 +53,11 @@ export default {
options: {
type: Array,
default: () => [],
validator: (value) => {
return Array.isArray(value) && value.every(item =>
item && typeof item === 'object'
)
}
},
options_null: {
type: Object,
@ -85,28 +90,47 @@ export default {
value: {
immediate: true,
handler(newVal) {
this.selectedItem = this.options.find((item) => item[this.valueKey] === newVal);
if (this.options && this.options.length && newVal !== undefined && newVal !== null) {
this.selectedItem = this.options.find((item) =>
item && item[this.valueKey] === newVal
) || null;
}
},
},
options: {
immediate: true,
handler(newVal) {
if (newVal && newVal.length && this.value !== undefined && this.value !== null) {
this.selectedItem = newVal.find((item) =>
item && item[this.valueKey] === this.value
) || null;
} else {
this.selectedItem = null;
}
}
}
},
methods: {
closeDropdown() {
this.isOpen = false;
},
toggleDropdown(e) {
if(e) {
e.stopPropagation();
if(e) e.stopPropagation();
if (!this.options || !this.options.length) {
console.warn('Dropdown options are empty');
return;
}
this.isOpen = !this.isOpen;
},
selectItem(item) {
if (!item) return;
this.selectedItem = item;
this.$emit("input", item[this.valueKey]); // Use the specified valueKey
this.$emit("input", item[this.valueKey]);
this.$emit("change", item);
this.isOpen = false;
},
isSelected(item) {
return this.selectedItem && this.selectedItem[this.valueKey] === item[this.valueKey];
return item && this.selectedItem && this.selectedItem[this.valueKey] === item[this.valueKey];
},
selectNullItem() {
this.$emit("changeNormal", '');

Loading…
Cancel
Save