add router search

(cherry picked from commit 43f3c67434)
This commit is contained in:
wangding 2023-05-29 11:26:51 +08:00 committed by shizhong
parent 1e096a47c0
commit ea81cbd520
3 changed files with 51 additions and 51 deletions

View File

@ -8,7 +8,7 @@
"source.fixAll.eslint": true
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
"editor.defaultFormatter": "Vue.volar"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"

View File

@ -3,8 +3,7 @@ import { isDark } from '@/utils/is'
import { useAppStore } from '@/store/modules/app'
import { useDesign } from '@/hooks/web/useDesign'
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
import routerSearch from '@/components/RouterSearch'
import routerSearch from '@/components/RouterSearch/index.vue'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('app')
@ -26,11 +25,12 @@ setDefaultTheme()
<template>
<ConfigGlobal :size="currentSize">
<RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" />
<routerSearch/>
<routerSearch />
</ConfigGlobal>
</template>
<style lang="scss">
$prefix-cls: #{$namespace}-app;
.size {
width: 100%;
height: 100%;

View File

@ -1,76 +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>
<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 value: Ref = ref('') //
const routers = router.getRoutes() //
const options = computed(() => { //
if(!value.value) {
return []
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
}
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
}
})
})
return list.map((item) => {
return {
label: `${item.meta.title}${item.path}`,
value: item.path
}
})
})
function remoteMethod(data) {
//
value.value = data
//
value.value = data
}
function handleChange(path) {
router.push({path})
router.push({ path })
}
onMounted(() => {
window.addEventListener('keydown', listenKey)
window.addEventListener('keydown', listenKey)
})
onUnmounted(() => {
window.removeEventListener('keydown', listenKey)
window.removeEventListener('keydown', listenKey)
})
// ctrl + k
function listenKey(event) {
if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
showSearch.value = !showSearch.value
//
}
if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
showSearch.value = !showSearch.value
//
}
}
defineExpose({
openSearch: () => {
showSearch.value = true
}
openSearch: () => {
showSearch.value = true
}
})
</script>
</script>