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

feat: integrate icon park in dropdown

Browse Source
This commit is contained in:
Tim
2025-09-06 10:09:55 +08:00
parent 4a4c256568
commit 6293f572d8
1 changed files with 46 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
frontend_nuxt/components/Dropdown.vue
View File

@@ -19,6 +19,12 @@
class="option-icon"
:alt="label.name"
/>
<component
v-else-if="isIconComponent(label.icon)"
:is="label.icon"
class="option-icon"
:size="16"
/>
<i v-else :class="['option-icon', label.icon]"></i>
</template>
<span>{{ label.name }}</span>
@@ -38,6 +44,12 @@
class="option-icon"
:alt="selectedLabels[0].name"
/>
<component
v-else-if="isIconComponent(selectedLabels[0].icon)"
:is="selectedLabels[0].icon"
class="option-icon"
:size="16"
/>
<i v-else :class="['option-icon', selectedLabels[0].icon]"></i>
</template>
<span>{{ selectedLabels[0].name }}</span>
@@ -45,7 +57,7 @@
</span>
<span v-else class="placeholder">{{ placeholder }}</span>
</template>
<i class="fas fa-caret-down dropdown-caret"></i>
<down class="dropdown-caret" />
</slot>
</div>
<div
@@ -54,7 +66,7 @@
v-click-outside="close"
>
<div v-if="showSearch" class="dropdown-search">
<i class="fas fa-search search-icon"></i>
<search-icon class="search-icon" />
<input type="text" v-model="search" placeholder="搜索" />
</div>
<div v-if="loading" class="dropdown-loading">
@@ -75,6 +87,12 @@
class="option-icon"
:alt="o.name"
/>
<component
v-else-if="isIconComponent(o.icon)"
:is="o.icon"
class="option-icon"
:size="16"
/>
<i v-else :class="['option-icon', o.icon]"></i>
</template>
<span>{{ o.name }}</span>
@@ -85,12 +103,12 @@
<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>
<next class="back-icon" @click="close" />
<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>
<search-icon class="search-icon" />
<input type="text" v-model="search" placeholder="搜索" />
</div>
<div v-if="loading" class="dropdown-loading">
@@ -111,6 +129,12 @@
class="option-icon"
:alt="o.name"
/>
<component
v-else-if="isIconComponent(o.icon)"
:is="o.icon"
class="option-icon"
:size="16"
/>
<i v-else :class="['option-icon', o.icon]"></i>
</template>
<span>{{ o.name }}</span>
@@ -249,6 +273,10 @@ export default {
return /^https?:\/\//.test(icon) || icon.startsWith('/')
}
const isIconComponent = (icon) => {
return typeof icon === 'string' && !icon.includes(' ')
}
expose({ toggle, close })
return {
@@ -263,6 +291,7 @@ export default {
isSelected,
loading,
isImageIcon,
isIconComponent,
setSearch,
isMobile,
}
@@ -303,6 +332,10 @@ export default {
overflow-y: auto;
}
.dropdown-caret {
margin-left: 5px;
}
.selected-label {
display: inline-flex;
align-items: center;
@@ -326,6 +359,10 @@ export default {
color: var(--text-color);
}
.search-icon {
font-size: 14px;
}
.dropdown-option {
display: flex;
align-items: center;
@@ -376,6 +413,11 @@ export default {
border-bottom: 1px solid var(--normal-border-color);
}
.back-icon {
transform: rotate(180deg);
cursor: pointer;
}
.dropdown-mobile-menu {
flex: 1;
overflow-y: auto;