<template>
|
<div class="dropdown">
|
<div class="selected-option">
|
<div class="selected-values">
|
<span v-for="(option, index) in selectedOptions" :key="index" class="selected-value">
|
<span class="selected-value-txt">{{ option }}</span>
|
<span class="delete" @click="removeOption(option)"> × </span>
|
</span>
|
</div>
|
<input type="text" v-model="searchText" placeholder="请选择选项" @input="filterOptions" v-if="isShowSearch" />
|
<span class="arrow" @click="toggleDropdown"></span>
|
</div>
|
<!-- <button class="confirm-button" @click="submitSelection">确认</button> -->
|
<ul v-if="showDropdown" class="options-list">
|
<li v-for="option in filteredOptions" :key="option" @click="toggleOption(option)">
|
<input type="checkbox" :value="option" :checked="isSelected(option)" />
|
<label>{{ option }}</label>
|
</li>
|
</ul>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
options: {
|
type: Array
|
},
|
value: {
|
type: Array
|
},
|
isShowSearch: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
// options: ["选项1", "选项2", "选项3", "选项4"], // 下拉框的选项数据
|
selectedOptions: [], // 当前选中的选项
|
showDropdown: false, // 控制悬浮框的显示状态
|
searchText: "", // 过滤选项的搜索文本
|
// ...
|
showConfirmButton: false,
|
selected: this.value
|
};
|
},
|
computed: {
|
filteredOptions() {
|
return this.options.filter((option) =>
|
option.toLowerCase().includes(this.searchText.toLowerCase())
|
);
|
},
|
|
},
|
watch: {
|
value: {
|
deep: true, // 深度监视(针对复杂类型)
|
immediate: true, // 是否立刻执行一次handler
|
handler(newValue) {
|
this.selectedOptions = newValue
|
|
}
|
},
|
selectedOptions: {
|
handler(newValue) {
|
this.$emit('changeDropdownData', newValue)
|
}
|
}, deep: true
|
},
|
methods: {
|
toggleDropdown() {
|
this.showDropdown = !this.showDropdown;
|
this.showConfirmButton = false;
|
},
|
toggleOption(option) {
|
this.showConfirmButton = true;
|
if (this.isSelected(option)) {
|
this.removeOption(option);
|
} else {
|
this.selectedOptions.push(option);
|
}
|
},
|
removeOption(option) {
|
const index = this.selectedOptions.indexOf(option);
|
if (index !== -1) {
|
this.selectedOptions.splice(index, 1);
|
}
|
},
|
submitSelection() {
|
// 重置选项并隐藏确认按钮
|
this.selectedOptions = [];
|
this.showConfirmButton = false;
|
},
|
isSelected(option) {
|
return this.selectedOptions.includes(option);
|
},
|
filterOptions() {
|
this.showDropdown = true;
|
},
|
//暴露
|
changeSelectData(value) {
|
this.selectedOptions = value
|
},
|
handleChange(event) {
|
// 当选中项变化时触发
|
// 通知父组件新的选中值
|
this.$emit('changeDropdownData', event.target.value);
|
},
|
},
|
};
|
</script>
|
|
<style>
|
.confirm-button {
|
display: block;
|
margin-top: 8px;
|
padding: 8px 16px;
|
background-color: #4caf50;
|
color: #fff;
|
border: none;
|
border-radius: 4px;
|
cursor: pointer;
|
position: absolute;
|
right: -31%;
|
top: -21%;
|
}
|
|
.dropdown {
|
min-width: 200px;
|
position: relative;
|
display: inline-block;
|
}
|
|
.selected-option {
|
position: relative;
|
display: flex;
|
align-items: center;
|
min-height: 35px;
|
/* padding: 0 8px; */
|
padding-left: 4px;
|
border: 1px solid #ccc;
|
border-radius: 4px;
|
cursor: pointer;
|
}
|
|
.selected-values {
|
width: 215px;
|
padding-right: 8px;
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.selected-value {
|
|
display: flex;
|
align-items: center;
|
padding: 0 4px;
|
line-height: 24px;
|
background-color: #f2f2f2;
|
border-radius: 16px;
|
margin-right: 4px;
|
margin-bottom: 4px;
|
}
|
|
.selected-value .selected-value-txt {
|
height: 24px;
|
display: inline-block;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
width: 80px;
|
}
|
|
.selected-value .delete {
|
margin-left: 4px;
|
cursor: pointer;
|
}
|
|
.selected-option input {
|
flex: 1;
|
border: none;
|
background-color: transparent;
|
outline: none;
|
cursor: pointer;
|
}
|
|
.arrow {
|
position: absolute;
|
right: 4px;
|
width: 0;
|
height: 0;
|
border-style: solid;
|
border-width: 7px 7px 0 7px;
|
border-color: #999 transparent transparent transparent;
|
margin-left: 4px;
|
}
|
|
.options-list {
|
position: absolute;
|
top: 100%;
|
left: 0;
|
width: 100%;
|
background-color: #fff;
|
border: 1px solid #ccc;
|
border-radius: 4px;
|
list-style: none;
|
padding: 0;
|
margin: 0;
|
z-index: 9999999;
|
}
|
|
.options-list li {
|
display: flex;
|
align-items: center;
|
padding: 8px;
|
cursor: pointer;
|
transition: background-color 0.3s ease;
|
}
|
|
.options-list li:hover {
|
background-color: #f2f2f2;
|
}
|
|
.options-list li input[type="checkbox"] {
|
margin-right: 8px;
|
cursor: pointer;
|
}
|
</style>
|
