jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-05-28 21:47:44 +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

93
frontend_nuxt/components/Dropdown.vue
View File

@@ -62,26 +62,29 @@
<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" <template v-else>
:key="o.id" <div
@click="select(o.id)" v-for="o in filteredOptions"
:class="['dropdown-option', optionClass, { selected: isSelected(o.id) }]" :key="o.id"
> @click="select(o.id)"
<slot name="option" :option="o" :isSelected="isSelected(o.id)"> :class="['dropdown-option', optionClass, { selected: isSelected(o.id) }]"
<template v-if="o.icon"> >
<BaseImage <slot name="option" :option="o" :isSelected="isSelected(o.id)">
v-if="isImageIcon(o.icon)" <template v-if="o.icon">
:src="o.icon" <BaseImage
class="option-icon" v-if="isImageIcon(o.icon)"
:alt="o.name" :src="o.icon"
/> class="option-icon"
<component v-else :is="o.icon" class="option-icon" :size="16" /> :alt="o.name"
</template> />
<span>{{ o.name }}</span> <component v-else :is="o.icon" class="option-icon" :size="16" />
</slot> </template>
</div> <span>{{ o.name }}</span>
<slot name="footer" :close="close" :loading="loading" /> </slot>
</div>
<slot name="footer" :close="close" :loading="loading" />
</template>
</template> </template>
</div> </div>
<Teleport to="body"> <Teleport to="body">
@@ -99,26 +102,29 @@
<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" <template v-else>
:key="o.id" <div
@click="select(o.id)" v-for="o in filteredOptions"
:class="['dropdown-option', optionClass, { selected: isSelected(o.id) }]" :key="o.id"
> @click="select(o.id)"
<slot name="option" :option="o" :isSelected="isSelected(o.id)"> :class="['dropdown-option', optionClass, { selected: isSelected(o.id) }]"
<template v-if="o.icon"> >
<BaseImage <slot name="option" :option="o" :isSelected="isSelected(o.id)">
v-if="isImageIcon(o.icon)" <template v-if="o.icon">
:src="o.icon" <BaseImage
class="option-icon" v-if="isImageIcon(o.icon)"
:alt="o.name" :src="o.icon"
/> class="option-icon"
<component v-else :is="o.icon" class="option-icon" :size="16" /> :alt="o.name"
</template> />
<span>{{ o.name }}</span> <component v-else :is="o.icon" class="option-icon" :size="16" />
</slot> </template>
</div> <span>{{ o.name }}</span>
<slot name="footer" :close="close" :loading="loading" /> </slot>
</div>
<slot name="footer" :close="close" :loading="loading" />
</template>
</template> </template>
</div> </div>
</div> </div>
@@ -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;