feat: 菜单右上角加一个搜索图标
This commit is contained in:
parent
1744c6ec6f
commit
b95b8008f7
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<ElDialog v-model="showSearch" :show-close="false" title="菜单搜索">
|
<ElDialog v-if="isModal" v-model="showSearch" :show-close="false" title="菜单搜索">
|
||||||
<el-select
|
<el-select
|
||||||
filterable
|
filterable
|
||||||
:reserve-keyword="false"
|
:reserve-keyword="false"
|
||||||
@ -17,11 +17,34 @@
|
|||||||
/>
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</ElDialog>
|
</ElDialog>
|
||||||
|
<div v-else class="custom-hover" @click.stop="showTopSearch = !showTopSearch">
|
||||||
|
<Icon icon="ep:search" />
|
||||||
|
<el-select
|
||||||
|
filterable
|
||||||
|
:reserve-keyword="false"
|
||||||
|
remote
|
||||||
|
placeholder="请输入菜单内容"
|
||||||
|
:remote-method="remoteMethod"
|
||||||
|
class="overflow-hidden transition-all-600"
|
||||||
|
:class="showTopSearch ? 'w-220px ml2' : 'w-0'"
|
||||||
|
@change="handleChange"
|
||||||
|
>
|
||||||
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
defineProps({
|
||||||
|
isModal: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
const router = useRouter() // 路由对象
|
const router = useRouter() // 路由对象
|
||||||
const showSearch = ref(false) // 是否显示弹框
|
const showSearch = ref(false) // 是否显示弹框
|
||||||
|
const showTopSearch = ref(false) // 是否显示顶部搜索框
|
||||||
const value: Ref = ref('') // 用户输入的值
|
const value: Ref = ref('') // 用户输入的值
|
||||||
|
|
||||||
const routers = router.getRoutes() // 路由对象
|
const routers = router.getRoutes() // 路由对象
|
||||||
@ -50,14 +73,21 @@ function remoteMethod(data) {
|
|||||||
|
|
||||||
function handleChange(path) {
|
function handleChange(path) {
|
||||||
router.push({ path })
|
router.push({ path })
|
||||||
|
hiddenTopSearch();
|
||||||
|
}
|
||||||
|
|
||||||
|
function hiddenTopSearch() {
|
||||||
|
showTopSearch.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
window.addEventListener('keydown', listenKey)
|
window.addEventListener('keydown', listenKey)
|
||||||
|
window.addEventListener('click', hiddenTopSearch)
|
||||||
})
|
})
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
window.removeEventListener('keydown', listenKey)
|
window.removeEventListener('keydown', listenKey)
|
||||||
|
window.removeEventListener('click', hiddenTopSearch)
|
||||||
})
|
})
|
||||||
|
|
||||||
// 监听 ctrl + k
|
// 监听 ctrl + k
|
||||||
|
@ -7,6 +7,7 @@ import { Screenfull } from '@/layout/components/Screenfull'
|
|||||||
import { Breadcrumb } from '@/layout/components/Breadcrumb'
|
import { Breadcrumb } from '@/layout/components/Breadcrumb'
|
||||||
import { SizeDropdown } from '@/layout/components/SizeDropdown'
|
import { SizeDropdown } from '@/layout/components/SizeDropdown'
|
||||||
import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
|
import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
|
||||||
|
import RouterSearch from '@/components/RouterSearch/index.vue'
|
||||||
import { useAppStore } from '@/store/modules/app'
|
import { useAppStore } from '@/store/modules/app'
|
||||||
import { useDesign } from '@/hooks/web/useDesign'
|
import { useDesign } from '@/hooks/web/useDesign'
|
||||||
|
|
||||||
@ -25,6 +26,9 @@ const hamburger = computed(() => appStore.getHamburger)
|
|||||||
// 全屏图标
|
// 全屏图标
|
||||||
const screenfull = computed(() => appStore.getScreenfull)
|
const screenfull = computed(() => appStore.getScreenfull)
|
||||||
|
|
||||||
|
// 搜索图片
|
||||||
|
const search = computed(() => appStore.search)
|
||||||
|
|
||||||
// 尺寸图标
|
// 尺寸图标
|
||||||
const size = computed(() => appStore.getSize)
|
const size = computed(() => appStore.getSize)
|
||||||
|
|
||||||
@ -61,6 +65,7 @@ export default defineComponent({
|
|||||||
{screenfull.value ? (
|
{screenfull.value ? (
|
||||||
<Screenfull class="custom-hover" color="var(--top-header-text-color)"></Screenfull>
|
<Screenfull class="custom-hover" color="var(--top-header-text-color)"></Screenfull>
|
||||||
) : undefined}
|
) : undefined}
|
||||||
|
{search.value ? (<RouterSearch isModal={false} />) : undefined}
|
||||||
{size.value ? (
|
{size.value ? (
|
||||||
<SizeDropdown class="custom-hover" color="var(--top-header-text-color)"></SizeDropdown>
|
<SizeDropdown class="custom-hover" color="var(--top-header-text-color)"></SizeDropdown>
|
||||||
) : undefined}
|
) : undefined}
|
||||||
|
@ -16,6 +16,7 @@ interface AppState {
|
|||||||
uniqueOpened: boolean
|
uniqueOpened: boolean
|
||||||
hamburger: boolean
|
hamburger: boolean
|
||||||
screenfull: boolean
|
screenfull: boolean
|
||||||
|
search: boolean
|
||||||
size: boolean
|
size: boolean
|
||||||
locale: boolean
|
locale: boolean
|
||||||
message: boolean
|
message: boolean
|
||||||
@ -52,6 +53,7 @@ export const useAppStore = defineStore('app', {
|
|||||||
uniqueOpened: true, // 是否只保持一个子菜单的展开
|
uniqueOpened: true, // 是否只保持一个子菜单的展开
|
||||||
hamburger: true, // 折叠图标
|
hamburger: true, // 折叠图标
|
||||||
screenfull: true, // 全屏图标
|
screenfull: true, // 全屏图标
|
||||||
|
search: true, // 搜索图标
|
||||||
size: true, // 尺寸图标
|
size: true, // 尺寸图标
|
||||||
locale: true, // 多语言图标
|
locale: true, // 多语言图标
|
||||||
message: true, // 消息图标
|
message: true, // 消息图标
|
||||||
|
Loading…
Reference in New Issue
Block a user