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 "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,8 +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' import routerSearch from '@/components/RouterSearch/index.vue'
const { getPrefixCls } = useDesign() const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('app') const prefixCls = getPrefixCls('app')
@ -26,11 +25,12 @@ setDefaultTheme()
<template> <template>
<ConfigGlobal :size="currentSize"> <ConfigGlobal :size="currentSize">
<RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" /> <RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" />
<routerSearch/> <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

@ -1,76 +1,76 @@
<template> <template>
<ElDialog v-model="showSearch" :show-close="false" title="菜单搜索"> <ElDialog v-model="showSearch" :show-close="false" title="菜单搜索">
<el-select <el-select
filterable filterable
:reserve-keyword="false" :reserve-keyword="false"
remote remote
placeholder="请输入菜单内容" placeholder="请输入菜单内容"
:remote-method="remoteMethod" :remote-method="remoteMethod"
style="width: 100%;" style="width: 100%"
@change="handleChange" @change="handleChange"
> >
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
/> />
</el-select> </el-select>
</ElDialog> </ElDialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const router = useRouter() // const router = useRouter() //
const showSearch = ref(false) // const showSearch = ref(false) //
const value:Ref = ref('') // const value: Ref = ref('') //
const routers = router.getRoutes() // const routers = router.getRoutes() //
const options = computed(() => { // const options = computed(() => {
if(!value.value) { //
return [] 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 list.map((item) => {
return true 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) { function remoteMethod(data) {
// //
value.value = data value.value = data
} }
function handleChange(path) { function handleChange(path) {
router.push({path}) router.push({ path })
} }
onMounted(() => { onMounted(() => {
window.addEventListener('keydown', listenKey) window.addEventListener('keydown', listenKey)
}) })
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('keydown', listenKey) window.removeEventListener('keydown', listenKey)
}) })
// ctrl + k // ctrl + k
function listenKey(event) { function listenKey(event) {
if ((event.ctrlKey || event.metaKey) && event.key === 'k') { if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
showSearch.value = !showSearch.value showSearch.value = !showSearch.value
// //
} }
} }
defineExpose({ defineExpose({
openSearch: () => { openSearch: () => {
showSearch.value = true showSearch.value = true
} }
}) })
</script> </script>