From 6768cdea0588478b0f0048676c8eb9d37dc61696 Mon Sep 17 00:00:00 2001
From: wangding <857299269.com>
Date: Mon, 29 May 2023 11:05:46 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=B7=AF=E7=94=B1?=
=?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/App.vue | 3 ++
src/components/RouterSearch/index.vue | 76 +++++++++++++++++++++++++++
2 files changed, 79 insertions(+)
create mode 100644 src/components/RouterSearch/index.vue
diff --git a/src/App.vue b/src/App.vue
index 75edd24f..c40f767e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,6 +3,8 @@ 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'
+
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('app')
@@ -24,6 +26,7 @@ setDefaultTheme()
<template>
<ConfigGlobal :size="currentSize">
<RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" />
+ <routerSearch/>
</ConfigGlobal>
</template>
<style lang="scss">
diff --git a/src/components/RouterSearch/index.vue b/src/components/RouterSearch/index.vue
new file mode 100644
index 00000000..0f984ef7
--- /dev/null
+++ b/src/components/RouterSearch/index.vue
@@ -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>
\ No newline at end of file
From 43f3c6743483544343eb814dfe98419e19cfc52e Mon Sep 17 00:00:00 2001
From: wangding <857299269.com>
Date: Mon, 29 May 2023 11:26:51 +0800
Subject: [PATCH 2/2] add router search
---
.vscode/settings.json | 2 +-
src/App.vue | 6 +-
src/components/RouterSearch/index.vue | 94 +++++++++++++--------------
3 files changed, 51 insertions(+), 51 deletions(-)
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 3036ebf1..5b3aa477 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -8,7 +8,7 @@
"source.fixAll.eslint": true
},
"[vue]": {
- "editor.defaultFormatter": "esbenp.prettier-vscode"
+ "editor.defaultFormatter": "Vue.volar"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
diff --git a/src/App.vue b/src/App.vue
index c40f767e..f75478cd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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%;
diff --git a/src/components/RouterSearch/index.vue b/src/components/RouterSearch/index.vue
index 0f984ef7..d44ce267 100644
--- a/src/components/RouterSearch/index.vue
+++ b/src/components/RouterSearch/index.vue
@@ -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>
\ No newline at end of file
+</script>