jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-05-29 22:17:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add empty state to dropdown when no search results

Browse Source
This commit is contained in:
Tim
2025-10-07 16:29:53 +08:00
parent 87b214cbc0
commit 343c4d3793
1 changed files with 53 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
frontend_nuxt/components/Dropdown.vue
View File

@@ -62,42 +62,7 @@
<l-hatch size="20" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch> <l-hatch size="20" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
</div> </div>
<template v-else> <template v-else>
<div <div v-if="filteredOptions.length === 0" class="dropdown-empty">没有搜索结果</div>
v-for="o in filteredOptions"
:key="o.id"
@click="select(o.id)"
:class="['dropdown-option', optionClass, { selected: isSelected(o.id) }]"
>
<slot name="option" :option="o" :isSelected="isSelected(o.id)">
<template v-if="o.icon">
<BaseImage
v-if="isImageIcon(o.icon)"
:src="o.icon"
class="option-icon"
:alt="o.name"
/>
<component v-else :is="o.icon" class="option-icon" :size="16" />
</template>
<span>{{ o.name }}</span>
</slot>
</div>
<slot name="footer" :close="close" :loading="loading" />
</template>
</div>
<Teleport to="body">
<div v-if="open && isMobile" class="dropdown-mobile-page">
<div class="dropdown-mobile-header">
<next class="back-icon" @click="close" />
<span class="mobile-title">{{ placeholder }}</span>
</div>
<div class="dropdown-mobile-menu" ref="mobileMenuRef">
<div v-if="showSearch" class="dropdown-search">
<search-icon class="search-icon" />
<input type="text" v-model="search" placeholder="搜索" />
</div>
<div v-if="loading" class="dropdown-loading">
<l-hatch size="20" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
</div>
<template v-else> <template v-else>
<div <div
v-for="o in filteredOptions" v-for="o in filteredOptions"
@@ -120,6 +85,47 @@
</div> </div>
<slot name="footer" :close="close" :loading="loading" /> <slot name="footer" :close="close" :loading="loading" />
</template> </template>
</template>
</div>
<Teleport to="body">
<div v-if="open && isMobile" class="dropdown-mobile-page">
<div class="dropdown-mobile-header">
<next class="back-icon" @click="close" />
<span class="mobile-title">{{ placeholder }}</span>
</div>
<div class="dropdown-mobile-menu" ref="mobileMenuRef">
<div v-if="showSearch" class="dropdown-search">
<search-icon class="search-icon" />
<input type="text" v-model="search" placeholder="搜索" />
</div>
<div v-if="loading" class="dropdown-loading">
<l-hatch size="20" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
</div>
<template v-else>
<div v-if="filteredOptions.length === 0" class="dropdown-empty">没有搜索结果</div>
<template v-else>
<div
v-for="o in filteredOptions"
:key="o.id"
@click="select(o.id)"
:class="['dropdown-option', optionClass, { selected: isSelected(o.id) }]"
>
<slot name="option" :option="o" :isSelected="isSelected(o.id)">
<template v-if="o.icon">
<BaseImage
v-if="isImageIcon(o.icon)"
:src="o.icon"
class="option-icon"
:alt="o.name"
/>
<component v-else :is="o.icon" class="option-icon" :size="16" />
</template>
<span>{{ o.name }}</span>
</slot>
</div>
<slot name="footer" :close="close" :loading="loading" />
</template>
</template>
</div> </div>
</div> </div>
</Teleport> </Teleport>
@@ -384,6 +390,13 @@ export default {
padding: 10px 0; padding: 10px 0;
} }
.dropdown-empty {
padding: 20px;
text-align: center;
color: var(--muted-text-color, #8c8c8c);
font-size: 14px;
}
.dropdown-mobile-page { .dropdown-mobile-page {
position: fixed; position: fixed;
top: 0; top: 0;