parent
1e096a47c0
commit
ea81cbd520
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@ -8,7 +8,7 @@
|
||||
"source.fixAll.eslint": true
|
||||
},
|
||||
"[vue]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
"editor.defaultFormatter": "Vue.volar"
|
||||
},
|
||||
"[javascript]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
|
@ -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%;
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user