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

use teleport for mobile dropdown

Browse Source
This commit is contained in:
Tim
2025-07-30 13:01:43 +08:00
parent 18c52c18e3
commit 23ce2f7d1f
1 changed files with 26 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
open-isle-cli/src/components/Dropdown.vue
View File

@@ -53,33 +53,35 @@
</div>
</template>
</div>
<div v-if="open && isMobile" class="dropdown-mobile-page">
<div class="dropdown-mobile-header">
<i class="fas fa-arrow-left" @click="close"></i>
<span class="mobile-title">{{ placeholder }}</span>
</div>
<div class="dropdown-mobile-menu">
<div v-if="showSearch" class="dropdown-search">
<i class="fas fa-search search-icon"></i>
<input type="text" v-model="search" placeholder="搜索" />
<Teleport to="body">
<div v-if="open && isMobile" class="dropdown-mobile-page">
<div class="dropdown-mobile-header">
<i class="fas fa-arrow-left" @click="close"></i>
<span class="mobile-title">{{ placeholder }}</span>
</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-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">
<img v-if="isImageIcon(o.icon)" :src="o.icon" class="option-icon" />
<i v-else :class="['option-icon', o.icon]"></i>
</template>
<span>{{ o.name }}</span>
</slot>
<div class="dropdown-mobile-menu">
<div v-if="showSearch" class="dropdown-search">
<i class="fas fa-search search-icon"></i>
<input type="text" v-model="search" placeholder="搜索" />
</div>
</template>
<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-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">
<img v-if="isImageIcon(o.icon)" :src="o.icon" class="option-icon" />
<i v-else :class="['option-icon', o.icon]"></i>
</template>
<span>{{ o.name }}</span>
</slot>
</div>
</template>
</div>
</div>
</div>
</Teleport>
</div>
</template>