!156 新增 路由搜索

Merge pull request !156 from 卡农ding/addRouterSearch
This commit is contained in:
芋道源码 2023-05-29 14:33:03 +00:00 committed by Gitee
commit 20426c43e3
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
3 changed files with 80 additions and 1 deletions

View File

@ -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"

View File

@ -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%;

View 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>