commit
20426c43e3
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@ -8,7 +8,7 @@
|
|||||||
"source.fixAll.eslint": true
|
"source.fixAll.eslint": true
|
||||||
},
|
},
|
||||||
"[vue]": {
|
"[vue]": {
|
||||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
"editor.defaultFormatter": "Vue.volar"
|
||||||
},
|
},
|
||||||
"[javascript]": {
|
"[javascript]": {
|
||||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||||
|
@ -3,6 +3,7 @@ import { isDark } from '@/utils/is'
|
|||||||
import { useAppStore } from '@/store/modules/app'
|
import { useAppStore } from '@/store/modules/app'
|
||||||
import { useDesign } from '@/hooks/web/useDesign'
|
import { useDesign } from '@/hooks/web/useDesign'
|
||||||
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
|
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
|
||||||
|
import routerSearch from '@/components/RouterSearch/index.vue'
|
||||||
|
|
||||||
const { getPrefixCls } = useDesign()
|
const { getPrefixCls } = useDesign()
|
||||||
const prefixCls = getPrefixCls('app')
|
const prefixCls = getPrefixCls('app')
|
||||||
@ -24,10 +25,12 @@ setDefaultTheme()
|
|||||||
<template>
|
<template>
|
||||||
<ConfigGlobal :size="currentSize">
|
<ConfigGlobal :size="currentSize">
|
||||||
<RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" />
|
<RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" />
|
||||||
|
<routerSearch />
|
||||||
</ConfigGlobal>
|
</ConfigGlobal>
|
||||||
</template>
|
</template>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
$prefix-cls: #{$namespace}-app;
|
$prefix-cls: #{$namespace}-app;
|
||||||
|
|
||||||
.size {
|
.size {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
76
src/components/RouterSearch/index.vue
Normal file
76
src/components/RouterSearch/index.vue
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
<template>
|
||||||
|
<ElDialog v-model="showSearch" :show-close="false" title="菜单搜索">
|
||||||
|
<el-select
|
||||||
|
filterable
|
||||||
|
:reserve-keyword="false"
|
||||||
|
remote
|
||||||
|
placeholder="请输入菜单内容"
|
||||||
|
:remote-method="remoteMethod"
|
||||||
|
style="width: 100%"
|
||||||
|
@change="handleChange"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</ElDialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
const router = useRouter() // 路由对象
|
||||||
|
const showSearch = ref(false) // 是否显示弹框
|
||||||
|
const value: Ref = ref('') // 用户输入的值
|
||||||
|
|
||||||
|
const routers = router.getRoutes() // 路由对象
|
||||||
|
const options = computed(() => {
|
||||||
|
// 提示选项
|
||||||
|
if (!value.value) {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
const list = routers.filter((item: any) => {
|
||||||
|
if (item.meta.title?.indexOf(value.value) > -1 || item.path.indexOf(value.value) > -1) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return list.map((item) => {
|
||||||
|
return {
|
||||||
|
label: `${item.meta.title}${item.path}`,
|
||||||
|
value: item.path
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
function remoteMethod(data) {
|
||||||
|
// 这里可以执行相应的操作(例如打开搜索框等)
|
||||||
|
value.value = data
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleChange(path) {
|
||||||
|
router.push({ path })
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
window.addEventListener('keydown', listenKey)
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener('keydown', listenKey)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 监听 ctrl + k
|
||||||
|
function listenKey(event) {
|
||||||
|
if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
|
||||||
|
showSearch.value = !showSearch.value
|
||||||
|
// 这里可以执行相应的操作(例如打开搜索框等)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
openSearch: () => {
|
||||||
|
showSearch.value = true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
Loading…
Reference in New Issue
Block a user