mirror of https://github.com/veypi/OneAuth.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
2.0 KiB
HTML
96 lines
2.0 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head></head>
|
|
<style>
|
|
.select-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.select-input {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.option-list {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 100%;
|
|
margin-top: 4px;
|
|
background-color: #fff;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
width: 100%;
|
|
}
|
|
|
|
.option-item {
|
|
padding: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.option-item:hover {
|
|
background-color: #f0f0f0;
|
|
}
|
|
</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>
|