|
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<meta name="description" content="Custom Select Component">
|
|
|
|
|
</head>
|
|
|
|
|
<style>
|
|
|
|
|
.select-wrapper {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.select-input {
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
|
|
|
border: 1px solid var(--border-color);
|
|
|
|
|
border-radius: var(--radius-md);
|
|
|
|
|
background-color: var(--bg-color-primary);
|
|
|
|
|
color: var(--text-color-primary);
|
|
|
|
|
transition: var(--transition-base);
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.select-input:focus {
|
|
|
|
|
border-color: var(--color-primary);
|
|
|
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary), transparent 80%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.option-list {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 100%;
|
|
|
|
|
margin-top: 4px;
|
|
|
|
|
background-color: var(--bg-color-primary);
|
|
|
|
|
border: 1px solid var(--border-color);
|
|
|
|
|
border-radius: var(--radius-md);
|
|
|
|
|
box-shadow: var(--shadow-lg);
|
|
|
|
|
width: 100%;
|
|
|
|
|
z-index: 50;
|
|
|
|
|
max-height: 200px;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.option-item {
|
|
|
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: var(--text-color-primary);
|
|
|
|
|
transition: var(--transition-base);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.option-item:hover {
|
|
|
|
|
background-color: var(--bg-color-tertiary);
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div class="select-wrapper">
|
|
|
|
|
<input type="text" class="select-input" placeholder="选择或搜索..." !value="searchText" @input="handleSearch" />
|
|
|
|
|
|
|
|
|
|
<ul class="option-list" v-if="filteredOptions.length > 0 && showOptions">
|
|
|
|
|
<li class="option-item" v-for="(option, index) in filteredOptions" :key="index" @click="selectOption(option)">
|
|
|
|
|
{{ option.label }}
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
// 初始化数据
|
|
|
|
|
options = [
|
|
|
|
|
{ value: 'option1', label: '选项 1' },
|
|
|
|
|
{ value: 'option2', label: '选项 2' },
|
|
|
|
|
{ value: 'option3', label: '选项 3' },
|
|
|
|
|
{ value: 'option4', label: '选项 4' }
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
value = '';
|
|
|
|
|
searchText = '';
|
|
|
|
|
showOptions = false;
|
|
|
|
|
|
|
|
|
|
// 数据过滤结果
|
|
|
|
|
filteredOptions = [...options];
|
|
|
|
|
|
|
|
|
|
// 搜索处理函数
|
|
|
|
|
handleSearch = (e) => {
|
|
|
|
|
const query = e.target.value.trim().toLowerCase();
|
|
|
|
|
searchText = query;
|
|
|
|
|
filteredOptions = options.filter(option =>
|
|
|
|
|
option.label.toLowerCase().includes(query)
|
|
|
|
|
);
|
|
|
|
|
showOptions = true; // 只有当有输入时才显示选项列表
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 选项选择处理函数
|
|
|
|
|
selectOption = (option) => {
|
|
|
|
|
value = option.value;
|
|
|
|
|
searchText = option.label;
|
|
|
|
|
showOptions = false;
|
|
|
|
|
$data.showOptions = false; // 确保视图更新
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// 页面加载后自动执行
|
|
|
|
|
window.addEventListener('click', (event) => {
|
|
|
|
|
if (!$node.querySelector('.select-wrapper').contains(event.target)) {
|
|
|
|
|
$data.showOptions = false;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</html>
|
